使用Github Pages搭建个人博客

一、原理分析

Github Pages是Github提供的一项可用来托管个人静态站点的服务,详细介绍见[1]。通过Github Pages,可以省去自行购买VPS等服务搭建托管环境的麻烦。
Jekyll是一个静态站点生成器,它能够提取使用Markdown语言或者Textile语言编写的文章内容文件,并与配置使用的CSS文件,JS文件等素材文件一起作为转换引擎的输入,经过转换引擎转换,获取最终的HTML文件,这些HTML文件构成个人静态站点的主要部分。
Hexo跟Jekyll一样都是静态站点生成器,只不过Hexo只支持识别使用Markdown语言编写的文章内容文件。另外Hexo和Jekyll实现采用的技术方案不一致。
另外类似的静态站点生成器还有:Octopress,FarBox等。

由于Hexo的易用和高效,作者选择使用Hexo。

二、具体步骤

首先声明,作者的系统环境是“Ubuntu 14.04”。

2.1、开启Github Pages服务

  1. 在Github上新建一个“repository”,作者取名为“blogtest”
  2. 在“blogtest repository”的“Settings”页面点击“Launch automatic page generator”按钮,开启Github Pages服务,会提示访问网址为https://dslztx.github.io/blogtest/
  3. 完成以上步骤后,在“blogtest repository”下会新建一个“gh-pages branch”,需要把静态站点的内容发布到这里

2.2、本地搭建Hexo环境

2.2.1、安装Git

执行如下命令:

1
sudo apt-get install git

2.2.2、安装Node.js

执行如下命令:

1
sudo apt-get install node.js

2.2.3、安装npm

执行如下命令:

1
sudo apt-get install npm

2.2.4、安装Hexo

执行如下命令:

1
sudo npm install -g hexo-cli

上述命令执行过程中,出现错误信息如下:

1
2
3
4
sh: 1: node: not found
npm ERR! weird error 127
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read /usr/share/doc/nodejs/README.Debian

相应的解决方案是安装“nodejs-legacy”依赖[4],具体执行命令为:

1
sudo apt-get install nodejs-legacy

然后再重复执行:

1
sudo npm install -g hexo-cli

2.2.5、使用Hexo初始化本地环境根目录

具体是执行如下系列命令[5]:

1
2
3
hexo init <RootFolder>
cd <RootFolder>
npm install

2.3、写文章,本地预览

进入“RootFolder”目录,使用hexo new <title>[6]命令,新建一个空白的文章内容文件,该文件置于“_post”子目录下,在该文件中使用Markdown语言完成编辑内容。
接着执行下列系列命令就可以在本地进行预览:

1
2
3
4
# 生成最终的HTML文件
hexo generate
# 开启本地Web服务,可以访问生成的静态站点内容
hexo server

2.4、发布静态站点的内容到Github Pages

要想发布静态站点内容到Github Pages,首先得对“RootFolder”下的“_config.yml”配置文件进行修改:

  1. 由于静态站点的在线访问网址为https://dslztx.github.io/blogtest/,因此需要配置“_config.yml”配置文件“URL”小节下的“root”属性值为“/blogtest/”
  2. 需要配置发布目的地参数,具体是替换原有“deploy”小节的内容,改成如下形式内容:
1
2
3
4
deploy:
type: github
repo: git@github.com:dslztx/blogtest.git
branch: gh-pages

其中“repo”值是“blogtest repository”的允许以SSH形式访问的地址,“branch”表示发布到相应“repository”的“gh-pages”这个分支。
接着执行hexo deploy命令,进行发布。出现如下所示错误信息:

1
ERROR Deployer not found: github

相应的解决方案[7]是将上述“_config.yml”配置文件“deploy”小节的“type”属性值改为“git”。另外安装“hexo-deployer-git”这个模块依赖。具体是在“RootFolder”下执行npm install hexo-deployer-git --save命令,安装的模块被置于“node_modules”子目录下。
此时再执行hexo deploy命令,发现出现如下所示错误信息:

1
2
3
4
5
6
*** Please tell me who you are.

Run

git config --global user.email "you@example.com"
git config --global user.name "Your Name"

以上错误信息跟Hexo无关,跟Git相关,按照提示信息进行配置即可。
再次执行hexo deploy命令,发布成功。此时可通过https://dslztx.github.io/blogtest/网址进行在线访问。



参考文献:
[1]https://help.github.com/articles/what-is-github-pages/
[2]http://jekyllcn.com/docs/posts/
[3]https://hexo.io/zh-cn/
[4]http://nfeng.cc/2016/03/08/npm-legacy-binary-node/
[5]https://hexo.io/zh-cn/docs/setup.html
[6]https://hexo.io/zh-cn/docs/writing.html
[7]https://github.com/hexojs/hexo/issues/1040
[8]https://hexo.io/zh-cn/docs/index.html

您的支持将鼓励我继续分享!