从零搭建 Hexo + Github 博客

前言

之前有一篇用 $\text{Wordpress}$ 搭建博客的文章，这里给出一种更为方便的搭建方法，只要用 $\text{Github}$。

笔者是在 $\text{Windows}$ 的环境下搭建的，其他系统可能不适用。

本文同步发表于笔者的博客：从零搭建 Hexo + Github 博客

---

感谢 @Happynewyear 的帮忙捉虫，以及 @Sinner 提供的部分程序地址。

---

优缺点分析

优点

安装简单方便，不需要自己找域名、设置 $\text{DNS}$，自带 $\text{Markdown}$，在简单的设置之后即可支持 $\text{LATEX}$。同时官网有诸多主题可供挑选。

缺点

搭建在 $\text{Github}$ 的服务器上，访问速度较慢，无法自定义域名，想要对博客进行自定义更改需要使用 $\text{JavaScript}$，博客上传比较麻烦。

前置条件

程序

在开始之前，推荐大家提前下载一下之后要用到的程序，如下：

• $\text{Node.js}$
• $\text{Git}$
• $\text{Sublime}$

账号

我们只需要一个 $\text{Github}$ 的账号即可。

---

开始搭建

1. 配置 $\text{Github}$ 的 $\text{SHH}$

首先进入 $\text{Git}$ 程序的源文件夹，打开 git-bash.exe。

输入这样一行命令：

ssh-keygen -t rsa -C "Github 注册的邮箱地址"

按下回车，按四次，直到出现一个奇怪的图时，则完成。图可能会不同，属于正常现象。

此时就不用管了，我们进入 $\text{Github}$ ，登录自己的账号，点击右上角头像 $\to$ $\text{Settings}$，

然后点击左侧的 $\text{SSH and GPG keys}$

点击右上方的 $\text{New SSH key}$

此时会让你填两个东西，一个是 $\text{Title}$，一个是 $\text{Key}$，前者我们随便填一个，后者的话，我们进入 C:\Users\你的用户名\.ssh，用记事本打开一个叫做 id_rsa.pub 的文件，把里面的东西复制到 $\text{Key}$ 里面去即可。

2. 本地运行 $\text{Hexo}$

首先进入 $\text{Hexo}$ 的官网，此时我们会在正中间看见一行代码，这个就是 $\text{Hexo}$ 的安装代码了。

在安装之前，我们要准备一个东西：存储本地博客的文件夹，这个大家按自己的习惯和情况创建一个文件夹就行，比如我创建的文件夹是 E:/blog，这个 blog 文件夹就是存储所有博客要用的文件夹了。

为避免出现不必要的 $\text{Bug}$，推荐使用英文的文件夹名字。

在安装时，各位应该按照自己的路径来设置，千万不要完全照搬这里给出的做法。

我们打开 cmd（win+R 键打开运行，输入 cmd），先输入盘，比如我这里是 E:，然后输入 cd blog，然后打入给出的那行命令：npm install hexo-cli -g，等到进度条满，你能够再次输入命令时就完成了。

先别急着关 cmd，之后我们还会用到。

此时我们就要开始创建本地博客了。在 $\text{Hexo}$ 官网首页的下方，有一行代码，hexo init blog，这行代码就是我们创建博客的关键了。此时，如果你没有关掉 cmd，那么它应该是保持着 cd 到你创建的文件夹的状态，如果关掉的话，要重新 E: cd blog 一下。输入官网上的这行代码：hexo init 你的博客名，这个博客名随便起，因为它不会影响你网站上的任何因素，只是会影响之后创建的文件夹的名字。

输入代码，开始创建博客，又需要一些时间。当然，有一些写着 WARN 的指令行出现，也不用紧张，是正常现象。

等待安装完成，需要一些时间。

安装好之后，我们就可以看见之前的 blog 文件夹中，出现了一个名字为你刚刚输入的名字文件夹。

