Hexo+GitHub搭建个人博客

本篇博客内容：

记录使用hexo+github搭建我的个人博客的过程，希望能对阅读的你有帮助。

为什么要使用hexo+github搭建个人博客：

首先，本人不是很喜欢CSDN，简书一类的博客网站，梦想着能搭建自己的博客网站。

其次，GitHub pages存放的都是静态文件，博客所包含的所有静态文件包括博客内容，文章分类，标签等等都存放在这里，手动更新是一件很麻烦的事情，所以hexo所作的事情就是将这些markdown文件放在本地的仓库，每次更新文章我们只需要执行简单的几个命令来生成相关的博客页面，再将这些变化更新提交至GitHub即可。

注：本文的所有命令均使用gitbash完成。

1 预备环境

在开始下面的步骤之前，你需要保障：

已经注册了github账号；
安装了node.js，npm以及git相关的客户端、

下图是我在搭建过程中使用的环境：

2 搭建GitHub博客

2.1 创建同用户名仓库

注意：一定要创建一个名为username.github.io的仓库(username为你的GitHub用户名，如：我的用户名为：XiaoMing0929，那么我需要创建的仓库名为：XiaoMing0929.github.io)

创建完仓库后进入仓库可以通过create new file手动添加一个index.html页面：

这个时候我们访问：https://XiaoMing0929.github.io(这是我的访问地址，访问自己的博客请更换用户名)，即可看到我们刚刚添加的站点页面(据说有的网友创建仓库后会有延迟的现象，访问不到的话不要着急哈，可能只是时间上延迟的问题)：

2.2 配置SSH Key

使用Hexo生成了博客的静态页面后需要提交至Github仓库，那么我们就需要Github的权限，但是直接使用用户名和密码的方式实在是太不安全了，所以我们通过配置SSH Key的方式来解决本地和GitHub服务器连接的问题。

执行cd ~/.ssh，没有任何提示则说明之前就创建过，则直接cat id_rsa.pub就会看见下图所示的SSH key,直接复制至GitHub添加new SSH key：

若执行cd ~/.ssh提示”No such file or directory“则说明你是第一次使用git，执行：

bash

# 先执行下面的命令全局配置一下本地账户
$ git config --global user.name "用户名"
$ git config --global user.email "邮箱地址"
# 再执行下面的命令生成SSH key
$ ssh-keygen -t rsa -C "邮箱地址"

按照提示完成三次回车后即可生成SSH Key，通过查看cat ~/.ssh/id_rsa.pub文件即可获取生成的SSH Key，复制至GitHub即可。

2.3 测试SSH Key是否配置成功

执行一句命令：ssh -T git@github.com，出现类似如下图所示的结果即配置成功：

3 使用Hexo写博客

3.1 简介

Hexo是一个快速，简单且功能强大的博客框架，支持Markdown格式，有众多的优秀插件和主题，官网地址：https://hexo.io/。

3.2 安装

安装命令如下：

bash

1	$ npm install -g hexo

3.3 初始化

安装完成后，进行本地博客目录初始化操作：

bash

1 2	# 切换至你要存放博客内容的本地博客目录之后，执行下面的命令： $ hexo init # 这个命令执行起来可能会有点慢，我大概是等了一分钟左右

初始化完成后，会自动下载一些文件，git bash页面和文件目录如下图所示：

3.4 几个命令

接下来介绍几个基础命令，更多的hexo命令请参考：https://hexo.io/zh-cn/docs/commands.html：

3.4.1 hexo generate

hexo generate，可以简写为hexo g，作用是生成静态文件：

下图是我执行完hexo g命令后的git bash页面和文件目录，可以看出比初始化后的文件目录多了一个public静态文件夹和db.json缓存文件：

3.4.2 hexo server

hexo server，可以简写为hexo s，作用是启动服务器，即本地访问博客，默认情况下本地访问网址为：http://localhost:4000/，下图是我执行完`hexo s`命令后的git bash页面和访问页面：

可以看到，生成页面上仅包含几个hexo的基础命令，界面结构也十分的简单，总之就是十分的丑陋，当然hexo官网是给我们提供了很多的主题的，我看的时候是有295个，总会有一个是能符合你人物性格特点打动你的心灵的，接下来介绍如何更换主题。

3.4.3 hexo clean

hexo clean，作用是清除缓存文件(db.json)和已生成的静态文件(public)，在某些情况(尤其是你更换了主题后)，如果发现对站点的更改无论如何也不生效，可能需要运行该命令。

3.4.4 hexo new “xxx”

hexo new "xxx"，创建一篇名为“xxx”的博客，执行完这个命令后，hexo会帮我们在_posts文件夹下面生成相关的markdown文件。我们只需要打开这个文件就可以开始写博客了。

3.4.5 hexo deploy

hexo deploy，可以简写为hexo d，作用是部署网站至GitHub，注意与hexo s的区别，在执行此命令之前需要配置好部署设置，后面会详细说明。

3.5 更换hexo主题

先献上hexo官方主题链接：https://hexo.io/themes/

其实还是自己写一个主题比较好，但是小妖怪我是没有时间来搞这个东西了，于是乎，我选择了一款花里胡哨还怪好看的主题：hexo-theme-butterfly，附上GitHub地址：https://github.com/jerryc127/hexo-theme-butterfly

bash

1
2
3

# 我是用的是比较新的dev分支
$ git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
# 命令执行结束后我们会发现`themes`主题文件夹下面多了一个`Butterfly`文件夹，就是我要更换得蝴蝶主题

将_config.yml文件中的theme:landscape改为theme:Butterfly，然后执行hexo g，重新生成静态文件。

若出现莫名其妙的问题，请使用上面介绍的hexo clean清除静态文件和缓存文件，然后再重新重新生成。

注意：更换了主题之后不要忙着部署至GitHub中，现在本地服务器对主题进行修改查看等操作，确定主题网页打开没有什么异常现象之后再部署至GitHub中。

我遇见的问题就是修改了theme:Butterfly打开网页之后，界面上是一堆乱码文字，待我查看了这个主题的文档之后才知道是因为我没有pug以及stylus的渲染器，需要安装。

一些对主题的修改就需要认真去查看主题对应的帮助文档啦，附上蝴蝶主题的帮助文档地址：https://jerryc.me/posts/21cfbf15/

出现问题的时候一定要看出现的问题是什么，比如我在增加了几个页面后报了一大堆错，很长看着就让人头疼的英语，但是一看就是一句话，你缺少了cheerio这个模块，解决很简单，安装上不就好了：npm install cheerio --save

3.6 部署至GitHub

执行hexo d之前我们需要做一些部署配置，将_config.yml文件中和deploy相关的内容修改成类似如下所示：

bash

deploy:
  type: 'git'
  repository: git@github.com:XiaoMing0929/XiaoMing0929.github.io.git
  branch: master

修改完成之后还需要安装一个插件：

bash

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

然后执行hexo g重新生成静态文件后再执行hexo d，就会将本次改动的代码全部提交至GitHub中：