Jekyll的详细文档，参见 Jekyll • Simple, blog-aware, static sites

开始使用Jekyll

Jekyll是一个简单而又强大的静态博客生成器，它可以使用你设定的模板生成一个完整的HTML站点，而你只需要专注于博文的写作，不需要因为新增一篇博文而到处修改你的HTML文件。另外，GitHub Pages也支持Jekyll，每一个GitHub Page站点都是运行在Jekyll之上的，你只需要向GitHub推送你的Jekyll模板代码，GitHub就会帮你生成一个静态网站。

安装Jekyll

强烈建议你在自己的电脑上安装Jekyll，这样你就可以先在本地预览好你的博客效果，再推送到GitHub。
下面的安装过程以Windows系统为例，使用Jekyll之前，你可能需要先安装下面这些东西：

  1. Ruby - Jekyll是使用Ruby语言编写的，所以它的运行要依赖于Ruby环境。对于Windows系统，可以从这里下载Ruby的安装包。

  2. DevKit - 在Ruby的下载页面也有DevKit的下载链接，下载对应的版本，下载下来是一个sfx的文件。安装Ruby后，把下载下来的sfx解压到任意目录，然后在那个目录下打开命令行，先后执行ruby dk.rb init和ruby dk.rb install两句命令即可完成安装。安装完成后可以删除这个解压出来的目录。

  3. Bundler - 安装好Ruby和DevKit后，执行gem install bundler即可安装Bundler。

  4. RailsInstaller - 安装Ruby，DevKit和Bundler的过程还是有点烦的，而且还可能会出错，作为一个懒人的我，也实在不能忍。所以包含了各种工具的RailsInstaller简直就成了懒人的福音。下载安装后，前面三步都可以跳过（什么？你问我既然这样为什么还要讲前三步？我就是凑字数，你吹呀）。

  5. Jekyll - 首先在仓库的根目录下创建一个名为Gemfile的文件，内容为

    1
    2
    source 'https://rubygems.org'
    gem 'github-pages'

    然而，由于一些不能描写的原因，https://rubygems.org 这个网址在我国大陆是不能访问的，因此我们使用它的镜像站http://ruby.taobao.org/ 代替，所以Gemfile文件的内容实际是

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

    创建好文件后，在此目录下打开命令行，输入命令bundle install即可完成Jekyll的安装

运行Jekyll

当你写完一个Jekyll的模板之后，运行bundle exec jekyll serve即可启动Jekyll。该命令的作用是，先用你写的模板生成一个静态网站，然后启动HTTP服务器。在浏览器地址栏输入http://localhost:4000即可预览生成的网站。

更新Jekyll

Jekyll是一个很活跃的开源项目，因此版本更新的速度比较快，使用bundle update命令可以使你的Jekyll更新到最新版本。

Hello, Jekyll

现在，让我们自己来写一个Hello, Jekyll网站（就像各种编程语言的Hello, World程序一样），以增加我们对Jekyll的感性认识。

建立一个_config.yml文件

这是Jekyll网站的配置文件，我们可以在这里设置一些Jekyll的参数，也可以自己添加一些参数。这个文件里设置的参数都可以在Jekyll页面中以{{site.param}}的形式进行访问

1
2
# Site settings
title: Vincent's Site

创建一个_includes文件夹

这个文件夹中存放的是每个页面的公共部分（如导航条，版权声明等），这样，在其他页面中就不用重复写这些代码，只需要用Jekyll的include命令就可以把这些文件包含进去，如{% include head.html %}。在这个文件夹里，我们添加三个文件，它们分别是：
head.html

1
2
3
<head>
    <title>{% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{ site.title }}{% endif %}</title>
</head>

在head.html中，我们可以看出，在Jekyll中，程序指令使用{% %}语法包含起来，读取变量使用的是{{ }}语法

nav.html

1
2
<h1>{{site.title}}</h1>
<hr/>

footer.html

1
2
<hr/>
<p>Copyright &copy; 2015 Vincent Lau. All rights reserved.</p>

创建一个_layouts文件夹

