0. 概述

虽然我的个人博客使用的是自己开发的博客系统，但是，有时为了方便，我也会使用 Github Page 构建一个页面用于保存一些信息，这里就总结一下如何通过 Github Page 构建个人博客的过程。

例如我现在在维护的 Github Page 有：

• 一些收藏网页的离线版本：Webtrack
• 一个旧域名的导航站：路人的技术
  • updated at 2023-05-03：已经不维护这个了

1. 创建项目

通常来说，你可能不会像我一样这么折腾，在一个 Github 帐号下维护多个 Github Page，所以，你很可能需要的就是当访问：https://.github.io 的时候，打开的就是你想要的个人主页，而不需要其他操作。

要想实现这样的一个效果，你需要创建一个 Github 项目，例如我的这个项目：

https://github.com/liuliqiang/webtrack

以前的项目名字要求是 Github 用户名 + github.io，这里如果用的不是你的用户会怎么样？我也不知道，我没试验过，如果你有兴趣，可以试一下，如果可以的话，不妨留言告诉我效果是啥。，但是现在已经不再要求了，可以随意了。

2. 填充项目

有了项目之后，下一步就是往项目里面加东西了，其实就是你的博客内容，对于 Github Page，本质上它只认 HTML/CSS/JS 等这些它认识的格式，如果你愿意，你可以直接写 HTML。但是，一般来说，不建议这么操作，因为这样比较复杂，当然，如果出于个人炫技或者想要一个独特的效果的话，这也是一个不错的选择。

更普遍的一种做法是使用静态博客生成工具来说，这里我要介绍的 Hexo。所以在开始填充项目之前，一个必备的工作就是安装 Hexo。

【可选】3. 安装 Hexo

要安装 Hexo，它要求你在你的机器上安装了 NodeJS，所以没有的话，不妨先看一下我之前的介绍：CentOS 安装 NodeJS 和 NPM 先安装一个，然后再继续：

[root@liqiang.io]# npm install -g hexo-cli
[root@liqiang.io]# echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

就是这么简单安装完毕，接下来就可以初始化项目了。

4. 初始化项目

在安装完静态博客的工具 Hexo 之后，下一步就是通过 Hexo 的一顿操作来初始化项目了：

[root@liqiang.io]# git@github.com:username/username.github.io.git
[root@liqiang.io]# cd username.github.io
[root@liqiang.io]# hexo init 
[root@liqiang.io]# npm install
[root@liqiang.io]# tree
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

你就看到了这个目录结构，其实这个时候已经可以正常工作了，例如你想看看效果的话，可以直接这样：

[root@liqiang.io]# hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

打开浏览器，访问 http://localhost:4000 你就可以预览效果了。但是，这距离你可以使用 Github Page 还有一点距离，因为前面说了 Github Page 不能识别 Markdown 文件，所以你需要将这些站点编译成 HTML，并且放在根目录上，一个操作是这么做：

[root@liqiang.io]# hexo generator
[root@liqiang.io]# mv public/* .

但是这样太过于粗暴，不利于以后写博客，所以另外一个操作是将生成的静态文件都放到一个新的分支上去，然后再将新的分支作为 Github Page，同时，这个过程因为是每次更新文章之后都需要做的，所以，通常的做法都是交给 CI 来完成，这里我使用的是 Travis。

5. 添加 Travis 支持

1. 关联 Github 与Travis

   打开这个页面 进行关联

2. 配置 Travis 的权限

   打开[这个页面[(https://github.com/settings/installations) 进行配置，如果你不知道要配置成什么样，那么可以操作一下我的配置：

   

3. 创建 Github Token

   打开这个页面，创建一个 Github Token，这个在后面 Travis 自动部署静态文件的时候会使用。切记：这个 Token 要自己保存下来，因为后面你是再也看不到了，除非重新创建一个。

4. 设置 Travis 环境变量

   打开 Travis 的 Repo Settings，添加一个 GH_TOKEN 的环境变量，值就是在前面创建的 Github Token，切忌，千万不要打开后面这个按钮：

   

5. 添加 Travis 配置

   最后一步就是在项目中添加 Travis 的配置文件了，直接编辑根目录中的 .travis.yml，内容如下：

    [root@liqiang.io]# cat .travis.yml
    sudo: false
    language: node_js
    node_js:
      - 10 # use nodejs v10 LTS
    cache: npm
    branches:
      only:
        - master # build master branch only
    script:
      - hexo generate # generate static files
    deploy:
      provider: pages
      skip-cleanup: true
      github-token: $GH_TOKEN
      keep-history: true
      on:
        branch: master
      local-dir: public

6. 提交项目

   完成这些步骤之后，将项目提交到 Github 上，然后就会触发 Travis 的 CI，Travis 生成静态文件成功之后，会通过你的 Github Token 将你的静态文件放到一个新的 Branch：gh-pages 中，然后，你需要在 Github 的 Repo Setting 中，选定这个 Branch 为静态博客的分支，这样你就可以享受静态博客的快感了。

   

6. 自定义域名

在完成前面这些步骤之后，你可以通过 .github.io 这个域名访问你自己的静态博客，但是，如果你觉得这个域名不够个性的话，那么 Github 也支持你自定义自己的域名。

要想自定义域名，那么你肯定得先有一个自己的域名，至于怎么注册我就不说了，当你注册好域名之后，还是打开 Github Page Repo 的设置页面，在这个地方填入你的自定义域名：

图 4：自定义域名

然后你需要去你的域名提供商那边设置一个 CNAME，将你的域名重定向到 Github Page，例如：

图 5：配置 CNAME

到此，一切完工，Enjoy！

7. Ref

• Hexo