Hexo 是一款开源的博客框架，使用 Markdown 编写文章并生成静态网页， 博客整体更加简洁高效。对性能有较高要求的用户可以考虑使用这个。

Hexo 出色的性能，是需要一定的代价的。相比与 WordPress 这类博客系统，Hexo 没有后台管理，无法提供更多的个性化动态响应，此外对你提出了更高的要求：有一定的 Git 基础、懂 Markdown 语法、一定基础的代码阅读能力。。。这些你都会在后面的介绍里认识到。

创建 GitHub 仓库

创建一个 GitHub 仓库可以算是 Git 基础中的基础了吧，这个不再这篇文章的讨论范围（太简单了。。）。当然你也可以将代码部署在自己的 VPS 上，Hexo 自带 web 服务，只需要通过 nginx 等程序反代到 80 端口即可。

不过 GitHub 的羊毛不要白不要，稳定不用自己操心，岂不是妙哉。

安装 Hexo

hexo 是一款基于 Node.js 开发的博客框架，所以 首先要安装 Node.js。

安装 Node.js

下载地址：官网下载

Node.js 提供可视化的安装方式，全程跟着步骤即可。需要注意的是 Windows 系统在安装过程中记得勾选 Add to PATH，方便在 cmd 命令行里使用。

安装技术后，打开 cmd 命令行，MacOS 用户打开终端，使用命令 npm --version 通过查看版本信息的方式检验是否安装成功。

1
2
npm --version
6.14.12

安装 Git

xxxx

安装 Hexo

上面工作准备好之后，安装 Hexo 就非常容易，一句话搞定：

1
npm install hexo-cli -g

同样我们通过查看版本信息的方式检查 Hexo 是否安装成功

1
2
3
4
hexo --version
hexo: 5.4.0
hexo-cli: 4.3.0
xxx xxx

使用 cd 命令切换一个目录，此目录就是操作 Hexo 博客的工作目录了。为了便于区分管理，新建一个目录 hexo-blog。

1
mkdir hexo && cd hexo

现在我们把 Hexo 博客代码下载到工作目录，此步骤只需要 Hexo 初始化命令即可完成

1
hexo init

除了下载源代码，init 初始化命令还帮我们做了一些其他事情，例如下载并使用了 landscape 主题。另外还为我们执行了 npm install 命令帮我们安装了依赖。如果你是旧版，可能需要手动执行此命令。

现在你的工作目录结构如下：

1
2
3
4
5
6
7
8
9
├── _config.yml
├── package.json
├── package-lock.json
├── node_modules
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

使用如下两行命令开启预览一下吧

1
2
hexo g
hexo s

接下来在浏览器打开地址：localhost:4000，你就能一睹 Hexo 了。

可以看到还有一篇名为 Hello World 的文章。接下来就是配置 Hexo 博客了，这些默认的设置显然不是我们想要的。

配置 Hexo

先来了解一下 hexo 的原理。

新建一个文章，可以使用 hexo new postname，例如新建一个名为 test 的文章，那么：

1
2
3
hexo new test
INFO  Validating config
INFO  Created: ~/hexo-blog/source/_posts/test.md

通过提示信息 INFO 看到这篇文章生成在了 source/_posts/test.md。source 目录是 hexo 用来存放未经加工的原始文件的地方。还有一个 _posts 目录，这就是 hexo 的布局，可以理解为文章的类型。hexo 有三种文章类型，post、page 和 draft。post 表示普通文章，page 表示这个一个独立页面，draft 表示文章还只是草稿，还需要修改。

现在在 test.md 文件写个简单的 hello world，保存后使用命令 hexo generate，这一步就是要生成文章等内容了。为什么要生成文章呢？test.md 不就是文章么？要记住，hexo 是一个静态博客，我们写的只是 Markdown 格式的内容，gernerate 帮我们生成可以在网页浏览的 html 格式文件。最终我们的 test 文章就跑到了 hexo 目录下的 public/post/test.html。所以 hexo 真正的根目录其实是 public/。

查看 test.html 会发现，hexo 除了将 hello world 转换成了 <p>hello world</p> 的 html 格式外，还多了一大堆 css、js 等完整的信息，这是怎么做到的？查看 hexo 目录，很明显的看到除了根目录 public 外，还有其他目录和文件，正是这些目录和文件共同规定了 hexo generate 的方式，才生成了一个标签完备的 test.html 文件。

