Hexo 搭建个人博客

本文介绍 Hexo 搭建个人博客，选择 Next 主题，最后托管到 GitHub 上。可以直接用 Markdown 写文章，然后生成静态网页上传，非常方便和实用。另外还可以使用 Mathjax 渲染，使文章支持 LaTeX 格式的数学公式。

Hexo是一款基于 Node.js 的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在 GitHub 上。如果想要更加全面的了解 Hexo，可以到其官网 Hexo 了解更多的细节。

部署博客之前需要用到的工具是 Git，可以参考 Git 入门。

个人博客展示

Hexo-Next Pisces 主题

下面就开始搭建！

GitHub创建个人仓库

登录到 GitHub，如果没有 GitHub 帐号，使用你的邮箱注册 GitHub 帐号，点击 GitHub 中的 New repository 创建新仓库，仓库名应该为：usename.github.io 这个用户名 (usename) 使用你的 GitHub 帐号名称代替，这是固定写法。

安装 Node.js

假设你已经安装了 Git，现在安装 Node.js

Node.js 下载地址，安装 Node.js 会包含环境变量及 npm 的安装，安装后，检测 Node.js 是否安装成功，在命令行中输入 node -v，检测 npm 是否安装成功，在命令行中输入 npm -v。

如果都安装好了，说明安装 Hexo 的环境已经全部搭建完成。

安装 Hexo

Hexo 是搭建个人博客的框架，需要考虑把博客建立在哪个文件夹，比如 Github 文件夹，进入这个文件夹中，右键打开 Git Bash

npm 命令安装 Hexo

1	$ npm install -g hexo-cli # -g 全局安装

初始化博客示例

# 安装完成后，初始化博客
$ hexo init Blog

# 切换到 Blog 中
$ cd Blog

# 安装依赖
$ npm install

注意：以下 Hexo 命令 都是 Blog 目录中。

为了测试是否搭建成功，分别按顺序输入以下三条命令：

$ hexo new test

$ hexo g

$ hexo s

这些命令在后面作介绍，完成后，打开浏览器输入地址

1	http://localhost:4000/

推送到 GitHub

上面只是在本地预览，接下来要做的就是就是推送网站，也就是发布网站，让我们的网站可以被更多的人访问。在设置之前，需要解释一个概念，在 blog 根目录里的 _config.yml 文件称为站点配置文件。

进入根目录 themes 下面 next 文件夹，里面也有个 _config.yml 文件，这个称为主题配置文件。

下一步将我们的 Hexo 与 GitHub 关联起来，打开站点的配置文件 _config.yml，页面最后

1 2	deploy: type: ''

修改为

deploy:
type: git
repo: https://github.com/usename/usename.github.io.git
# 上面 GitHub 上创建仓库的完整路径，
branch: master

保存站点配置文件。

最后安装 Git 部署插件，输入命令：

1	$ npm install hexo-deployer-git --save

分别输入三条命令：

1
2
3

$ hexo clean 
$ hexo g 
$ hexo d

命令 hexo d 就是部署网站命令，d 是 deploy 的缩写。完成后，打开浏览器，在地址栏输入你的个人网站 http://usename.github.io ，你就会发现你的个人博客已经上线了，可以在网络上被访问了。

如果想购买个人域名，可以去阿里云或腾讯云购买，然后绑定个人域名。

安装 Next 主题

首先打开 Git Bash 进入根目录 Blog，执行命令

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

安装完成后，打开在 blog 根目录里站点配置文件 _config.yml。找到 theme 字段，并将其值更改为 next, 一定要保存。

Next 还有主题可以设置

Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调
Mist - Muse 的紧凑版本，整洁有序的单栏外观
Pisces - 双栏 Scheme，小家碧玉似的清新
Gemini - 双栏 Scheme，分块有序而整洁的外观

打开根目录 themes 下 next 文件夹里面的主题配置文件 _config.yml，修改后保存

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

支持数学公式（一）

使用 hexo-renderer-kramed 插件渲染数学公式，由于此插件停止维护，新版本 NexT 已经不支持。

第一步：使用 Kramed 代替 Marked

hexo 默认的渲染引擎是 marked，但是 marked 不支持 Mathjax。 kramed 是在 marked 的基础上进行修改。下面安装 kramed，按顺序输入

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

然后，更改/node_modules/hexo-renderer-kramed/lib/renderer.js，更改

// Change inline math rule
function formatText(text) {
    // Fit kramed's rule: $$ + \1 + $$
    return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
}

为

// Change inline math rule
function formatText(text) {
    return text;
}

第二步: 停止使用 hexo-math

首先，如果你已经安装 hexo-math, 请卸载它

1	$ npm uninstall hexo-math --save

然后安装 hexo-renderer-mathjax 包

1	$ npm install hexo-renderer-mathjax --save

第四步: 更改默认转义规则

因为 hexo 默认的转义规则会将一些字符进行转义，比如_转为 <em>, 所以我们需要对默认的规则进行修改.
首先，打开 Blog/node_modules/kramed/lib/rules、inline.js,

然后，把:

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

改为

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

把

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

改为

1	em: /^\((?:\\\|[\s\S])+?)\(?!\*)/,

第五步: 开启 mathjax 支持数学公式

在主题 _config.yml 中开启 Mathjax，找到 mathjax 字段添加如下代码：

1 2	mathjax: enable: true

支持数学公式（二）

新版 NexT 推荐使用 hexo-filter-mathjax 插件，方便使用 LaTeX 公式。

安装 hexo-filter-mathjax 插件

先检查是否安装了 hexo-math

1	npm list hexo-math

如果出现 empty 则表示没有安装，否则我们需要先卸载

1	npm uninstall hexo-math --save

安装 hexo-filter-mathjax

1	npm install hexo-filter-mathjax --save

打开根目录下的 _config.yml，不是 NexT 主题的，添加如下代码

# Mathjax
mathjax:
  tags: none # or 'ams' or 'all'
  single_dollars: true # enable single dollar signs as in-line math delimiters
  cjk_width: 0.9 # relative CJK char width
  normal_width: 0.6 # relative normal (monospace) width
  append_css: true # add CSS to pages rendered by MathJax
  every_page: false # if true, every page will be rendered by MathJax regardless the `mathjax` setting in Front-matter
  packages: # extra packages to load
  extension_options: {}
    # you can put your extension options here
    # see http://docs.mathjax.org/en/latest/options/input/tex.html#tex-extension-options for more detail

安装 hexo-renderer-pandoc 插件

卸载 hexo-renderer-marked，不再使用原生的渲染器

1	npm uninstall hexo-renderer-marked

安装 Pandoc 软件

Pandoc Installing

使用 npm 安装 hexo-renderer-pandoc

1	npm install hexo-renderer-pandoc

在根目录下的 _config.yml 指定 pandoc 的路径能够找到 pandoc

# pandoc
pandoc:
  # pandoc path
  pandoc_path: "C:/Users/Name/AppData/Local/Pandoc/pandoc.exe"
  filters:
  extra:
  template:
  meta:
  mathEngine: # default mathjax

选择是否开启 Mathjax

写博客中可以选择是否开启 Mathjax，选择 true 或 false

---
title: Testing Mathjax with Hexo
category: 
date: 2020/05/11
mathjax: true
---

常用的几个命令

$ hexo clean 
$ hexo g 
$ hexo s
$ hexo d

参考链接

知乎 GitHub+Hexo 搭建个人网站详细教程
B 站 Hexo 博客，Next 主题优化