0. 概述

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

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

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 先安装一个,然后再继续:

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

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

4. 初始化项目

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

  1. [root@liqiang.io]# git@github.com:username/username.github.io.git
  2. [root@liqiang.io]# cd username.github.io
  3. [root@liqiang.io]# hexo init
  4. [root@liqiang.io]# npm install
  5. [root@liqiang.io]# tree
  6. .
  7. ├── _config.yml
  8. ├── package.json
  9. ├── scaffolds
  10. ├── source
  11. | ├── _drafts
  12. | └── _posts
  13. └── themes

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

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

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

  1. [root@liqiang.io]# hexo generator
  2. [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,内容如下:

    1. [root@liqiang.io]# cat .travis.yml
    2. sudo: false
    3. language: node_js
    4. node_js:
    5. - 10 # use nodejs v10 LTS
    6. cache: npm
    7. branches:
    8. only:
    9. - master # build master branch only
    10. script:
    11. - hexo generate # generate static files
    12. deploy:
    13. provider: pages
    14. skip-cleanup: true
    15. github-token: $GH_TOKEN
    16. keep-history: true
    17. on:
    18. branch: master
    19. 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