基于Hexo搭建静态博客

发表于 更新于 分类于

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使用。

生成博客框架

环境准备

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

  • Node.js
  • Git

安装Hexo

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

1
npm install -g hexo-cli

生成博客框架

安装 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文件。

站点配置

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

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

利用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字段之后链接地址不会改变。换句话说，就是本篇文章有了自己的专属链接。

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

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

配置主题

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

推荐主题

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

写文章

生成文章

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

1
hexo new <文章标题>

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

Front-matter

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

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++
	- 传参形式
---

hexo-theme-matery主题定义变量

配置选项 默认值 描述
title Markdown 的文件标题 文章标题，强烈建议填写此选项
date 文件创建时的日期时间 发布时间，强烈建议填写此选项
author 根 _config.yml 中的 author 文章作者
img featureImages 中的某个值 文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg
top true 推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章
hide false 隐藏文章，如果hide值为true，则文章不会在首页显示
cover false v1.0.2版本新增，表示该文章是否需要加入到首页轮播封面中
coverImg 无 v1.0.2版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
password 无 文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
toc true 是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
mathjax false 是否开启数学公式支持 ，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行
summary 无 文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories 无 文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
tags 无 文章标签，一篇文章可以多个标签
keywords 文章标题 文章关键字，SEO 时需要
reprintPolicy cc_by 文章转载规则， 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

注意:

  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
---

引用站内文章

语法如下：

1
{% post_link slug [title] %}

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

按钮

语法如下：

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

如：

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

插入图片

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

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

支持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中，将该目录部署中的所有文件部署到服务器即可。