Hexo的配置和使用

发表于 更新于 分类于 ，

Hexo是一个开源的静态博客生成器，用node.js开发，作者是台湾大学生tommy351。Hexo的安装使用必须依赖node.js和Git，以下内容简要说明其步骤。

1、安装node.js

1） 下载与安装

下载地址Node.js, 解压之后，在环境变量Path中添加上述node.js的路径(假设为D:\Dev\Node）。设置成功后，打开命令行，可以看看node.js的版本：

1
2
$ npm --version
3.10.10

2） npm的配置

配置npm的代理，缓存地址等。（以下配置为全局配置（--global）便于copy到U盘携带。）

1
2
3
4
5
6
# 设置缓存位置
$ npm config set cache D:\Dev\node\npm-cache --global
# 设置代理服务器
$ npm config set proxy="http://127.0.0.1:8122" --global
# 设置npm默认使用HTTP方式而不是HTTPS
$ npm config set registry http://registry.npmjs.org --global

或者直接打开<node>/etc/npmrc文件（没有就新建）进行编辑：

1
2
3
cache=D:\Dev\node\npm-cache
proxy=http://127.0.0.1:8122/
registry=http://registry.npmjs.org

配置完成，运行npm config list命令看看配置的情况。如果正确，node.js已经安装配置完成，可以安装Hexo。

2、Git的安装与配置

Git的安装与配置，网上有很多教程，这里不再详细说明。无论是msi安装还是绿色解压安装，均需要在Path环境变量中设置路径。如果以下命令返回版本号，则git安装完成：

1
2
$ git --version
git version 1.9.5.msysgit.1

说明： 1)使用 git 的版本对发布有重要影响，版本2.13.3.windows.1/1.95.msysgit.1可以正常工作，版本 2.7.2.windows.1无法正常工作。 2)在使用代理服务器时，可能需要导入CA认证文件。 

1
git config --global http.sslCAInfo /ssl/certs/your.cert.CA.crt

3、Hexo的安装和使用

1）安装 Hexo的安装分为3个过程，首先安装hexo-cli 

1
$ npm install -g hexo-cli
等待进度条跑到头，出现一堆提示信息，hexo-cli安装完成。

第二步，安装hexo 

1
$ npm install hexo --save
第三步，初始化网站 指定一个目录初始化网站 
1
hexo init xxx
第四步，完成安装 
1
$ npm install
2）显示版本信息 
1
$ hexo -v  (或 hexo version)
输出： 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
hexo-cli: 1.1.0
os: Windows_NT 10.0.17134 win32 x64
http_parser: 2.8.0
node: 8.11.3
v8: 6.2.414.54
uv: 1.19.1
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
nghttp2: 1.32.0
napi: 3
openssl: 1.0.2o
icu: 60.1
unicode: 10.0
cldr: 32.0
tz: 2017c

3）Hexo的基本使用

  1. 创建一个网站：hexo init blog；注意：不能使用当前目录作为网站目录。如果使用hexo init .，会出现ERROR Local hexo not found in D:\Dev\Project\blog的错误。
  2. 创建页面：hexo new newpage，newpage就是新页面的标题，支持中文；
  3. 开始用markdown写
  4. 在blog目录内安装Hexo的git插件： 
    1
    $ npm install hexo-deployer-git --save

4）Hexo的配置

Hexo的配置内容还是比较简单，核心是修改配置文件_config.yml，关于配置部分还是查阅相关的文档比较靠谱。

  1. 页面生成与发布

Hexo支持同时向多个gits提交，以下以Github为例。 1. 在Github上建一个新的库，例如：yourname.github.io，其URL地址为：https://github.com/yourname/youname.github.io.git 2. 修改blog中的_config.yml中的deploy字段： 

1
2
3
4
5
6
deploy: 
  type: git
  repo: 
    - https://xxxx@git.oschina.net/xxxx/xxxx.git
    - https://github.com/yourname/youname.github.io.git
  branch: master
3. 执行命令hexo d -g，接着在提示框中输入github的用户名和密码就ok了。 4. 访问https://github.com/yourname/youname.github.io.git试试。

4、Hexo+Next使用Latex

1）基本配置 打开配置文件themes/next/_config.yml，找到# MathJax Support，将enable改为true即可 

1
2
3
4
5
mathjax:
  enable: true
  per_page: true
  cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML

