前言

本站迁移至 GitHub Pages 已经月余，毕竟是静态页面，访问速度令人满意，不过其搭建和发布还是不同于传统的博客程序，在此记录下搭建过程。

介绍

GitHub Pages 本用于介绍托管在 GitHub 的项目，也可以用来搭建博客，有1GB 的免费空间。官方推荐使用 Jekyll 来搭建，不过我看上了 Hexo 的主题，所以选了它。

Hexo 是一个基于 Node.js 的快速、简洁且高效的博客框架，使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页并托管在 Github Pages 和 Heroku 等平台上。Hexo 作者是来自台湾的 tommy351。

GitHub Pages 设置

  1. 首先你需要注册一个 GitHub 帐号；
  2. 新建一个与你用户名对应的仓库，仓库名必须为 username.github.io；
  3. 在仓库中新建一个分支，比如 hexo；
  4. 将该分支设置成缺省分支；

上面最后两个操作的用意是将 hexo 分支用作 Hexo 博客源码的备份分支，将原来的默认缺省分支 master 作为发布静态内容的目标分支，这样你可以很方便的切换你的写作环境到另外一台电脑。

Hexo 安装

因为 GitHub Pages 是纯静态托管平台，不能像传统博客程序那样，找个浏览器就可以写，所以需要搭建能发布静态内容的环境，我们这里用 Hexo 来生成静态内容并发布到 GitHub Pages。

安装 Git

我使用的发行版是 Ubuntu 16.04 LTS （Xenial Xerus），所以安装 Git 的命令就很简单 $ sudo apt-get install git-core

安装 Node.js

最好的方法是使用 Node Version Manager。

cURL:

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

Wget:

$ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

当 nvm 装好以后，关掉 terminal 终端窗口再重新打开，运行以下命令安装 Node.js：

$ nvm install stable

安装 Hexo

$ npm install -g hexo-cli

如果你的网络访问 npm 源比较慢，你可以使用淘宝的 NPM 镜像（每10分钟与官方源同步一次）来安装：

npm install -g hexo-cli --registry=https://registry.npm.taobao.org

Hexo 初始化

当 Hexo 安装好以后，运行 hexo init <folder> 来初始化。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

初始化之后，目录结构看起来应该像下面的样子:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
_config.yml

网站的配置信息，您可以在此配置大部分的参数。

package.json

应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^3.0.0",
    "hexo-generator-archive": "^0.1.0",
    "hexo-generator-category": "^0.1.0",
    "hexo-generator-index": "^0.1.0",
    "hexo-generator-tag": "^0.1.0",
    "hexo-renderer-ejs": "^0.1.0",
    "hexo-renderer-stylus": "^0.2.0",
    "hexo-renderer-marked": "^0.2.4",
    "hexo-server": "^0.1.2"
  }
}
scaffolds

模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的markdown文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes

主题文件夹。Hexo 会根据主题来生成静态页面。

更多关于 Hexo 建站和配置的详细信息，可以参考官方文档

发布 & 部署

新建文章
1
$ hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

生成静态内容
1
$ hexo generate

生成静态文件。

选项 描述
-d, --deploy 文件生成后立即部署网站
-w, --watch 监视文件变动

该命令可以简写为

1
$ hexo g
本地调试
1
$ hexo server

启动服务器。默认情况下，访问网址为： http://localhost:4000/。

选项 描述
-p, --port 重设端口
-s, --static 只使用静态文件
-l, --log 启动日记记录，使用覆盖记录格式
部署

部署到 Github 前需要配置 _config.yml 文件，首先找到下面的内容

1
2
3
4
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type:

然后将它们修改为

1
2
3
4
5
6
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:https://github.com/randyzhong/randyzhong.github.io.git
  branch: master

另外，还需要安装 git 部署插件：

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

部署网站：

1
$ hexo deploy
参数 描述
-g, --generate 部署之前预先生成静态文件

生成静态文件并发布的命令可以简写为：

1
$ hexo -d g

附加配置

本站使用了 maupassant 主题，并且安装了几个插件，所以 package.json 文件内容相比默认的有变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.3.8"
  },
  "dependencies": {
    "hexo": "^3.2.0",
    "hexo-asset-image": "0.0.3",
    "hexo-deployer-git": "^0.3.1",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-feed": "^1.2.2",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-sitemap": "^1.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-helper-qrcode": "^1.0.2",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-jade": "^0.3.0",
    "hexo-renderer-marked": "^0.3.0",
    "hexo-renderer-sass": "^0.3.2",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0",
    "hexo-wordcount": "^3.0.2"
  }
}

所以在安装了 Hexo 之后，可以运行如下命令添加这些插件：

1
2
3
4
5
6
7
8
$ npm install hexo-asset-image --registry=https://registry.npm.taobao.org --save
$ npm install hexo-deployer-git --registry=https://registry.npm.taobao.org --save
$ npm install hexo-generator-feed --registry=https://registry.npm.taobao.org --save
$ npm install hexo-generator-sitemap --registry=https://registry.npm.taobao.org --save
$ npm install hexo-renderer-jade --registry=https://registry.npm.taobao.org --save
$ npm install hexo-renderer-stylus --registry=https://registry.npm.taobao.org --save
$ npm install hexo-wordcount --registry=https://registry.npm.taobao.org --save
$ npm install hexo-helper-qrcode --registry=https://registry.npm.taobao.org --save

CNAME 设置

在发布完成以后，就可以使用 https://yourname.github.io 来访问你的主页了。
如果你不想用 github.io 的二级域名，你可以使用自己的域名。

  1. 在Hexo 的 source 目录下创建 CNAME 文件。
  2. 填写自己的域名如 winotes.net 或者 www.winotes.net，保存退出。
  3. 登录你的域名解析商，比如 DNSPod，先添加域名，然后添加记录，设置如下：

主机记录 | 记录类型 | 线路类型 | 记录值 | MX优先级 | TTL
— | —
@ | CNAME | 默认 | yourname.github.io. | - | 10
www | CNAME | 默认 | yourname.github.io. | - | 10

当然，你也可以通过创建DNS A 记录直接指定 GitHub Pages 的 IP 来解析：

  • 192.30.252.153
  • 192.30.252.154

博客源码备份

1
2
3
$ git add .
$ git commit -m "comments"
$ git push original hexo

以下目录不用上传，所以在 .gitignore 里面排除掉即可：

1
2
3
.git/
public/
.deploy_git/