前言

本文主要介绍著名的静态博客生成器 Jekyll 的基本使用方法。不同于 WordPress 等博客系统，Jekyll 生成的站点无需依赖数据库，所有页面都由 Jekyll 静态生成，用户只需使用 Markdown 等标记语言撰写文章并重新生成即可。本站即基于 Jekyll 搭建。

首先简单介绍一下 Jekyll。

简介

Jekyll 是一个简单的博客形态的静态站点生成器。它有一个模版目录，其中包含原始文本格式的文档，通过 Markdown（或者 Textile） 以及 Liquid 转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。 ——Jekyll中文官方网站

特性

如上文所说，Jekyll 具有三大特性：简单，静态，博客形态。具体解释如下：

  • 简单：无需数据库，没有评论功能，没有频繁的版本更新——仅仅关注你的内容。
  • 静态：利用 Markdown（或 Textile）等标记语言，Liquid 模板语言，和 HTML & CSS 构建可发布的静态网站。
  • 博客形态：支持 URL 自定义，支持文章分类，支持单页面，可以自定义博客布局。

目录结构

Jekyll 的核心其实是一个文本转换引擎。它的概念其实就是：你用你最喜欢的标记语言来写文章，可以是 Markdown，也可以是 Textile，或者就是简单的 HTML，然后 Jekyll 就会帮你套入一个或一系列的布局中。在整个过程中你可以设置 URL 路径，你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现，最终生成的静态页面就是你的成品了。

一个基本的 Jekyll 网站的目录结构一般是像这样的：

.
├── _config.yml
├── _drafts
|	├──begin-with-the-crazy-ideas.textile
|	└──on-simplicity-in-technology.markdown
├──_includes
|	├── footer.html
|	└── header.html
├── _layouts
|	├── default.html
|	└── post.html
├── _posts
|	├── 2007-10-29-why-every-programmer-should-play-nethack.markdown
|	└── 2009-04-26-barcamp-boston-4-roundup.markdown
├── _site
└── index.html
  1. _config.yml: 配置文件，例如站点 title，permalink 的格式等在这个文件中配置，在布局文件中可以用liquid语言进行调用。
  2. _drafts: 存放草稿的文件夹。
  3. _includes: 你可以加载这些包含部分到你的布局或者文章中以方便重用。可以用这个标签 {\% include header.html %} （去掉转义符号\，下同）来把文件 _includes/header.html 包含进来。
  4. _layouts: 是包裹在文章外部的模板。布局可以在 YAML 头信息中根据不同文章进行选择。 下一章中将对此进行介绍。标签 {\{ content }\} 可以将 content 插入页面中。
  5. _posts: 这里存放的是你的文章。文件格式很重要，必须要符合: YEAR-MONTH-DAY-title.MARKUP。permalinks 可以在文章中通过 YAML 自己定制，但是数据和标记语言都是根据文件名来确定的。
  6. _site: Jekyll 生成后的静态网站就存在这个文件夹中。将此文件夹中的内容上传至你的服务器，即可访问。
  7. index.html 等其他文件: 如果这些文件含有 YAML 头信息，那么Jekyll会将其转化成静态页面。以 .html，.markdown，.md 或者 .textile 结尾的也会被转换。

本章对 Jekyll 进行了一些简单的介绍，若想详细了解其他方面，请访问 Jekyll 官方网站（中文，英文）。

使用指南

本指南是博主搭建本站时的步骤总结，供初次使用 Jekyll 的同学提供一点思路。主要从安装、配置和部署三个方面来介绍。

安装

由于最终只需将 _site 文件夹内的内容部署至服务器，所以我们在本地安装 Jekyll 并配置生成博客，然后部署即可。

这里博主使用的环境是Mac OS X 10.10，Linux 下操作类似，官方不推荐使用 Windows 运行 Jekyll。

安装使用 RubyGems，操作过程很简单，打开命令行，输入以下命令：

~ $ gem install jekyll
~ $ jekyll new my-awesome-site
~ $ cd my-awesome-site
~/my-awesome-site $ jekyll serve
# => Now browse to http://localhost:4000

打开你的浏览器，在地址栏中输入 http://localhost:4000 即可访问由 Jekyll 生成的静态站点！

配置说明

好了，第一步成功后，我们可以访问由 Jekyll 生成的一个默认的站点，为了让站点更加符合自己的个性与审美，下面我们对站点进行一些配置。

站点设置

_config.yml

_config.yml文件是站点全局配置文件。在此文件中我们可以修改自己的站点 title，description，permalink 格式等全局变量，以及标记语言解释器和一些其他的设置。Jekyll 默认的配置见此处。

在样式模板中可以调用此文件中的变量，使用方法是用 liquid 语言进行调用，如 {\{ site.title }\}，父属性是 site。