顺利成章的，来看看这些目录和文件。

config.yml

这个就是 hexo 的配置文件，也叫做 站点配置文件，可以对整个博客站进行全局配置。参考如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
title: # 网站标题
subtitle: # 网站副标题
description: # 针对 seo 的网站描述
keywords: # 针对 seo 的网站关键词
language: # 站点支持的语言
author: # 站点的作者
timezone: # 站点的时区。默认使用本地电脑的时区
url: # 站点的地址。带 http 或 https 的域名
root: # 根目录。默认 /
permalink: # 文章的链接，可以认为是 “伪静态”
trailing_index: # 是否显示 index.html
trailing_html: # 是否显示 .html 后缀
theme: # 指定使用的主题
post_asset_folder: # 创建文章的同时创建同名的目录，用于存放资源

网站时区

网站默认的时区就是本地电脑的时区，也可以指定时区，例如指定中国时区：timezone: Asia/Shanghai

二级目录

如果我把 hexo 放在网站根目录下的 blog/ 目录下，即所谓的把 hexo 部署在网站的二级目录，那么需要修改 root 为 /blog/，不要忘了前后两个斜号。否则你的站点除了首页，其他都无法通过链接打开。二级目录在网站虚拟机上比较常用。

链接后缀

如果我不想要 .html 后缀，设置 trailing_html: false；如果不想显示文件名：设置 trailing_index: false

1
2
3
4
5
6
7
8
# 现在有一个链接：
# http://example.com/foo/bar/index.html

# http://example.com/foo/bar/index
trailing_html: false

# http://example.com/foo/bar/
trailing_index: false

文章链接

上面说 permalink 是 “伪静态”，因为效果跟 WordPress 等博客的伪静态一样，但事实上 hexo 是 “真静态”。

hexo 会在 generate 时生成和 permalink 设定的链接一样的目录层级。例如设定 permalink：first/second:title.html，然后命令 hexo generate，在 public/post 目录下会看到 first/second 的目录结构。这个就是站点配置文件改变 hexo 生成方式的一个很好例子。

permalink 支持的变量有：

  • :year ：文章发表年份（4位数）
  • :month：文章发表的月份（2位数）
  • :i_month：文章的发表月份（去掉开头的零）
  • :day 文章的发表日期 (2 位数)
  • :i_day 文章的发表日期（去掉开头的零）
  • :hour 文章发表时的小时 (2 位数)
  • :minute 文章发表时的分钟 (2 位数)
  • :second 文章发表时的秒钟 (2 位数)
  • :title 文件名称 (relative to “source/_posts/“ folder)
  • :name 文件名称
  • :post_title 文章标题
  • :id 文章 ID
  • :category 分类。如果文章没有分类，则是 default_category
  • :hash SHA1 :title 和 date (12-hexadecimal) 加密

资源目录

为了便于管理资源文件，hexo 会在创建文章的同时创建同名目录，文章的资源如视频、照片等都会放在同名目录下。但这个并不是强制规定，你依然可以将资源文件放置在任何地方，只要你在文章内地址引用正确，但是不建议这么做。

资源目录这个功能需要：post_asset_folder: true 开启。开启后，创建一个 test 文件：hexo new test，前往 source/_post 目录可以看到 test.md 文件和 test 目录。

文章内引用资源是：文件名/资源名，例如我把 1.png 图片放在了 test 资源目录，test.md 里引用必然是 test/1.png，网站很多写的是 1.png，这是不对的，除非使用插件。在 Hexo 3 版本里，这类插件被集成到了核心代码中，现在可以使用如下格式来进行引用资源：