然后在需要使用Latex的页面头部添加： 
1
mathjax: true

2）mathjax的CDN可以使用如下链接，不过cloudflare的访问速度... 

1
#cdn: https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML
3）在录入公式时，Latex的源文件并不能正常渲染，其原因在于next自己有很多转义字符，因此必须对某些字符做转义后使用。先将目前遇到的转义字符记录如下，以后再继续补齐。

Latex字符 转义后字符
\ \\
_ \_

4）添加公式自动编号支持，next 6.3.0已经内置支持

使用时，在需要添加公式编号的位置\label{公式名称}，引用时$ref{公式名称}。注意，自动编号的公式需要使用equation关键字。 

1
2
3
4
5
6
7
8
$$
\begin{equation} \theta_j := \theta_j + 
\alpha \sum \limits_{i=1}^n(y^{(i)}-h_{\theta}(x^{(i)}))x_j^{(i)}
\label{mini-BGD} 
\end{equation}
$$

公式$(\ref{mini-BGD})$

效果： \[ \begin{equation} \theta_j := \theta_j + \alpha \sum \limits_{i=1}^n(y^{(i)}-h_{\theta}(x^{(i)}))x_j^{(i)} \label{mini-BGD} \end{equation}\]

公式\((\ref{mini-BGD})\)

以下内容，来自next官方文档：

对于多行公式，在 equation 环境中，你可以使用 aligned、cases、array 环境把公式分成多行，

1
2
3
4
5
6
7
8
9
$$
\begin{equation}
f(x)=
    \begin{cases}
        0& x=0\\
        1& x \neq 0
    \end{cases}
\end{equation}  \label{eq1}
$$

\[ \begin{equation} f(x)= \begin{cases} 0& x=0\\ 1& x \neq 0 \end{cases} \end{equation}\label{eq1} \]

要对齐多个公式，我们需要使用 align 环境。align 环境中的每个公式都有自己的编号：

1
2
3
4
5
6
7
$$
\begin{align}
a &= b + c \label{eq3} \\
x &= yz \label{eq4}\\
l &= m - n \label{eq5}
\end{align}
$$

\[ \left\{ \begin{align} a &= b + c \label{eq3} \\ x &= yz \label{eq4}\\ l &= m - n \label{eq5} \end{align} \right. \]

在 align 环境中，如果你不想给某个或某几个公式编号，那么在这些公式后面使用 \nonumber 命令即可。例如：

1
2
3
4
5
$$\begin{align}
-4 + 5x &= 2+y \nonumber  \\
 w+2 &= -1+w \\
 ab &= cb
\end{align}$$

有时，你可能会希望采用更加奇特的方式来标记和引用你的公式，你可以通过使用 \tag{} 命令来实现，例如：

1
$$  x+1 \over \sqrt{1-x^2} \tag{i}\label{eq_tag}$$

\[ x+1 \over \sqrt{1-x^2} \tag{i}\label{eq_tag}\] 公式\((\ref{eq_tag})\)

5、修改Next主题“分类”菜单下日期格式

原时期格式为MM-DD格式，希望将年份一起显示成为YYYY-MM-DD。

1）打开themes/next/layout/_macro/post-collapse.swig，将第27行日期格式由MM-DD改为YYYY-MM-DD: 

1
{{ date(post.date, 'YYYY-MM-DD') }}
2）上述修改完成后，日期可以显示为完整的年-月-日格式，但与post名称重叠。打开themes/next/source/css/_common/components/post/post-collapse.styl，第96行： 
1
2
.post-title {
  margin-left: 110px;  # 此处原来是60px，修改为110px
3）这种修改是一种全局修改，不仅在“分类”下，“存档”菜单下的日期格式也同样修改。

6、插件

可以在package.json中查看所有插件，除基本功能插件外，目前安装的插件如下： 

1
2
npm install hexo-generator-search --save    # 站内搜索
# npm install hexo-pdf --save                 # 支持显示pdf，未安装
## 7、添加版权 打开themes/next/_config.yml，搜索copyright，将post_copyright的enable改为true。

8、修改标签显示图标

打开themes/next/layout/_macro/post.swig，搜索rel="tag">#，将之改为<i class="fa fa-tag"></i>。

本文参考这篇文档，向作者表示感谢。