Hexo是一个快速、简洁且高效的博客框架，使用Hexo可以快速地生成静态博客框架。在框架生成完成后，可以使用任意文本编辑器语法书写博客。我们可以使用Markdown语法书写博客，Hexo在生成博客时会自动将Markdown解析成Html静态页面。

Hexo官网：https://hexo.io/zh-cn/
Hexo中文文档：https://hexo.io/zh-cn/docs/

一、玩法说明

使用Hexo写博客的大致流程如下：

1. 生成博客框架
2. 配置博客
3. 选择自己喜欢的主题
4. 配置博客和主题
5. 写文章
6. 生成博客
7. 发布博客到服务器

其中，第1~4步为前置操作，只需要执行一次。

Hexo只负责生成静态的HTML文件，不提供服务器。如需对外发布博客，我们还需将HTML文件部署到服务器上，可以选择如下的方式：

• Github Pages、GitLab Pages，免费，访问速度较慢。
• Gitee Pages，收费。
• 对象存储服务，如阿里云OSS、腾讯云COS、七牛云OSS等。当访问量大时，需搭配CDN使用，避免因数据回源产生巨额流量费用。
• 自己购买服务器使用Nginx搭建Web服务器。当访问量大时，服务器出口带宽要求较高，此时仍然需要搭配对象存储服务和CDN使用。

二、生成博客框架

2.1 环境准备

在搭建博客框架之前，确保电脑上已经安装如下软件（建议安装最新版本的Node.js，这样可以确保兼容最新版本的Hexo）：

• Node.js
• Git

2.2 安装Hexo

在所有必备的应用程序安装完成后，即可使用 npm 全局安装 Hexo工具：

1

npm install -g hexo-cli

2.3 生成博客框架

安装 Hexo 完成后，在指定文件夹下执行如下命令，Hexo 将会在目录下新建博客所需的文件：

1
2
3

hexo init <folder>
cd <folder>
npm install

如果遇到网络错误等问题，请排除是否因为访问国外域名失败导致，可以尝试将npm源切换到国内，参考： NPM和Yarn设置国内源

新建完成后，指定文件夹的目录大致如下：

1
2
3
4
5
6
7
8

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

• _config.yml

  网站的配置文件，可以在此配置大部分的参数，需要区别于主题的_config.yml配置文件。

• package.json

  应用程序的信息。

• scaffolds

  模版文件夹。当新建文章时，Hexo会根据scaffold来创建文件。
  Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果修改 scaffold/post.md 中的 Front-matter （即两个---中间的内容）内容，那么每次新建一篇文章时都会包含这个修改。

• source

  资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件/文件夹和隐藏的文件将会被忽略。在生成博客时，Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被直接拷贝过去。

• themes

  主题文件夹。将下载的主题文件放置到该目录，Hexo 会根据主题来生成静态页面。

三、配置博客

Hexo的配置分别站点配置和主题配置，站点配置文件为博客根目录下的_config.yml文件，主题配置文件为位于themes\<主题目录>中的_config.yml文件。

3.1 站点配置

本节介绍博客的站点配置，部分配置的含义如下：

• title 网站标题
• subtitle 网站副标题
• description 网站描述，主要用于SEO
• keywords 网站的关键词。支持多个关键词。
• author 作者名字
• language 网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。
• timezone 网站时区。对于中国大陆地区可以使用 Asia/Shanghai。
• theme 当前主题名称，名称为themes目录中的子目录名称。值为false时禁用主题。
• per_page 每页显示的文章量 (0 = 关闭分页功能)。
• pagination_dir 指定博客生成后，每页的index.html文件存放目录。

3.2 利用Hexo-abbrlink插件生成唯一文章链接

Hexo在生成博客文章链接时，默认是按照年/月/日/标题格式来生成的，可以在站点配置文件中指定new_post_name的值，默认是:year/:month/:day/:title这样的格式。如果你的标题是中文的话，你的URL链接还会包含中文。而且当我们修改原文章的日期或标题后，之前生成的链接将会失效。

为了给每一篇文章指定一个唯一的不含中文的链接，可以利用hexo-abbrlink插件，来解决这个问题。

先安装下hexo-abbrlink：