1
2
3
{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

所以引用可以这么写：

1
{% asset_img 1.png 图片说明 %}

这类写法的好处是写法一致，引用链接、图片等都一样格式。但是以后你要迁移到其他博客系统，这个不符合 Markdown 写法的标签，需要你想办法改过来。。。

package.json

这个是安装依赖包的说明文件，npm 就是通过参考这个文件来安装依赖的。这里不进行细究，直接把它当作插件，在 init 初始化的时候默认使用了 npm install，就是在照着 package.json 这个清单安装插件。

当要安装指定插件，例如：安装一个 hexo-generator-searchdb 插件，这个插件提供搜索功能，那么命令如下：

1
npm install hexo-generator-searchdb

安装成功后，npm会把下载的 hexo-generator-searchdb 版本信息写进 package.json，同时写入 package.lock 文件里留作记录。更深入了解可以自行参考 npm 的依赖包管理。

source

上文讲了，用于存储博客的未经修改的原始内容文件。source 目录下的文件和目录各有用途：一般文件表示 hexo 的 page 页面，用户存储独立页面； _post 目录存储表示 post 的文章，我们编写文章就在这里；draft 目录存储表示 draft 的草稿。

使用命令 hexo generate 将 source 目录下的文件通过上述的规则生成 public 目录下的 html 文件，供博客使用。查看 source 和 public 两个目录，你就可以在 public 目录下找到所有 source 目录的对应文件。

以 “_” 开头的文件和目录在 generate 时被忽略。当你的有文章没有写好但其他文章着急发布的时候，除了把没有写好的文章放进 draft 草稿里，还可以在其文件名前加 “_”。

除了 html 和 Markdown 文件，source 目录下的文件会被原样放在 public 目录下相同的位置。在部署 Hexo 到 GitHub 时，我们可以直接在 source 目录下创建 CNAME 和 README.md 文件，CNAME 文件里写入 域名实现域名访问。README.md 写此仓库的说明，例如：个人博客。不能直接写在 public 目录下，虽然部署的时候没问题，但是下次 generate 时会被丢失的。

  • hexo generate 可以简写：hexo g
  • hexo new 可以简写：hexo n

scaffolds

定义新建的文章文件默认内容。例如查看 scaffolds/post.md：

1
2
3
4
5
---
title: {{ title }}
date: {{ date }}
tags:
---

当我们一连创建好几篇 教程 分类下的文章时，我们可以增加 categories: 教程，来指定接下来创建的文章默认分类。当你的文章有重复内容时，借助这个可以提高你的写作效率。

themes

主题目录，你的主题都要放在这个目录下。启用某个主题时，例如下面要说的 NexT 主题，那么修改站点配置文件 _config.yml，指定 theme: next。

使用 NexT 主题

NexT 是 Hexo 博客下的一款极简、高效主题，本站使用的便是 NexT 主题。

下载主题

可以使用 git 命令克隆源码：

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

或者前往 release pages 下载源码，重命名为 next 并放置在 themes 目录下。

注意：上述使用的是保持更新的 NexT 新版本，NexT 老版本已经停止维护。

启用

修改站点配置文件 _config.yml，修改 theme 字段为 next。另外需要注意的是语言问题：next 提供的中文包只有 zh-CN.yml、zh-HK.yml 和 zh-TW.yml，所以在 站点配置文件里 language 字段应该修改为 zh-CN 才能使用中文。

相对于站点配置文件 _config.yml，主题也有自己的配置文件 _config.yml，一样的文件名但是作用不一样，请注意区分。

主题配置文件位于 themes/next/_config.yml

切换外观

NexT 主题拥有四种外观，分别是 Muse、Mist、Pisces 和 Gemini，设置为主题配置文件的 scheme 字段。想要启用哪个外观就移除其前面的 # 。例如启用 Pisces：

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

# 通常表示注释，可以认为注释就表示不存在，但对人类可见。

暗夜模式

NexT 支持暗夜模式，修改主题配置文件 darkmode: true 即可开启。但是不会自动切换，这就是静态博客的弊端，它不会像 WordPress 动态读取变量实现更为丰富的变化。

菜单配置

对应的是主题配置文件 menu 字段，取消注释即可开启对应菜单图标。

1
2
3
4
5
6
7
home: #主页
about: #关于
tags: #标签
categories: #分类
archives: #归档
schedule: #日历
sitemap: #站点sitemap

此处的写法是：home: / || fa fa-home，第一个 home 表示显示的菜单名，第二个 “/” 表示链接，第三个 fa fa-home 表示图标。

下面以 page 页面 gallery 图库为例：

自定义一个菜单名：gallery，再修改 NexT 主题语言包：themes/next/languages/zh-CN.yml，在 menu 字段下新建一个子字段： gallery: 图库。这样就能使用中文语言了。

链接使用的是相对路径，会自动补全当前域名。例如 / 会自动补全为 https://yourdomain.com /。这里链接为 /gallery。

图标用的是 awesome，前往 awesome 图标库，搜索你要的图标，点击后进入后选择 Start Using This Icon，其中 i 标签的 class 就可以用在此处了。那些标着 PRO 的图标都是收费的，避开用。搜索 gallery 发现没有想要的图标，我们想要的是图片的图标，再次搜索 images，发现符合的图标了。fa fa-images 正合适。

最后写法是：gallery: /gallery || fa fa-images。

侧边栏

字段：sidebar。下面的 社交、头像 能弄都弄，不能弄的也弄，图标太少不太好看。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
position: #指定侧边栏 居左 left；居右 right
width: #指定侧边栏宽度，默认 300，单位像素
display:
  #post 文章页面展开侧边栏
  #always 任何页面都展开侧边栏
  #hide 隐藏侧边栏，但可以手动点击按钮呼出
  #remove 隐藏侧边栏，并隐藏按钮
avatar: #设定头像
  url: #图片地址。如果想要使用 qq 头像：https://q1.qlogo.cn/g?b=qq&nk=qq号&s=640
  rounded: #true 圆形头像
  rotated：#true 方形头像，四个角弧形
social: #社交账号，这里不列了。使用添加菜单的方法添加一个新的社交，如 QQ。
  QQ: https://wpa.qq.com/msgrd?v=3&uin=QQ号&site=qq&menu=yes || fab fa-qq
  chat: #在线聊天
    enable: #开启在线聊天
    service: chatra # 使用chatra
    service: tidio # 使用tidio

如果开了 在线聊天，如果指定 chatra，那么往下找 chatra 字段，填写 id；如果指定了 tidio，往下找 titio 字段，填写 key。这两个服务为第三方提供，需要自行前往注册。

设置动画

NexT 提供多种动画。

一般动画

设置的对象有：文章块、文章头部、文章主题，针对 Gemini 和 Pisces 外观，还可以让侧边栏动起来。支持的动画有 渐入、抖动进入、从上弹跳进入、从左弹跳进入、从右弹跳进入 等等。

开启动画

1
2
motion
  enable: true // 开启动画

下面就请你折腾吧.

进度条

当页面在加载时，页面顶部进度条的动画。需要安装插件才能启用，插件安装方法：

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-pace source/lib/pace

安装后设置主题配置问题，将 pace 字段设定 true。

1
2
pace:
  enable: true

官方提供了 demo，可以自行对照着设置。

https://codebyzach.github.io/pace/

背景动画

首先安装插件

1
2
3
cd themes/next
git clone https://github.com/theme-next/theme-next-three source/lib/three

然后在主题配置文件开启 three 字段

1
2
3
4
5
three:
  enable: true
  three_waves: false
  canvas_lines: false
  canvas_sphere: false

需要哪个动画就将其设置为 true 即可。

除了上面，还有 彩带动画，需要额外安装插件：

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon

然后在主题配置里开启 canvas_ribbon 字段：

1
2
3
4
5
canvas_ribbon:
  enable: true # 开启彩带背景
  size: 300 # 彩带的宽度
  alpha: 0.6 # 彩带的透明度 1 不透明；0 全透明
  zIndex: -1 # 彩带在第几层，越大越会覆盖文字

加入统计

为网站、页面加入访客统计，开启主题配置文件里 busuanzi_count 字段

1
2
3
4
5
6
7
8
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: fa fa-eye

本地搜索

本地搜索需要插件支持，使用如下命令下载插件：

1
npm install hexo-generator-searchdb

然后在主题配置文件里开启 local_search 字段：

1
2
3
4
5
6
local_search:
  enable: true //开启本地搜索
  trigger: auto // auto 搜索结果实时显示；manual 搜索结果需要点击搜索按钮才显示
  top_n_per_article: 1 // 每篇文章包含关键词的数量
  unescape: true //将 html 标签转化可阅读的字符
  preload: false //搜索预加载

数学公式

这个比较麻烦。主题配置文件里对数学公式的配置简化一下看的清楚

1
2
3
4
5
6
7
8
math:
  per_page: true
  mathjax:
    enable: false
    mhchem: false
  katex:
    enable: false
    copy_tex: false

可以看到 NexT 支持两种数学公式：mathjax 和 katex。per_page 设置为 true 时，只有开头定义了 mathjax: true 的页面才会使用数学公式渲染，false 则对所有页都进行数学公式渲染。推荐 true。

1
2
3
4
5
6
---
title: test
date: 2021-06-27 16:42:58
tags:
mathjax: true
---

KateX

katex 会比 mathjax 有更高的性能，不过 katex 公式没有 mathjax 全面，NexT 主题对 katex 的支持也有些不足。

如果选择使用 Katex 进行数学公式渲染，则需要使用 hexo-renderer-markdown-it-plus。

1
2
npm uninstall hexo-renderer-marked
npm install hexo-renderer-markdown-it-plus

然后在主题配置文件开启 katex。使用很简单，公式的前后都用 $$ 包裹即可。例如：

1
$$c \approx \pm\sqrt{a^2 + b^2}$$

显示效果：

katex 公式写法参考：

https://katex.org/docs/supported.html

MathJax

要使用 mathjax，需要把默认的 Markdown 渲染器：hexo-renderer-marked 改用 hexo-renderer-pandoc 或者 hexo-renderer-kramed。个人测试 hexo-renderer-pandoc 使用数学公式报错，而 hexo-renderer-kramed 官方又不推荐，伤脑 😣

但是当你安装上面 Katex 的生成器 hexo-renderer-markdown-it-plus，发现没有问题，我直接好家伙 😺

1
2
3
4
5
6
npm uninstall hexo-renderer-marked
npm install hexo-renderer-pandoc

# 如有问题，使用下面命令
npm uninstall hexo-renderer-marked
npm install hexo-renderer-markdown-it-plus

然后在主题配置文件里开启 mathjax。和 KaTeX 一样，默认可以使用 $$ 将公式左右包裹主即可，这是最简单的方法。

1
$$m = c^2$$

但它还支持更强大的功能。如果想要公式编号，只需要把公式放在 equation 环境里；想要公式引用，添加 \label{} 标记即可。如下面对公式进行了编号，并使用了 eq1 标签。

1
2
3
$$\begin{equation}\label{eq1}
e=mc^2
\end{equation}$$

那么引用这个公式可以使用 \eqref{}。例如下面引用：

1
著名的质能方程 $\eqref{eq1}$ 由爱因斯坦提出 ...

更多的写法支持参考：

https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/MATH.md

默认

上面两种方法都需要卸载默认的 Markdown 生成器，如果当你写了一定数量的文章时，换用其他生成器可能会报错。我们也可以在不卸载默认的生成器的同时，安装插件 hexo-math：

1
npm install hexo-math

这个插件就有点猛了，同时支持 mathjax 和 katex，而且默认就是对所有页进行数学公式渲染。也就是说有了它，不用操心什么配置问题。不过使用方法也跟下面不太一样。

上面两种是 NexT 主题支持的渲染公式的方法，hexo-math 则是 Hexo 支持的渲染公式的方法，所以你会看到 hexo-math 无法通过 主题配置文件即可使用。
hexo-math 可以支持 $$ 包裹的写法，不过避免混淆，这里给出它自己的写法。

使用 KaTeX

1
2
3
4
5
6
7
8
9
写法：
{% katex '{options}' %}
content
{% endkatex %}

例如：
{% katex %}
c = \pm\sqrt{a^2 + b^2}
{% endkatex %}

使用 MathJax

1
2
3
4
5
6
7
8
9
写法：
{% mathjax '{options}' %}
content
{% endmathjax %}

例如：
{% mathjax %}
\frac{1}{x^2-1}
{% endmathjax %}

和上面两个不同的是，math-ajax 默认渲染所有页面，如果不想渲染，请使用下面方法手动禁用

1
2
3
4
5
6
7
---
title: test
date: 2021-06-27 16:42:58
tags:
katex: false
mathjax: false
---

hexo-math 也支持一些配置，不过针对的是站点配置文件，如对默认的显示格式不满意，可以参考 👉 这里。