GitHub + Jekyll 搭建并美化个人网站

可能大多数技术员都有一个小愿望——构建自己的独立网站。原因可能多样，或是自我营销，或是记录日常，或是简单的技术尝试……对于了解 git 和 GitHub 的格子男，估计已经百度过“GitHub 个人博客”之类，结果有很多页。其中，GitHub Pages、Jekyll、Hexo都是常见关键词，那么本文还有什么必要性？

1. 共享个人建站经历，并以列表形式简化说明过程，以粗体字标明步骤；
2. 网络资源多为GitHub Pages自动生成网页，或者只是介绍Jekyll、Hexo搭建 "hello world"，缺少后续美化；
3. 共享以模版建站方法（GitHub + Jekyll + themes），简化美化过程，降低技术难度。

废话不多说，开始行动吧……

思路与工具简介

GitHub + Jekyll + themes

思路简单地概括为 GitHub + Jekyll + themes，即利用GitHub的代码托管功能、Jekyll的静态网站管理工具和网络主题模版快速搭建个人网站，力图以简洁的列表和代码说明建站过程。

建站需要的工具包含：

• Git: 安装和入门可以参见《入门基础》
• GitHub Pages
• Jekyll（含Gem和Bundle）

测试平台：

• Mac OSX 10.9.5

如果你有过上述工具使用经验，或者曾经百度尝试过GitHub + Jekyll，那么就更容易上手了。如果你是第一次看到这些词汇，可能需要些尝试和摸索，不过笔者尽力让步骤清晰。

GitHub 快速搭建网站

首先得安装 Git 版本管理工具，毕竟是在 GitHub 上托管的。然后，为了使用Jekyll还需要安装有 Ruby。所幸 Mac OSX 自带了这两样代码工具，这里不再赘述。后续内容都假设，读者已经阅读并了解了《Git 入门基础》。

建立 repository

登录 GitHub 账号，并新建一个代码库（repository）。这里账户名为: user，代码库名为: repository。

Tips: 大多网络文章都强调并标明，该代码库的名称必须与账户名相同。其实不然，可以随意取名（例如，笔者将其取名为 personal）。但是，如果名称是用户名时，后续生成网址正好为最简短的形式，即 https://username.github.io；如果采用其他名称，则会在网址后额外添加一个项目名，例如 https://username.github.io/personal。

将代码库拷贝到本地电脑

git clone github.com/user/repository.git

构建Branch —— gh-pages

GitHub Pages 中明确定义了只有 gh-pages 分支的代码才会被自动生成网站链接，因此需要在拷贝下来的代码中添加对应分支。

新建 gh-pages 分支

cd repository
git checkout --orphan gh-pages
git rm -rf .    # 清空代码库

提交网站更新

后面就变成使用 Git 工具管理 GitHub 上的代码库了。特别注意的是，代码推送时需要指明推送至 gh-pages 分支。

推送更新

echo "Hello GitHub Pages!" > index.html    # 生成一个示例页面
git add index.html                         # 添加至更新库
git commit -a -m "First pages commit"      # 更新版本库
git push origin gh-pages                   # 推送至 GitHub

加载网站

向网站推送更新之后，很快 GitHub 就会帮你自动完成网站搭建。点击以下链接，先看一眼吧。

https://.github.io/

如果链接出现问题，GitHub 会向你的账户发送邮件。

---

Jekyll + themes 快速丰富网站

如果上述操作一切顺利，那你只得到了一行文字的网站，显然还不能达到你的心理预期。下面采用 Jekyll + themes 进行模版套用，这也是本文的重头戏。

工具包安装

1. 检查 Ruby 版本号（必须高于ver-2.0.0，如果没有得先安装）

   ruby --version

2. 安装 Bundler（管理 Gem 相依性的工具，例如jekyll）

   gem install bundler

3. 安装 Jekyll

首先需要在 repository 的根目录下生成 Gemfile 文件，内容为：

source 'https://rubygems.org'
gem 'github-pages', group: :jekyll_plugins

采用 Bundler 安装 Jekyll

bundle install

至此，工具已经齐备了！

使用 Jekyll 模版

网络上提供了大量适用于 GitHub Pages 的 Jekyll 模版，推荐一个网站：

• Jekyll Themes

各种风格任你选，去下载一个并解压将文件放到你的代码库（repository）根目录下。当然，适当的整理会略有帮助。

本地服务器预览

Jekyll 贴心地提供了一个本地预览服务器，用于离线编辑时预览网站效果。至此，你也可以启动服务器进行个人网站的预览啦。

启动 Jekyll 预览服务器

$ bundle exec jekyll serve
Configuration file: /Users/octocat/my-site/\_config.yml
            Source: /Users/octocat/my-site
       Destination: /Users/octocat/my-site/\_site
 Incremental build: disabled. Enable with --incremental
    Generating...
                done in 0.309 seconds.
 Auto-regeneration: enabled for '/Users/octocat/my-site'
Configuration file: /Users/octocat/my-site/\_config.yml
    Server address: http://0.0.0.1:4000/
  Server running... press ctrl-c to stop.

通过本地浏览器打开 Server address: http://0.0.0.1:4000/ 生成的链接，你的个人网页就展现在你面前了。当然，网页信息都还是模版自带，以后的工作就变成了修改本地文件并使用 GitHub 进行代码托管了。

向 GitHub 完成网络更新

如果预览效果已经满意了，那么就向 GitHub 代码库进行推送更新吧。

git add .
git commit -m "First pages commit"
git push origin gh-pages

Tips: 模版目录中 _site 是由 Jekyll 转换生成，用于保存本地预览页面，因此建议将 _site 目录放进你的 .gitignore 文件中。

推送更新完成后，登录你的个人网站 https://.github.io/ 看看效果吧！

为了保证本地 PC 上的代码管理工具都能够与 GitHub Pages 保持同步更新，只需要运行代码 bundle update github-pages 或者 bundle update 即可。

修行靠个人

个人网站搭建完毕后，剩下的就是个人定制和信息更新了。设计到的代码语法和配置可以参考 Jekyll中文网站。

---

已经坚持每天更新一周了，和 Jekyll 都是支持 Markdown 语法的，提倡专注创作而不是格式。但是，GitHub Pages 属于静态网站，并不支持留言等互动功能，更适合个人网站和简历；还是要更完善一些，更适合“交流故事，沟通想法”。