Build your own blog with github and hexo (利用hexo搭建博客)

在师兄的怂恿下，买了域名，搭了博客，开博第一篇就用来记录这个过程吧。写之前立个flag，下一步我要开自己的公众号[手动坏笑]。
搭建过程主要分为四步：

  1. 注册github帐号，建立username.github.io仓库;
  2. 配置基于nodejs和hexo的环境;
  3. 生成blog环境并部署到github;
  4. 申请域名 (optional).

注册github帐号及仓库建立

github官方为了鼓励Geeks为自己的项目搭建网站，提供了Github Pages这个工具。用户可以建立以自己的用户名 (username) 开头的username.github.io仓库，并通过链接https://github.com/username/username.github.io访问，用户可以通过push网站构建的代码到这个仓库里来建立并托管网站。这个项目最大的亮点就是免费加无容量限制，尤其适合建立项目相关的静态博客。具体的流程参照Github Pages即可，比较简单。

配置网页编译环境

为了搭建和美化博客页面，有多种方式。例如，HTML5+JavaScript+JekyII、nodejs+hexo等。对于刚刚入门的新手，nodejs+hexo的环境比较好搭建，而且它在mac OS和windows上都有很好的解决方案。配置过程中会碰到几个坑，我会逐一指出。

Step1: 安装nodejs

我会提供两种方法，第一种在Terminal下直接apt-get install, 再升级到最新的稳定版; 第二种是官网下载安装包，手动配置。

  • 方法一

    1
    2
    3
    4
    $ sudo apt install nodejs
    $ sudo apt install npm
    $ sudo npm install n -g
    $ sudo n stable

  • 方法二
    在官网下载对应linux 64位的安装包，例如node-v6.11.2-linux-x64.tar.xz,解压并复制到/usr/local/nodejs目录下，然后添加nodejs的路径到环境变量中。

    1
    2
    3
    4
    5
    $ tar xvzf node-v6.11.2-linux-x64.tar.xz
    $ sudo mv node-v6.11.2-linux-x64 /usr/local/nodejs/
    $ vim ~/.bashrc
    # export PATH=$PATH:/usr/local/nodejs/bin
    $ source ~/.bashrc

最后，可以通过输入node -v查看nodejs的版本，目前最新的稳定版是8.4.0.

Step2: 安装hexo

下面配置hexo, 因为刚接触前端的开发，还不太会用JavaScript，这里不详细介绍hexo，后面我会争取学会JS. 主要的安装过程如下，依然是命令行。

1
2
3
$ npm config set user 0
$ npm config set unsafe-perm true
$ npm install -g hexo-cli

注意前两句指令是用来配置npm的安全许可的，如果没有配置，安装过程中会提示permision denied的问题，无论是否使用root权限安装，这个坑的解决方法参考了linux系统下使用hexo搭建个人博客。测试是否成功，可以简单的用hexo -v来看版本情况，显示结果类似如下情形，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
hexo-cli: 1.0.3
os: Linux 4.8.0-59-generic linux x64
http_parser: 2.7.0
node: 8.4.0
v8: 6.0.286.52
uv: 1.13.1
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
nghttp2: 1.22.0
openssl: 1.0.2l
icu: 59.1
unicode: 9.0
cldr: 31.0.1
tz: 2017b

生成blog的配置文件并部署到github

搭建好nodejs+hexo环境以后，便可以生成blog的配置文件，并在本地进行预览，主要步骤如下。

1
2
3
4
$ cd user.github.io
$ hexo init
$ npm install
$ hexo s

其中，第一步是进入clone到本地的仓库中，注意该文件夹应该为空，否则无法初始化。如果不为空，例如包含有README.md等文件，可以考虑在新建的空文件夹中实例hexo环境，再复制文件到仓库中。第二、三步是实例一个hexo环境。第四步是在本地启动网页环境，默认的本地地址为localhost:4000. 进入浏览器，在地址栏输入该地址即可预览页面，类似于下图，

hexo preview

预览成功以后，便可以部署网站到github中，其原理是在本地编译好网页环境，然后push到github服务器上。流程如下，

Step1: 修改_config.yml文件
1
2
3
4
deploy:
    type: git
    repo: https://github.com/username/username.github.io
    branch: master
Step2: 部署
1
2
3
$ npm install hexo-deployer-git --save
$ hexo generate
$ hexo deploy

deploy命令将修改和重新编译的网页环境进行commit并push到github服务器中，后面在浏览器输入https://github.com/username/username.github.io即可进入网页，如果没有编译错误的话。

申请域名

最后我们可以给自己的博客申请域名，推荐gandi和namecheap，可以自己搜索域名，会显示该域名是否可用，第一年的价格是多少。例如，bazhaoyu和clytze对应的多数域名都还在，当然我自己名字对应的域名也有很多。我是在gandi注册的域名，流程比较简单，注册帐号，选择域名，付费即可。通过对比，gandi相对于namecheap的租金更低，并且提供两个免费的邮箱帐号。重点要解决的是域名和github.io地址的映射，步骤如下。

  1. 在username.github.io的source文件夹下新建CNAME文本文件，输入你要映射的地址，例如www.mazhixian.me;
  2. 在你的域名服务网站的设置中，添加www.mazhixian.me和username.github.io.的映射关系到DNS server中;
  3. hexo deploy修改后的CNAME到github服务器中，这样在浏览器输入www.mazhixian.me即可链接到你的网页。

References