16 July 2013

这个网站(Shengbin’s Blog)是采用Jekyll和GitHub Pages搭建的。GitHub Pages可以免费提供静态页面的托管服务,其后台由Jekyll支持。关于如何建立站点,网上能找到很多说明。 这里主要归纳一下Jekyll是如何工作的。

涉及的几项技术

Jekyll

http://jekyllrb.com
这是一个可以用来写博客的静态网站生成器。它接收一个特定结构的目录,读取、分析、处理其中的文件(包括md、html、txt、css、资源文件等),将其转换成一个静态站点。

Liquid

http://wiki.shopify.com/Liquid
这是一个模版语言。其中有两类标记:Output和Tag。Output用于把变量值输出,Tag用于逻辑控制(其中有些是Block Tag)。 Output例如”{{ site.author }}”, Tag例如”{% if site.author == ‘shengbin’ %}…{% endif %}”,”{% assign variable = value %}”(前者是Block Tag)。

Pygment

http://pygments.org
这是一个用Python实现的语法高亮的库。接收一段代码(Code),并指定其语言(Lexer)和输出文本格式(Formatter),生成代码高亮的带样式(Style)的输出文本(Text),如HTML。

Markdown

http://daringfireball.net/projects/markdown/
这是一种纯文本语言,用简单的标记来表示格式。它目的是为了方便地生成HTML,同时又比HTML更具备可读性和易写性。

YAML

http://yaml.org/
这是一个数据序列化的格式,类似JSON。它主要用来表示结构化的数值,如列表,键值对等。在Jekyll中,它的作用在于提供front matter(详情如下)。

网站生成过程

Front matter是放在一个文件最开头的几行文本。Jekyll对含有front matter的文本文件进行转换,对其他目录和文件则直接拷贝。 对于要转换的文本文件,例如每篇博客的md文件,进行如下处理:结合其中的front matter,将其嵌进模版布局文件中(Layouts),然后送给Liquid和Pygment。布局文件一般含有大量的Liquid标记, 提供基本的header和footer等结构,在其中填充内容后就成了一个页面。 该页面首先由Liquid进行处理,将其中的”{% %}”和”{{ }}”去除,得到HTML文本。这个过程中,有些Jekyll自定义的Tag,如”{% highlight ruby %}”,这些Tag需要Jekyll调用Liquid之外的工具。 例如,对于上述highlight的Tag,Jekyll交给Pygment进行处理,得到HTML文本。 总之,Jekyll会将含有front matter的文件中需要处理的部分转换为HTML,从而得到想要的格式或内容。另一个需要指出的功能在于,Jekyll扫描了整个目录结构,因此它获得了一些全局的信息,使之可以在一个文件中使用。 例如,所有页面的列表、同一个分类下的全部文章,等等。正是这种全局扫描使撰写博客、生成站点变得自动化了,非常方便。

Jekyll对其要扫描的目录结构有一定的要求。你可以根据Jekyll的文档说明自己建立这些目录,也可以使用jekyll new命令生成。此外,已经有人为使用Jekyll建立静态博客网站提供了基础,这就是Jekyll Bootstrap。你目前看到的这个站点就是以Jekyll Bootstrap为起点建成的。