前言

阮一峰 - 喜欢写Blog的人，会经历三个阶段

• 第一阶段，刚接触Blog，觉得很新鲜，试着选择一个免费空间来写。
• 第二阶段，发现免费空间限制太多，就自己购买域名和空间，搭建独立博客。
• 第三阶段，觉得独立博客的管理太麻烦，最好在保留控制权的前提下，让别人来管，自己只负责写文章。

而github正提供了博客管理这一功能，从2012年以来不少人在ｇithub网站上搭建blog。他们既拥有绝对管理权，又享受github带来的便利----不管何时何地，只要向主机提交commit，就能发布新文章。更妙的是，这一切还是免费的，github提供无限流量。

本篇文章,介绍了到目前为止(2015/7/21)，在最新的github上搭建博客的方法。参考了如下资料：

• 一步步在GitHub上创建博客主页
• Using Jekyll with Pages
• 搭建一个免费的，无限流量的Blog----github Pages和Jekyll入门
• Windows 上安装 Jekyll

需要的环境和技能

在一步步在GitHub上创建博客主页中说到用github写博客，维护流程如下：

1. 利用本地编辑器编写博客后维护网站其他页面
2. 使用Jekyll在本地测试网站功能
3. 使用Git客户端工具上传模板和页面文件
4. Git Server会用jekyll转化你的模板，并生成静态页面

所以，我们需要在本地搭建一个jekyll环境，能够在本地看见我们编写博客或者个人网页，确定编写无误后，再提交到git上。

需要的技能有：

1. 对Git源代码管理原理的认识，可以参考这里：Git学习资源
2. 逐步掌握jekyll
3. 基本的HTML、CSS、JS技术能力

搭建Jekyll环境

什么是Jekyll

在开始之前，有必要详细总结一下这个jekyll是什么。上面提到了它实际上是一个模板转化引擎。它同时也是GitHub上的一个开源项目：Jekyll

jekyll本身基于Ruby，它实际上也可以看成是一种模板引擎liquid的扩展。jekyll对liquid的主要扩展在于两点：

• 内建专用于博客网站的对象，可以在模板中引用这些对象：page、site等
• 对liquid进行了扩展，方便构建博客网站

类似其他的模板引擎一样，标记是模板引擎解析的关键，liquid设计了如下两种标记：

• {{ }}:此标记表征的是将其中的变量转化成文本: {{page.title}}表示文章标题，{{ content }}表示文章内容。
• {% %}:此标记用于包含控制流关键字，比如: {% if %}、{% for x in xx %} 。
  

显而易见的是，有了这种标记的支持，再加上jekyll内建的对象，构建网站就方便不少了。

可能有朋友会更其他的服务器端脚本语言比较，比如asp、razor、jsp、velocity…，但是一定要记得的是，jekyll对模板的解析仅仅只有一次，它的目标就是将模板一次性的转化成静态网站，而不是上述的动态网站脚本语言。

如何使用Jekyll

github会把你上传的文件通过Jekyll编译，并形成静态页面，但是限制于几个条件：

1. 使用名称如username.github.io的仓库，并且置于master分支下。
2. 或者使用其他名称的仓库，并且置于gh-pages分支下.

github服务器会识别以上的条件，满足之后使用Jekyll去生产静态博客，如果生产出错，他会给你留的email发一封邮件。

安装Jekyll到本地

1. 安装Ruby和RubyDevKit(如果是windows操作系统)

jekyll本身基于Ruby开发，因此，想要在本地构建一个测试环境需要具有Ruby的开发和运行环境。在windows下，可以使用Rubyinstaller安装。ruby安装说明

ruby安装完成后，记得将其目录,比如C:/Ruby22-x64添加到系统的环境变量中。

DevKit 是windows平台下编译和使用本地C/C++扩展包的工具。它就是用来模拟Linux平台下的make, gcc, sh来进行编译。注：这个方法目前仅支持通过RubyInstaller安装的Ruby，如果不是建议你重新安装。

从这里下载DevKit，注意版本要与Ruby版本一致。

下载下来的是一个很有意思的sfx文件，如果你安装有7-zip，可以直接双击，它会自解压到你所选择的目录。

解压完成之后，用cmd进入到刚才解压的目录下，运行下面命令，该命令会生成config.yml。

ruby dk.rb init

config.yml文件实际上是检测系统安装的ruby的位置并记录在这个文件中，以便稍后使用。但上面的命令只针对使用rubyinstall安装的ruby有效，如果是其他方式安装的话，需要手动修改config.yml。我生成的config.yml文件内容如下：（注意路径用的是linux的斜杠方向）

# This configuration file contains the absolute path locations of all
# installed Rubies to be enhanced to work with the DevKit. This config
# file is generated by the 'ruby dk.rb init' step and may be modified
# before running the 'ruby dk.rb install' step. To include any installed
# Rubies that were not automagically discovered, simply add a line below
# the triple hyphens with the absolute path to the Ruby root directory.
#
# Example:
#
# ---
# - C:/ruby19trunk
# - C:/ruby192dev
#
---
- C:/Ruby22-x64