1

npm install hexo-abbrlink --save

修改站点配置文件(_config.yml)：

1
2
3
4

permalink: post/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

生成完后原文章.md文件的Front-matter 内会增加abbrlink字段，值为生成的ID。这个字段确保了在我们修改了Front-matter内的title或date字段之后链接地址不会改变。换句话说，就是本篇文章有了自己的专属链接。

当然，也可以选择不同的算法和进制：

• crc16 & hex

  https://post.zz173.com/posts/66c8.html

• crc16 & dec

  https://post.zz173.com/posts/65535.html

• crc32 & hex

  https://post.zz173.com/posts/8ddf18fb.html

• crc32 & dec

  https://post.zz173.com/posts/1690090958.html

注意，配置完成之后，之前的文章的链接有可能会变成了undefined，需要执行hexo clean并重新生成部署。

四、配置主题

每个主题的配置内容都不一样，具体参考使用主题的帮助文档。我使用的是hexo-theme-matery主题。

4.1 推荐主题

• hexo-theme-aircloud
• hexo-theme-new-yilia
• hexo-theme-vexo
• hexo-theme-next
• hexo-theme-butterfly
• hexo-theme-volantis
• hexo-theme-icarus

可以在Github中搜索Hexo Theme发现更多主题。

五、写文章

5.1 生成文章

使用如下命令生成新的文章:

1

hexo new <文章标题>

执行上述命令后，会在source_posts目录下生成对应的.md文件，文件内容如下：

5.2 Front-matter

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量。Hexo预定义了一些变量，同时每个主题也会定义一些变量。

5.2.1 Hexo预定义变量

• title 标题，默认为文章的文件名
• date 建立日期，默认为文件建立日期
• updated 更新日期，默认文件更新日期
• comments 是否开启文章的评论功能，true/false.
• tags 标签（不适用于分页），支持多个。
• categories 分类（不适用于分页），支持多个。
• permalink 覆盖文章的永久链接，永久链接应该以/或.html结尾。
• keywords: 文章关键字，用于SEO。

如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

---
title: 从汇编的角度分析函数调用过程
categories:
  - C++
  - 汇编
abbrlink: 4168021185
date: 2022-01-21 15:53:01
updated: 2023-01-21 15:53:01
keywords:
  - 函数
  - C++
  - 汇编
tags:
  - C++
  - 传参形式
---

5.2.2 hexo-theme-matery主题定义变量

注意:

1. 如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章的特色图各有特色。
2. 如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。
3. 您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则

以下为文章的 Front-matter 示例。

最简示例

1
2
3
4

---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
---

最全示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 赵奇
img: /source/images/xxx.jpg
top: true
hide: false
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories: Markdown
tags:
  - Typora
  - Markdown
---

5.3 引用站内文章

语法如下：

1

{% post_link slug [title] %}

其中，slug 表示 _post 目录下的 Markdown 文件名。可以通过 title 指定链接标题。

5.4 按钮

语法如下：

1

{% button /path/to/url/, text, icon [class], [alt] %}

如：

1

{% button https://jiangxueqiao.com, 江雪桥的博客, home fa-fw fa-lg, 江雪桥 %}

5.5 插入图片

Markdown 并不会保存插入的图片资源本身，只是记录了获取资源的链接。因此我们需要选择一款合适的图床来支持博客写作，目前各大云服务商都提供了对象存储服务，如七牛云 KODO、又拍云 USS、腾讯云 COS、阿里云 OSS 等。

可以使用PicGo工具上传图片到图床上。

5.6 支持emoji表情

Hexo默认的 Markdown 渲染器是 hexo-renderer-marked，这个渲染器不支持 emoji 表情。可以利用 hexo-filter-github-emojis插件实现支持 emoji 表情。

安装插件：

1

npm install hexo-filter-github-emojis --save

修改站点配置文件（_config.yml）添加如下配置：

1
2
3
4
5
6

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

在emoji-cheat-sheet中找到想要的表情，粘贴到文章中即可。

五、发布

使用如下命令生成静态HTML文件：

1

hexo g

生成的HTML文件位于博客根目录的public中，将该目录部署中的所有文件部署到服务器即可。

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章