Hexo 安装

运行环境安装

  • Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)
  • Git

Hexo 安装

npm install -g hexo-cli

创建目录

Hexo 安装完成后,选择一个空文件夹执行:

hexo init <folder>
cd <folder>
npm install

初始化后,目录结构如下:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

只需要关注:_config.yml / source/ / themes/,其余文件不需要修改

页面生成

使用命令生成静态文件

hexo g	# hexo generate

然后再使用 hexo s 可在本地启动

hexo s	# hexo server

使用 hexo clean 清除生成的静态文件

hexo clean

一键部署 Github Page

下载插件:

npm install hexo-deployer-git --save

然后在 _config.yml 中添加 deploy 配置

deploy:
  type: git
  repo: <repository url> # https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch]
  message: [message]
选项 描述 默认
repo 目标存储库的 URL
branch 分支名称 gh-pages (GitHub)
coding-pages (Coding.net)
master (others)
message 自定义提交信息 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}
token 可选的令牌值,用于认证 repo。 用  $  作为前缀从而从环境变量中读取令牌

在 Repository Settings 中将默认分支设置为 _config.yml 配置中的分支名称

当需要更新部署时,使用以下命令就会自行上传并部署

hexo d	# hexo deploy

基础配置

参考文档

可以在 _config.yml 或代替配置文件中修改大部分的配置

网站

设置 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站的关键词。支持多个关键词。
author 您的名字
language 网站使用的语言。使用  2 个字母的 ISO-639-1 代码,或  它的变体。默认为  en
timezone 网站时区。 Hexo 默认使用您电脑的时区。请参考  时区列表  进行设置,如  America/New_YorkJapan, 和  UTC 。一般的,对于中国大陆地区可以使用  Asia/Shanghai

网址

设置 描述 默认值
url 网址, 必须以  http://  或  https://  开头
root 网站根目录 url's pathname
permalink 文章的  永久链接  格式 :year/:month/:day/:title/
permalink_defaults 永久链接中各部分的默认值
pretty_urls 改写  permalink  的值来美化 URL
pretty_urls.trailing_index 是否在永久链接中保留尾部的  index.html,设置为  false  时去除 true
pretty_urls.trailing_html 是否在永久链接中保留尾部的  .html, 设置为  false  时去除 (对尾部的  index.html 无效) true

网站存放在子目录

如果您的网站存放在子目录中,例如  http://example.com/blog,则请将您的  url  设为  http://example.com/blog  并把  root  设为  /blog/

例如:

# e.g. page.permalink is http://example.com/foo/bar/index.html
pretty_urls:
  trailing_index: false
# becomes http://example.com/foo/bar/

目录

设置 描述 默认值
source_dir Source 文件夹存储内容的位置 source
public_dir Public 文件夹生成静态站点的位置 public
tag_dir 标签文件夹 tags
archive_dir 归档文件夹 archives
category_dir 分类文件夹 categories
code_dir Include code 文件夹,source_dir  下的子目录 downloads/code
i18n_dir 国际化(i18n)文件夹 :lang
skip_render 匹配到的文件将会被不做改动地复制到  public  目录中。您可使用  glob 表达式来匹配路径。

例如:

skip_render: "mypage/**/*"
# 将会直接将 `source/mypage/index.html` 和 `source/mypage/code.js` 不做改动地输出到 'public' 目录
# 你也可以用这种方法来跳过对指定文章文件的渲染
skip_render: "_posts/test-post.md"
# 这将会忽略对 'test-post.md' 的渲染

## This also can be used to exclude posts,
skip_render: "_posts/test-post.md"
# will ignore the `source/_posts/test-post.md`.

以上是比较重要的配置,还有部分配置未列出,可参考文档

主题

butterfly 主题为例

下载主题

(建议先 Fork 一份主题,使用自己 Fork 后的链接)

在 Hexo 项目的根目录下,下载 Clone theme

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

启动主题

在根目录下的 _config.yml 中,修改主题

theme: butterfly

安装插件

npm install hexo-renderer-pug hexo-renderer-stylus --save

主题配置

为避免主题升级时,下载主题会将自己的配置文件覆盖,所以先将 themes/butterfly/_config.yml 复制到根目录(不要删除),并重命名为 _config.butterfly.yml,之后在根目录的配置文件中进行修改

之后可以自行查看配置文件中的选项,选择是否启动

一般需要配置:

  1. 启动数学公式渲染
math:
  # Choose: mathjax, katex
  # Leave it empty if you don't need math
  use: mathjax
  1. 设置 Logo
nav:
  # Navigation bar logo image
  logo:
  display_title: true
  display_post_title: true
  # Whether to fix navigation bar
  fixed: false
  1. 设置导航栏
menu:
  Home: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  娱乐||fas fa-list:
    音乐: /music/ || fas fa-music
    电影: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart
  1. 设置跳转链接
social:
  fab fa-github: https://github.com/musuyin || Github || '#24292e'
  fas fa-envelope: mailto:musuyin@qq.com || Email || '#4a7dbe'

参考文档