我们 cd 到这个文件夹下，对我来说就是 cd vocaloid，然后就可以安装依赖了，输入 npm install，开始安装。

这个很快就可以完成。

接着我们就可以本地运行了，我们接着在 cmd 中输入 hexo s -p 端口，这个端口不知道有什么限制，推荐输入 5555 或者 4000，很快就可以完成。

此时我们就可以进入 localhost:端口，就可以看到你的 $\text{Hexo}$ 博客啦。

此时如果你在 cmd 中按下 Ctrl+C，再确认终止批处理操作，就可以停止使用这个端口了。

3. 发布至 $\text{Github}$

在上传之前，我们需要做一些配置。首先用 $\text{Sublime}$ 打开文件夹：

打开 _config.yml，准备修改。

进入 $\text{Github}$，先新建一个项目，点击右上角的 $+$ 号，选择 New repository，描述自己填，名字使用 你的 Github 用户名.github.io。

（因为我这里是一个号重复建，所以我就不用我的用户名演示了。）

（一定要用 你的 Github 用户名.github.io 作为项目名字，二次强调）

为了防止接下来的教程出现一些问题，各位最好把“是否有 README” 这一个选项选上，不然就会和我这里给出的情况不同。

此时就进入了项目的页面，我们点击右侧绿色的 Clone or download 按钮，将它给出的链接复制下来。

回到 $\text{Sublime}$，拉到最下面，在 type 后面输入 git（所有冒号后面都有空格，不能不加，切记）。

在 type 这一行下面，加入 repo: ，然后后面填上刚刚复制的地址，往上拉，找到 url:，在 url: 后面输入：http://你的 Github 用户名.github.io

上方有一个 author，这个可以改一下，改成你自己即可。

此时基础配置就差不多完成了，我们回到 cmd，先退出刚才的本地端口，然后安装一个 $\text{Git}$ 插件。

输入 npm install hexo-deployer-git --save ，即可等待其安装了。

此时回到 $\text{Sublime}$，在刚刚的 repo 下面再加一行：branch: master，保存。

完成后，我们就可以尝试运行这个博客了。我们在 cmd 中分别输入两行代码，一行是 hexo g，代表本地文件生成，另一行是 hexo d，代表上传。

等待一些时间，即可完成。

此时会让你配置你的 $\text{Github}$ 账号，需要分别输入两行代码（因为我之前配置过了，所以不用再次配置），如下（这两行代码在 cmd 中都有给出）：

git config --global user.email "你的邮箱"

git config --global user.name "你的用户名"

引号不要省略掉。配置好后，再次输入 hexo d，此时会弹出一个窗口，让你登录你的 $\text{Github}$，大概长这样：

登录就行了。等到上传完成，即可直接访问你的博客了，地址就是你刚才在 $\text{Sublime}$ 中，url: 后面的那个地址。

此时就完成了博客的搭建，但是我们的博客是不支持 $\text{LATEX}$ 的，所以我们还需要配置。

4. $404$ 的解决方案

我们可能会遇到这样的情况：

这种情况必然是非常令人恼火的，但解决方法非常简单，我们进入刚才创建的项目的页面，点击 $Settings$，往下拉，找到一个 Custom domain，输入我们之前在 url: 后面输入的那个域名，即 <用户名>.github.io，然后点击 $\text{Save}$，应该就可以访问了。

5. 主题

不同的主题可以在 $\text{Hexo}$ 的 主题 中安装，只需要在 cmd 中 cd 到你的博客文件夹（对我来说是 E:\blog\vocaloid），然后在主题的 $\text{Github}$ 中找到安装的代码，如果没有大家可以自行修改别的代码，将地址和文件夹改一下就行了。

（UPD: 改了可能不能正常使用，建议不要改）

之后我们可以打开 _config.yml，将下面的 theme: 后面的名字改成安装的文件夹的名字，比如 theme: next。

6. 博客的标题

