在博客问题上我可是折腾了很多回了，先是尝试了wordpress（来来回回很多次），不过wordpress使用起来，感觉还是太“重”，很多东西配置起来非常麻烦(包括主题设置，甚至是Markdown支持)。后来迁移到简书上面，被国家政策教做人(一篇关于Shadowsocks的文章被屏蔽了，有种吃苍蝇的感觉)。思前想后，还是自己host自己的博客好。最终我是选择了Hexo + Github的方案，好处如下：

  1. 对Markdown支持比较好
  2. 不需要自己折腾服务器
  3. 用Git管理非常方便

在这篇文章里，我整理一下整个博客的搭建过程。

1 1. Hexo Setup

Hexo是一款基于Node.js的静态博客框架，可以生成静态页面部署在Github和Heroku上面。Hexo的搭建过程如下：

  1. 申请域名
  2. 创建Github仓库
  3. 安装Hexo及其依赖
  4. 绑定域名

1.1 1.1 申请域名

虽然部署在Github上Github会提供一个免费的域名，但是如果有自己的独立域名的话，网站会更像"博客"一点。申请域名的地方有很多，我的域名是选用的阿里云的。传送门：阿里云-为了无法计算的价值。

1.2 1.2 创建Github仓库

在Github中创建一个名字为username.github.io的仓库，注意这里的username需要替换为你自己的用户名。例如我的仓库名字为huangy10.github.io。 > 你可以尝试在这个仓库中添加一个名为index.html的文件，在其中接入hello world。然后访问http://username.github.io 就可以看到这个页面了。 > 不过注意尝试之后删除这个仓库重新创建。后面我们在部署Hexo的时候最好让这个仓库是空的。 >

1.3 1.3 安装Hexo及其依赖

1.3.1 1.3.1 安装Git，并配置好SSH秘钥

这里Github有全面的教程，传送门：https://try.github.io/

1.3.2 1.3.2 安装Node.js

Mac平台下面安装Node.js非常简单，可以通过Homebrew进行安装:

1
brew install node

如果没有安装Homebrew，可以在Terminal中输入下面这个命令快速安装： 

1
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装完成后可以通过node -v来验证安装是否成功，并查看安装版本。进一步通npm -v来检查npm也正确安装了。

1.3.3 1.3.3 安装Hexo

使用npm来安装Hexo：

1
npm install -g hexo-cli

完成安装以后，挑选一个合适的路径，然后运行

1
hexo init blog

这个命令会在当前文件夹中创建一个名为blog的文件夹。博客相关的文件都会存储在这个文件夹中。cd进入这个文件夹，然后运行

1
2
3
4
# 生成静态文件
hexo g
# 在本地运行一个测试服务器来伺服静态文件
hexo s

然后在浏览器中访问http://localhost:4000 就可以访问自己的网站了。

博客初始页面

我们来看一下Hexo博客项目下的目录结构：

Hexo目录结构

其中比较重要的是：

  • _config.yml是整个项目的配置文件，YAML格式；
  • public是发布的静态文件内容。注意这个文件会在hexo g命令后重新生成，其中内容会被重置；
  • source是工程源文件，其中的_posts文件夹存储了博文的Markdown文件。其中的其他文件，则会在hexo g命令的作用下发布到public文件夹中；
  • themes存储了博客的主题。在各个主题自己内部也有自己的_config.yml文件，用来定制化模板的参数。

1.4 1.4 Hexo部署

我们选择将Hexo部署到Github上。打开博客项目根目录下的_config.yml文件，跳到最后，修改

1
2
3
4
deploy:
    type: git
    repo: git-repo-path(ssh方式，不要用https)
    branch: master(不出意外就填写master)

保存退出。

然后我们需要安装一个git部署的工具:

1
npm install hexo-deployer-git --save

然后运行

1
2
3
hexo clean
hexo g
hexo d

三个命令，就可以逐步完成清理之前的生成，重新生成静态文件，将静态文件部署到Github上。全部完成后访问username.github.io 。就可以看到站点了。

2 2. Hexo Advanced

2.1 2.1 自定义域名

使用github提供的免费域名还是不够fancy，我还是希望使用自己的域名。首先进入域名管理后台，添加两条记录。分别是

  • yourdomain.com 添加一条A记录，指向username.github.io对应的ip地址。（这个ip地址可以通过ping命令看到）
  • www.yourdomain.com 添加一条CNAME记录，指向username.github.io

然后在本地博客工程中的public文件夹下，添加一个CNAME文件，文件中写入自定义的域名www.yourdomain.com。重新三连：

1
hexo clean; hexo g; hexo d

这是输入https://www.yourdomain.com就可以访问自己的网站了（可能需要等一段时间让dns刷新）

2.2 2.2 更换主题

自己搭建博客的乐趣之一就是各种更换主题。Hexo有自己的主题市场：Themes。我选择的主题是laughing。这个主题比较简洁，而且支持响应式布局。不过，这个主题支持的多说这个评论平台已经关闭了。其安装过程如下（其他的主题的安装方式大同小异）：

首先安装主题依赖的pug模板引擎:

1
npm install hexo-renderer-pug --save

然后将主题文件夹下载到themes目录：

1
2
cd themes
git clone git@github.com:BoizZ/hexo-theme-laughing.git

最后修改博客项目根目录下的_config.yml文件：

1
theme: hexo-theme-laughing

主题的配置方式可以参考主题的Github文档。需要注意的是，文档中所说的_config.yml文件是指的主题文件夹中的配置文件，而非博客项目根目录下的配置文件。

2.3 2.3 插件

Hexo提供了很多插件来增强博客的功能。这个部分我也正在研究。这里我列出一下目前我安装了的插件：

  • hexo-addlink: 在文章末尾中添加本文的链接
  • hexo-generator-feed: 生成rss订阅
  • hexo-generator-sitemap: 生成站点地图