一个网站都会有许许多多的页面，但是一般来说，这些页面有很多都是基于相同的布局。比如，一个博客里面有100篇博文，就会有100个HTML页面，但是这些页面的布局方式都是一样的，这样，我们就可以把布局的HTML代码单独抽出来，放在_layouts文件夹下。我们现在创建两个布局文件，他们分别是：
default.html

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
    {% include nav.html %}
    {{ content }}
    {% include footer.html %}
</body>
</html>

这个默认的布局文件使用include指令包含了三个html文件，并且用{{ content }}把内容至于其中。使用了这个布局的页面，就会用它的内容来替换掉布局文件中的{{ content }}。

post.html

1
2
3
4
5
6
7
---
layout: default
---

<h2>{{page.title}}</h2>
<font color="gray" ><i>Author: {{page.author}}</i></font><br/>
{{content}}

这个布局文件是博文所使用的布局，在这个布局中，把文章的标题和作者显示了出来，然后在其下显示文章的内容。特别地，我们注意到，在这个文件最上方用两条三横杠括起来的区域，这是Jekyll的YAML前置数据。这些前置数据必须存在于文件首部，并且格式要符合规范。你可以在这里设置一些预定义的变量或者你自己定义的变量。这些变量可以在Jekyll页面中通过形如{{ page.param }}的格式获得。我们这里使用的layout变量指示了这个文件所使用的布局文件为default（也就是我们上面添加的default.html）。
注意(尤其是Windows用户)，当你使用UTF-8来编码你的文件的时候，请确保没有BOM的头部字符在你的文件中，否则会导致Jekyll奔溃

添加index.html文件

这是我们博客的主页，它使用default布局文件，并且用一个循环把我们的博文列表显示了出来：

1
2
3
4
5
6
7
8
9
10
11
---
layout: default
---

<ul>
{ % for post in site.posts % }
    <li>
        <h2><a href="{{ post.url }}">{{post.title}}</a></h2>
    </li>
{ % endfor % }
</ul>

添加自己的博文

先创建一个_posts文件夹，然后在里面添加。博文的文件名一定要符合yyyy-MM-dd-<filename>.<extension>的格式。我们先来添加两篇
2015-09-22-post-01.md

1
2
3
4
5
6
7
---
layout: post
title: "Hello, Jekyll"
author: "Vincent Lau"
---

This is my FIRST Jekyll article.

2015-09-22-post-02.md

1
2
3
4
5
6
7
---
layout: post
title: "Hello, Jekyll - 02"
author: "Vincent Lau"
---

This is my SECOND Jekyll article.

然后添加Gemfile

这是bundle exec jekyll serve文件需要用到的。

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

完成

到现在为止，所有文件都创建完毕，我们已经完成了一个最简单的Jekyll模板。现在的文件目录结构为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|--_includes
|  |--footer.html
|  |--head.html
|  |--nav.html
|
|--_layouts
|  |--default.html
|  |--post.html
|
|--_posts
|  |--2015-09-22-post-01.md
|  |--2015-09-22-post-02.md
|
|--_config.yml
|--Gemfile
|--index.html

执行bundle exec jekyll serve命令，生成网站，然后启动本地HTML服务器预览效果。Jekyll所生成的所有文件都会存放在_site文件夹下。若要在线查看HelloJekyll的效果，可前往http://www.liuwj.me/HelloJekyll/，要查看HelloJekyll的代码，可前往我的GitHub。

使用更好看的Jekyll模板

真正的博客当然不可能真的像HelloJekyll那样简陋，网上可以下载到大神们做好的各种Jekyll模板，我们可以把它用到自己的博客里来，加以修改。在这里给大家推荐一个网站Jekyll Themes。当然，网上找的模板不一定适合自己，你可以发挥自己的创造力和动手能力，做出一个独一无二的个人博客，这就需要一定的审美以及HTML和CSS的功底了。
关于Jekyll的内容就讲到这里，当然这些只是冰山一角，但是基本的原理你已经掌握，更多的命令可以通过查阅文档获得，参见Jekyll • Simple, blog-aware, static sites。