从零搭建 Hexo + Github 博客

# 前言 之前有一篇用 $\text{Wordpress}$ 搭建博客的文章，这里给出一种更为方便的搭建方法，只要用 $\text{Github}$。 笔者是在 $\text{Windows}$ 的环境下搭建的，其他系统可能不适用。 本文同步发表于笔者的博客：[从零搭建 Hexo + Github 博客](https://venusnero.github.io/2019/01/23/build_hexo_github_blog/) ------ 感谢 @Happynewyear 的帮忙捉虫，以及 @Sinner 提供的部分程序地址。 ------ # 优缺点分析 ## 优点 安装简单方便，不需要自己找域名、设置 $\text{DNS}$，自带 $\text{Markdown}$，在简单的设置之后即可支持 $\LaTeX$。同时官网有诸多主题可供挑选。 ## 缺点 搭建在 $\text{Github}$ 的服务器上，访问速度较慢，无法自定义域名，想要对博客进行自定义更改需要使用 $\text{JavaScript}$，博客上传比较麻烦。 # 前置条件 ## 程序 在开始之前，推荐大家提前下载一下之后要用到的程序，如下： - [$\text{Node.js}$](https://nodejs.org/en/) - [$\text{Git}$](https://git-scm.com/) - [$\text{Sublime}$](http://www.sublimetext.com/) ## 账号 我们只需要一个 [$\text{Github}$](http://github.com) 的账号即可。 ------ # 开始搭建 ## 1. 配置 $\text{Github}$ 的 $\text{SHH}$ 首先进入 $\text{Git}$ **程序**的源文件夹，打开 `git-bash.exe`。  输入这样一行命令： ``` ssh-keygen -t rsa -C "Github 注册的邮箱地址" ``` 按下回车，按四次，直到出现一个奇怪的图时，则完成。图可能会不同，属于正常现象。  此时就不用管了，我们进入 $\text{Github}$ ，登录自己的账号，点击右上角头像 $\rightarrow$ $\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}$ 的[官网](http://hexo.io)，此时我们会在正中间看见一行代码，这个就是 $\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:` 后面的那个地址。 此时就完成了博客的搭建，但是我们的博客是不支持 $\LaTeX$ 的，所以我们还需要配置。 ## 4. $404$ 的解决方案 我们可能会遇到这样的情况：  这种情况必然是非常令人恼火的，但解决方法非常简单，我们进入刚才创建的项目的页面，点击 $Settings$，往下拉，找到一个 `Custom domain`，输入我们之前在 `url: ` 后面输入的那个域名，即 `<用户名>.github.io`，然后点击 $\text{Save}$，应该就可以访问了。   ## 5. 主题 不同的主题可以在 $\text{Hexo}$ 的 [主题](https://hexo.io/themes/) 中安装，只需要在 `cmd` 中 `cd` 到你的博客文件夹（对我来说是 `E:\blog\vocaloid`），然后在主题的 $\text{Github}$ 中找到安装的代码，如果没有大家可以自行修改别的代码，将地址和文件夹改一下就行了。 （UPD: 改了可能不能正常使用，建议不要改）   之后我们可以打开 `_config.yml`，将下面的 `theme: ` 后面的名字改成安装的文件夹的名字，比如 `theme: next`。 ## 6. 博客的标题 打开 `_config.yml`，可以看到上方有一个 `title: `，把后面的修改掉就行了。 ------ # $\LaTeX$ 设置 我们此时搭建的博客只能使用 $\text{Markdown}$，同时因为一些语句的冲突无法使用 $\LaTeX$ ，所以我们需要解决这些冲突，同时安装一个能够使用及渲染 $\LaTeX$ 的语言包。 **下面的操作都默认 `cd` 到了博客文件夹。** ## 1. 修改引擎 首先我们要将原本的渲染引擎替换成能够支持 $\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])+?)\*(?!\*)/, ```  至此，我们完成了 $\LaTeX$ 的前置准备，最后只需要启用即可。 ## 6. 启用 进入进入 `博客\_config.yml`，加上一行 `mathjax: true` 即可。如果不行的话，就在每篇博客最前面的信息处加上一行 `mathjax: true` 即可。 ------ # 如何上传博客 我们进入 `博客名\source\_posts`，这里就是放博客的地方。如果要写博客，最好使用一些 $\text{Markdown}$ + $\LaTeX$ 编辑器，比如 $\text{Typora}$，在本地写好后，在放博客的地方新建一个文档，文档的名字就决定了你的标识符，也就是这个东西：  文档的后缀名应该是 `.md`，我们可以创建一个 `.txt` 文件，然后改后缀就行。用 $\text{Sublime}$ 或者别的编辑器打开后，我们在最上面加上这样一段： ``` --- title: 你的文章的标题 date: 发布时间 tag: 标签 --- ``` 然后再下面直接把博客复制上去就行。 此时我们就写好了一篇博客，但是我们还需要上传，我们打开 `cmd`，`cd` 到你的博客的位置，然后分别输入三行代码： `hexo clean` `hexo g` `hexo d` 等待一段时间后再回到博客，就可以成功了。 效果见：[Here](https://venusnero.github.io/2019/01/23/solution_p3644/) ### 文章过长？ 我们会发现，上传博客后往往会在首页将整篇文章的内容都显示出来，这显然是非常占用空间的，此时我们可以在博客的文档中加入一行代码：`<!--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](https://www.bilibili.com/video/av24897960/) [2](https://www.jianshu.com/p/68e6f82d88b7) [3](https://blog.csdn.net/dajian790626/article/details/78595684?locationNum=10&fps=1)