All Things Jekyll

2014.01.21 | Comments

Jekyll是一个简洁的、特别针对博客平台的静态网站生成器。它使用一个模板目录作为网站布局的基础框架,并在其上运行Textile、Markdown或Liquid标记语言的转换器,最终生成一个完整的静态Web站点,可以被放置在Apache或者你喜欢的其他任何Web服务器上。它同时也是GitHub Pages、一个由GitHub提供的用于托管项目主页或博客的服务,在后台所运行的引擎。

1. 安装

Jekyll使用动态脚本语言Ruby写成。请首先下载并安装Ruby,目前需要的ruby版本为1.9.1

在使用Jekyll之前,你可能想要对Ruby语言有一些初步了解(非必需)。

安装Jekyll的最好方式是通过RubyGems

gem install jekyll

Jekyll依赖以下的gems模块:liquid、fast-stemmer、classifier、directory_watcher、syntax、maruku、kramdown、posix-spawn和albino。它们会被gem install命令自动安装。

2. 模板引擎

2.1 RDiscount

如果你想用 RDiscount 取代 Maruku 作为你的Markdown标记语言转换引擎,只需确认安装:

gem install rdiscount

在你站点下的_config.yml文件中加入以下配置:

markdown: rdiscount

2.2 RedCloth

若要使用Textile标记语言,需要安装相应的转换引擎RedCloth

gem install RedCloth

2.3 Redcarpet

Redcarpet是由GitHub自己人开发的,一直以来它被用于在GitHub上渲染Markdown格式文本(也就是GitHub Flavored Markdown)。由于API兼容性的原因,Jekyll以前的版本并不支持Redcarpet。现在,Jekyll 0.12.0终于增加了对Redcarpet 2引擎的支持,只需安装:

$ gem install redcarpet

_config.yml中的Markdown引擎设置从:

markdown: rdiscount

改为:

markdown: redcarpet

就可以迁移到Redcarpet上了。

Redcarpet所支持的GitHub Flavored Markdown比起标准的Markdown语法来增加了不少便利之处,诸如围栏式代码块(Fenced code blocks)。

redcarpet 有很多很多的options可以设置,见:https://github.com/vmg/redcarpet

edcarpet 只和 markdown parser有关,如果需要设置高亮,可以使用pygments

你可能会用到的标记语言和模板引擎:

3. 基本结构

Jekyll从核心上来说是一个文本转换引擎。该系统内部的工作原理是:你输入一些用自己喜爱的标记语言格式书写的文本,可以是Markdown、Textile或纯粹的HTML,它将这些文本混合后放入一个或一整套页面布局当中。在整个过程中,你可以自行决定你的站点URL的模式、以及哪些数据将被显示在页面中,等等。这一切都将通过严格的文本编辑完成,而生成的Web界面则是最终的产品。

一个典型的Jekyll站点通常具有如下结构:

.
|-- _config.yml
|-- _includes
|-- _layouts
|   |-- default.html
|   `-- post.html
|-- _posts
|-- _site
`-- index.html

以下是每部分功能的简述:

  • _config.yml。保存Jekyll配置的文件。虽然绝大部分选项可以通过命令行参数指定,但将它们写入配置文件可以使你在每次执行时不必记住它们。
  • _includes。该目录存放可以与_layouts_posts混合、匹配并重用的文件。Liquid标签{ % include % }可以用于嵌入文件_includes/file.ext
  • _layouts。该目录存放用来插入帖子的网页布局模板。页面布局基于类似博客平台的一个帖子接一个帖子的原则,通过YAML前置数据定义。Liquid标签用于在页面上插入帖子的文本内容。
  • _posts。该目录下存放的可以说成是你的”动态内容”。这些文件的格式很重要,它们的命名模式必须遵循 YEAR-MONTH-DATE-title.MARKUP 。每一个帖子的固定链接URL可以作弹性的调整,但帖子的发布日期和转换所使用的标记语言会根据且仅根据文件名中的相应部分来识别。
  • _site。这里是Jekyll用以存放最终生成站点的根路径位置。也许把它加到你的 .gitignore 列表中会是个不错的主意。

4. 运行、部署

通常直接在命令行下使用可执行的Ruby脚本 jekyll ,它可以从gem安装。如果要启动一个临时的Web服务器并测试你的Jekyll站点,执行:

jekyll --server

然后在浏览器中访问 http://localhost:4000http://0.0.0.0:4000 。当然这里还有其他许多参数选项可以使用。

由于Jekyll所做的仅仅是生成一个包含HTML等静态网站文件的目录(_site),它可以通过简单的拷贝(scp)、远程同步(rsync)、ftp上传或git等方式部署到任何Web服务器上,例如github、gitcafe、qiniu。

5. 一些技巧

使用表格

使用redcarpet模板引擎,通过gem安装redcarpet并修改_config.yml

markdown: redcarpet
redcarpet: 
    extensions: ["tables"]

在 Markdwon 文件中可以依据以下语法进行书写

|head1 head1 head1|head2 head2 head2|head3 head3 head3|head4 head4 head4|
|---|:---|:---:|---:|
|row1text1|row1text3|row1text3|row1text4|
|row2text1|row2text3|row2text3|row2text4|

然后添加如下样式:

table {
margin-bottom: 20px;
max-width: 100%;
border-collapse: collapse;
transition: all 0.3s;
border: 1px solid rgba(0,0,0,0.167);
}
table {
border-collapse: collapse;
}
table thead>tr {
background-color: rgba(249,249,249,0.9);
}
table thead tr th {
border: 1px solid rgba(0,0,0,0.167);
border-top: 0px none;
border-bottom-width: 2px;
vertical-align: bottom;
padding: 8px;
}
table tbody tr td {
border: 1px solid rgba(0,0,0,0.167);
vertical-align: top;
padding: 8px;
}

6. 其他静态网站生成器

如果想要尝试一些其他的静态网页生成器,这里是一个简略的列表:

  • Ruby
  • Jekyll
  • Bonsai 一个非常简单(但实用)的小脚本
  • Webgen 一个较复杂的生成器
  • Python
  • Hyde Jekyll的Python语言实现版本
  • Cyrax 使用Jinja2模板引擎的生成器
  • PHP
  • Phrozn PHP语言实现的静态网站生成器
  • nodejs
  • hexo一个台湾人实现的生成器
  • papery 纯nodejs编写
  • DocPad static web sites generator using Node.js

更详细的列表和介绍请参见:

7. 资源


原创文章,转载请注明: 转载自JavaChen Blog,作者:JavaChen
本文链接地址:http://blog.javachen.com/2014/01/21/all-things-about-jekyll.html
本文基于署名2.5中国大陆许可协议发布,欢迎转载、演绎或用于商业目的,但是必须保留本文署名和文章链接。 如您有任何疑问或者授权方面的协商,请邮件联系我。