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

1
nvm install stable

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

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

1
npm install -g hexo-cli

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

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

1
2
3
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 卸载默认引擎,安装新的引擎:

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

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

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

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

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

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

重新启动 hexo。

4.3 在主题中打开 mathjax 开关;

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

1
2
3
4
5
6
7
8
# 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 语句:

1
2
3
4
5
6
---
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

1
npm install hexo-generator-search --save

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

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

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

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

1
npm install hexo-addlink --save

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

1
2
3
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 文件进行瘦身。

1
npm install hexo-neat --save

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

1
neat_enable:  true

参考:

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


本文作者:Northan
本文链接: https://www.anmou.me/20181016-Build_up_Blog_by_Hexo/
版权声明:作者拥有版权,转载请注明出处。