dslztx
0%

使用Github Pages搭建个人博客

发表于 专题于 ， Disqus：

一、原理分析

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
您的支持将鼓励我继续分享！