其中C:/Ruby22-x64 是ruby的安装路径。

最后，执行如下命令，执行安装：

ruby dk.rb install

提示如下，表示安装成功了：

[INFO] Updating convenience notice gem override for 'C:/Ruby22-x64'
[INFO] Installing 'C:/Ruby22-x64/lib/ruby/site_ruby/devkit.rb'

Ps: 替换source源

在国内，Ruby的官方仓库时常访问不到，推荐使用淘宝的镜像参考，使用如下命令替换source源：

gem source -r https://rubygems.org/
gem source -a http://ruby.taobao.org

查看当前的source可用如下命令：

gem source

2. 安装bundler

在ruby语言下，每一个ruby程序都能打成一个gem包，以供其他程序调用。而bundler是管理应用程序 Gem 相关性(dependencies)管理工具，它会根据 Gemfile 的设定自动下载及安装Gem 套件，并且帮你解决不同套件之间的依存关系。

以java作为类比就是：

• java = ruby
• jar = gem
• maven = bundler

使用如下指令安装bundler

gem install bundler

3. 安装jekyll

首先，在你要发布网站的git仓库目录下，创建一个文件名称为Gemfile,其中的内容为

source 'http://ruby.taobao.org'
gem 'github-pages'

bundle 会根据 Gemfile 生成 Gemfile.lock，里面锁定了 gem 的版本依赖，在运行的时候会载入指定版本的 gem。
然后运行如下指令安装：

bundle install

4. 安装Pygments

Jekyll 里默认的语法高亮插件是 Pygments。基于Python编写。 所以它需要安装 Python 并在网站的配置文件_config.yml 里将 highlighter 的值设置为pygments。

安装 Python

1. 前往 python官网下载
2. 下载合适的 Python windows 安装包，如 Python 2.7.6 Windows Installer。 请注意，Python 2 可能会更合适，因为暂时 Python 3 可能不会正常工作。
3. 安装
4. 添加安装路径 (如： C:\Python27) 至 PATH。

5. 检验 Python 安装是否成功

   python –V
   

   输出示例：

   Python 2.7.6
   

安装 Easy Install

1. 浏览 这里 来查看详细的安装指南。

2. 对于 Windows 7 的机器，下载 ez_setup.py 并保存，例如，至C:\。
   然后从命令行使用 Python 运行此文件：

   python “C:\ez_setup.py”
   

3. 添加 ‘Python Scripts’ 路径 ,如： C:\Python27\Scripts 至 PATH

安装 Pygments

1. 确保 easy_install 已经正确安装

   easy_install --version
   

   输出示例：

   setuptools 3.1
   

2. 使用 “easy_install” 来安装 Pygments

   easy_install Pygments
   

启动Jekyll

首先，将网站仓库git clone到本地，并且如下操作：

1. 如使用名称如username.github.io的仓库，将其置于master分支下。
2. 或者使用其他名称的仓库，将其置于gh-pages分支下.

搭建Jekyll目录结构，可以看这篇文章。确保网站仓库的目录结构如下：

|—— _config.yml
|—— _includes
|—— _layouts
|   |—— default.html
|   |—— post.html
|—— _posts
|   |—— 20011-10-25-open-source-is-good.html
|   |—— 20011-04-26-hello-world.html
|—— _site
|—— index.html
|—— assets
   |—— css
       |—— style.css
   |—— javascripts

• _config.yml：保存配置，该配置将影响jekyll构造网站的各种行为。关于配置的详细文档在这里
• _includes：该目录下的文件可以用来作为公共的内容被其他文章引用，就跟C语言include头文件的机制完全一样，jekyll在解析时会对 {% include %} 标记扩展成对应的在_includes文件夹中的文件
• _layouts：该目录下的文件作为主要的模板文件
• _posts：文章或网页应当放在这个目录中，但需要注意的是，文章的文件名必须是YYYY-MM-DD-title
• _site：上面提到过，这是jekyll默认的转化结果存放的目录
• assets：这个目录没有强制的要求，主要目的是存放你的资源文件，图片、样式表、脚本等。

使用如下命令启动Jekyll

bundle exec jekyll serve

在windows下，也可以把启动Jekyll命令写成bat文件，双击执行：

cmd /k "cd %cd% && bundle exec jekyll serve"
pause

输出实例：

Configuration file: D:/workspace/personalInfo/_config.yml
            Source: D:/workspace/personalInfo
       Destination: D:/workspace/personalInfo/_site
      Generating...
                    done.
  Please add the following to your Gemfile to avoid polling for changes:
    gem 'wdm', '>= 0.1.0' if Gem.win_platform?
 Auto-regeneration: enabled for 'D:/workspace/personalInfo'
Configuration file: D:/workspace/personalInfo/_config.yml
    Server address: http://0.0.0.0:4000/personalInfo/
  Server running... press ctrl-c to stop.

表示网站在本地启动成功，访问地址是 http://localhost:4000/personalInfo/