YAML

正是 YAML 头信息开始让 Jekyll 变的很酷。任何只要包含 YAML 头信息的文件在 Jekyll 中都能被当做一个特殊的文件来处理。头信息必须在文件的开始部分，并且需要按照 YAML 的格式写在两行三虚线之间。下面是一个基本的例子：

---
layout: post
title: Blogging Like a Hacker
---

在 YAML 头信息中，你可以使用已经定义好的全局变量，如 layout，permalink 等，也可以自定义变量，如 title，使其可以在样式模板中使用这个变量。调用自定义变量方法是 {\{page.title}\}，父属性是 page。

自定义样式

Jekyll 默认的模板很简洁，也很漂亮。本站基于默认模板样式作出了一点改动，例如超链接样式，header 配色，边栏布局等。

Jekyll默认模板中样式文件主要是 css 文件夹中的 main.scss，_sass 文件夹中的 base.scss 和 layout.scss。

main.scss 文件主要设定了如 width，margin 等基本值，base.scss 文件对 HTML 基本元素进行了 reset，layout.scss 文件是对自定义 class，id 等进行样式设置。博主主要修改的就是 layout.scss 文件。有关 CSS 样式，以及动态样式语言 SCSS 的相关知识，可自行 Google 学习。

评论功能

作为不依赖数据库的静态博客系统，Jekyll 自然是没有文章评论功能，如果想在自己的博文中引入评论功能，可以引入公共的评论平台。目前常用的有 Disqus 和多说。本站用的是 Disqus。

具体设置方法很简单：

  1. 在 Disqus 官网 注册账号并登陆，点击右上角Settings - Add Disqus To Site按钮；
  2. 填写你站点的相关信息，完成创建；
  3. 设置你的评论框，包括登陆限制，语言等，保存设置；
  4. 点击 install，生成一段js代码，复制并粘贴到 Jekyll 中你想让评论出现的地方即可（本站为 _layout/post.html 文件中末端）；
  5. 在文章的 YAML 信息中添加 comments: true。

注意：Disqus的评论框设置改变后，只对新调用了评论接口的文章有效，对之前的文章无效，即旧文章评论框还是改动前的设置。

分类目录&标签

Jekyll 提供了分类（category）和标签（tag）的全局变量，我们可以在自己文章的 YAML 头信息里加上相关信息，如下：

---
layout: post
title:  "基于Jekyll的静态博客生成初级指南"
categories: 技术杂谈
tags: jekyll
---

如果想在文章正文显示这些分类和标签，那么在文章的模板中（_layout/post.html）相应位置添加调用即可。

不过我们可能会有这样的需求：需要在单独一个页面显示某个分类或者某个标签下所有的文章。这时，我们引入插件功能。

Jekyll 支持插件功能，你可以很容易的加入自己的代码。插件由 ruby 语言写成。

插件的安装很简单：在博客根下目录建立 _plugins 文件夹，插件放在这里即可。 Jekyll 运行之前，会加载此目录下所有以 *.rb 结尾的文件。

为了满足上面提到的需求，本站使用了 Github 用户 recurser 提供的插件 jekyll-plugins。 该插件提供了生成单个分类页面的功能，使用方法如下：

  1. 下载项目；
  2. 将 generate_categories.rb 复制到站点的 _plugins 文件夹中，将 _layout 中的 category_index.html 复制到站点 _layout 文件夹中，这两个文件分别是插件和样式；
  3. 在需要显示分类列表的地方添加如下代码
<ul>
	{\% for category in site.categories %}
	<a href="/categories/{\{category|first}\}/">
		<li>
			{\{ category|first }\} 
			|
			{\{ category|last|size}\}
		</li>
	</a>
	{\% endfor %}
</ul>

其中，site.categories存放站点的分类集合，category|first为分类名，category|last|size为该分类下文章数目。该分类所有文章列表的页面 URL 为 /categories/{\{category|first}\}/。

对于标签，只需将插件中的 category 关键字替换为 tag 即可。

更多插件，请查看官方文档。

部署方法

常用的有两种部署方法。

  • Github Pages 提供免费托管服务，参考这里的指南。
  • 可以部署到自己的 VPS 上，利用 rsync 命令将本地生成后的 _site 文件夹内容上传至网站根目录即可。示例：rsync -avz _site/. <name>@<IP>:/var/www/html/。

结语

Jekyll 还有很多功能诸如分页、数学公式的支持等，会在将来本站更新到这些功能时，另开一篇文章说明。

当然，还有很多其他非常优秀的静态网站生成器，这里列出了其中一部分。宋子明的这篇博文介绍了Nanoc使用方法，大家可以参考。