用 Hexo 搭建个人静态博客

从 2016 年开始，对搭建个人静态博客产生了兴趣。经过对比发现采用 Hexo 工具搭建博客的人还挺多。官网上介绍：

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

零零散散的，网上很多人都有介绍使用 Hexo 搭建博客的步骤技巧，每个人都根据自己的需要有特别的定制。本人也在此总结一下自己的搭建使用过程，一是做个记录，为以后回顾做个归档；二是为有同样需求的同学给一些参考。

接下来按照搭建和定制顺序开始介绍。（行文日，Hexo 版本为 3.7.1，主题 Next 版本为 6.4.2）

1. Hexo 主程序安装

Hexo 是基于 Node.js 和 Git，安装 Hexo 之前需要在机器上安装以上软件。官网给出了简单的安装方法和步骤。Git 安装比较简单，Node.js 推荐使用 nvm 包管理工具来安装（Windows 系统推荐单独的nvm-windows工具）。

安装好nvm 之后就可以在终端执行命令安装 Node.js：

nvm install stable

关于 nvm、npm、Node.js 的关系参考文末链接 [1].

另外需要注意的是 Mac 系统下 nvm 要使用官网推荐安装方法，不要用 Brew 安装。必备软件安装完毕之后，即可使用 npm 安装 Hexo：

npm install -g hexo-cli

CLI = Command Line Interface 命令行界面^[2]。

接下来使用下面命令来创建博客的工作目录 [blog_path]：

hexo init [blog_path]
cd [blog_path]
npm install

Hexo 的使用方法参考官网就行。

2. Hexo 主题 Next

Hexo 支持众多的主题风格，可以自由切换，不过由于都是个人开发的，不同主题的完善程度不一致。经过一番对比，发现风格、稳定性、扩展性最适合我的是 Next 主题中的 Gemini 风格。主题安装使用方法见 Next 官网。

自己网站主题风格的配置介绍见Hexo博客Next主题个性化配置。配置文件备份地址。

接下来的方法介绍在 Next 主题下都是兼容的。

3. 插入图片支持

Hexo 官方对博客中的图片给出了 标签插件 形式的支持。然而这种方法并不是 Markdown 的官方语法，一般的 md 编辑器也不支持。为了最大限度的保证 md 文件的纯粹性，采用第三方插件 hexo-asset-image 来支持 md 文件本身插入图片语法的支持与解析。

注意两点：

1. Hexo 目录下的 _config.yml 文件中设置 post_asset_folder: true，（每次创建新文件时会自动创建相同名字的文件夹，其中可以放置文件需要的图片文件等资料）；
2. 在 Hexo 工作目录下使用命令 npm install hexo-asset-image@0.0.2 --save 来强制安装 0.0.2 版本（最新0.0.3版本不能正确解析图片的相对路径）。

4. MathJax 公式渲染

由于 Hexo 默认的 md 渲染引擎等原因，想要正确呈现出 md 文件中的行间与行内公式，需要以下几个主要步骤^[3]：

4.1 卸载默认引擎，安装新的引擎:

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

4.2 微调对行间公式的解析语法；

到博客根目录下，找到node_modules\kramed\lib\rules\inline.js，把第11行的escape变量的值做相应的修改：

//  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  escape: /^\\([`*\[\]()#$+\-.!_>])/,

这一步是在原基础上取消了对\,{,}的转义(escape)。同时把第20行的em变量也要做相应的修改。

//  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

重新启动 hexo。

4.3 在主题中打开 mathjax 开关；

进入主题 Next 目录下，打开配置文件 _config.yml，把 mathjax 默认 false 值改为true：

# Math Equations Render Support
math:
  enable:  true
  # Default(true) will load mathjax/katex script on demand
  # That is it only render those page who has 'mathjax: true' in Front Matter.
  # If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.
  per_page:  true
  engine:  mathjax

4.4 在 md 文档 Front-matter 中打开 mathjax 开关。

如下所示，加入 mathjax: true 语句：

---
title: index.html
date: 2016-12-28 21:01:30
tags:
mathjax: true
---

5. 博客评论系统

考虑到各种第三方评论系统的寿命无常（以前介绍的多说博客评论系统已经挂掉）。采用基于 Github Issue 的评论插件成为一种较好以及有逼格的选择。最开始采用的 gitment，貌似作者已经不再支持，转战 gitalk (找到了项目开始的地方V2EX)。

关于 gitalk 的详细配置与使用可以参考这篇文献^[4]

6. 本地搜索支持

默认搜索功能太弱，卡的不行。安装插件 hexo-generator-search：

npm install hexo-generator-search --save

然后在 next 主题目录下的文件 _config.yml 中设置：

# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable:  true

7. 博客底部添加固定链接

可以给每篇博文底部自动添加本博文的固定链接，附带链接还可以写一些版权说明信息。安装插件 hexo-addlink：

npm install hexo-addlink --save

然后在 Hexo 目录下的 _config.yml 中添加如下信息：

addlink:
before_text:  <HR SIZE=5><small><strong>本文作者：Northan<br>本文链接：  # text before the post link
after_text:  <br>版权声明：作者拥有版权，请注明出处转载。  # text after the post link

最终效果参见本文末尾。

8. html 文件瘦身

到此为止，博客想要实现的功能基本配置完成。

默认生成的 html 文件中有很多不起作用的符号，比如空格注释等等。安装插件 Hexo-neat 可以对产生的 html 文件进行瘦身。

npm install hexo-neat --save

然后在 Hexo 目录下的 _config.yml 中添加如下信息：

neat_enable:  true

参考：

1: nvm、npm、nodejs的关系
2: hexo和hexo-cli的关系？
3: 在Hexo中渲染MathJax数学公式
4: Hexo NexT主题中集成gitalk评论系统