打开 _config.yml，可以看到上方有一个 title:，把后面的修改掉就行了。

---

$\text{LATEX}$ 设置

我们此时搭建的博客只能使用 $\text{Markdown}$，同时因为一些语句的冲突无法使用 $\text{LATEX}$ ，所以我们需要解决这些冲突，同时安装一个能够使用及渲染 $\text{LATEX}$ 的语言包。

下面的操作都默认 cd 到了博客文件夹。

1. 修改引擎

首先我们要将原本的渲染引擎替换成能够支持 $\text{LATEX}$ 的渲染引擎。原版的引擎是 $\text{Marked}$，我们将它卸载 ，然后安装一个 $\text{Kramed}$ 引擎。

先 cd 到博客文件夹后，输入以下代码：

npm uninstall hexo-renderer-marked --save

npm install hexo-renderer-kramed --save

2. 更改配置

用 $\text{Sublime}$ 打开 /node_modules/hexo-renderer-kramed/lib/renderer.js 。

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

3. 修改数学包

我们要将原来的数学包修改成 $\text{Kramed}$ 适用的数学包，分别输入

npm uninstall hexo-math --save

npm install hexo-renderer-mathjax --save

等待其卸载、安装即可。

4. 更新配置文件

打开 /node_modules/hexo-renderer-mathjax/mathjax.html，将最下面的代码注释掉（即在开始的 < 后面加上 !--，然后在上面加上一行：<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script> 即可。

5. 更改规则

为了解决冲突，我们还需要更改转义规则。首先打开 \node_modules\kramed\lib\rules\inline.js，将 escape 和 em 这两行注释掉，分别修改为：

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

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

至此，我们完成了 $\text{LATEX}$ 的前置准备，最后只需要启用即可。

6. 启用

进入进入 博客\_config.yml，加上一行 mathjax: true 即可。如果不行的话，就在每篇博客最前面的信息处加上一行 mathjax: true 即可。

---

如何上传博客

我们进入 博客名\source\_posts，这里就是放博客的地方。如果要写博客，最好使用一些 $\text{Markdown}$ + $\text{LATEX}$ 编辑器，比如 $\text{Typora}$，在本地写好后，在放博客的地方新建一个文档，文档的名字就决定了你的标识符，也就是这个东西：

文档的后缀名应该是 .md，我们可以创建一个 .txt 文件，然后改后缀就行。用 $\text{Sublime}$ 或者别的编辑器打开后，我们在最上面加上这样一段：

---
title: 你的文章的标题
date: 发布时间
tag: 标签
---

然后再下面直接把博客复制上去就行。

此时我们就写好了一篇博客，但是我们还需要上传，我们打开 cmd，cd 到你的博客的位置，然后分别输入三行代码：

hexo clean

hexo g

hexo d

等待一段时间后再回到博客，就可以成功了。

效果见：Here

文章过长？

我们会发现，上传博客后往往会在首页将整篇文章的内容都显示出来，这显然是非常占用空间的，此时我们可以在博客的文档中加入一行代码：<!--more-->，然后重新上传，此时在这行代码后面的内容都不会显示出来了，而是改为了一个“$\text{Read More}$”按键，非常方便。

---

博客背景

进入 \themes\landscape\source\css\images，有一张叫做 banner.jpg/png 的图（不同主题的位置及名字都可能不同），我们将它替换，文件名和后缀名最好都一样，然后按照上面传博客的方法，hexo clean，hexo g，hexo d，等一会儿就上传完成了。

---

注意：基本上所有修改完成后都要打一遍 hexo clean，hexo g，hexo d，忘记打就会导致修改在网站上无法生效。

---

小结

这里只是给出了一些最基础的内容，各位想要更深的研究可以在网上找一些教程，也可以套用现有的主题，难度应该不会很大（当然，如果涉及 $\text{JS}$ 那也不简单了【笑】）。

参考资料：1 2 3