Jekyll 的机制、转换步骤和结构介绍

Jekyll 是一个转换器，用来生成网站，使用的是一种解释语言。

本文将从三个方面来介绍 Jekyll：机制、转换顺序（解释顺序）和项目的文件结构。在项目的文件结构中，将会讲述一下每个关键目录和文件的作用。

机制

Jekyll 通过在生成静态 HTML 输出时，渲染 Liquid、Markdown 和进行其他转换，从而将原始的一堆文本文件转换为静态网站。 所以Jekyll 的运行机制可以大致总结成：将使用 Jekyll 和 HTML、CSS 语句混合写成的源文件，转换成纯 HTML、CSS 语言文件，以此来生成静态网站。

因此，在工作流程上便是典型的“三步走”：

1. 设计、开发页面和调整配置文件；
2. 生成网站（使用jekyll build或jekyll server）；
3. 查看生成网站的效果。

转换顺序（解释顺序）

Jekyll 将按照以下顺序进行转换：

1. 通过查看你的文件来确定并赋予站点变量的值。站点变量有site、page等，官方文档为《Site VariablesPermalink》。
2. 处理页面文件的前事项中包含的的 Liquid 语句；
3. 将 Markdown 文件转换为 HTML 文件；
4. 将每个页面的内容放入 Layout 布局的{{ content }}标签中；
5. 最后，将转换生成的内容放入指定的目录下。以_开头的目录将不会出现在生成文件中。

项目结构

一个 Jekyll 项目的文件结构应该大致如下：

.
├── _config.yml
├── _data
│   └── members.yml
├── _drafts
│   ├── begin-with-the-crazy-ideas.md
│   └── on-simplicity-in-technology.md
├── _includes
│   ├── footer.html
│   └── header.html
├── _layouts
│   ├── default.html
│   └── post.html
├── _posts
│   ├── 2007-10-29-why-every-programmer-should-play-nethack.md
│   └── 2009-04-26-barcamp-boston-4-roundup.md
├── _sass
│   ├── _base.scss
│   └── _layout.scss
├── _site
├── .jekyll-cache
│   └── Jekyll
│       └── Cache
│           └── [...]
├── .jekyll-metadata
├── assets
│   ├── css
│   └── image
└── index.html或者index.md（需要在前事项中进行说明）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

下面依次来介绍一下每个文件夹和文件的作用：

• _config.yml：项目配置文件。
• _data：存放网站数据。Jekyll 将会自动加载此目录下的所有数据文件（后缀为.yml、.yaml、.json、.csv、.tsv），并且可以通过站点变量site.data访问这些文件。
  • members.yml：如果_data目录下有该文件，那么可以通过站点变量site.data.members访问文件内容。
• _drafts：该目录下存放未发布的博客的草稿。这些文件的名称不写日期，格式为：title.MARKUP。
  • begin-with-the-crazy-ideas.md和on-simplicity-in-technology.md是存放在_drafts目录下的草稿。
• _includes：该目录下存放的文件，由layout布局文件和帖子混合，以方便重用。比如导航栏等需要重复使用的源码。
  • footer.html：该文件便是用于重复使用的脚注源码。
  • header.html：该文件便是用于重复使用的眉头源码。
• _layouts：该目录存储页面模板。
  • default.html是默认的页面模版，也就是网站中几乎每个页面都会重复的部分。
  • post.html是用在帖子页面的模板。
• _posts：该目录存放的是帖子，搭配上post模板便可生成一个个帖子页面。该目录下的文件名应该按照YEAR-MONTH-DAY-title.MARKUP的格式，这样在记录标题的同时，还可以记录帖子的发布时间。
  • 2007-10-29-why-every-programmer-should-play-nethack.md便表示的是 2007 年 10 月 29 日发布的一篇名为《why every programmer should play nethack》帖子。
  • 2009-04-26-barcamp-boston-4-roundup.md便表示的是 2009 年 4 月 26 日发布的一篇名为《barcamp Boston 4 roundup》帖子。
• _sass：该目录下用于存放 Sass 文件（Sass 是一个 CSS 扩展语言，后缀有三种，分别是.sass、.scss或.coffee），可以将其处理成单个的 CSS 文件。该目录也可以直接命名为css。
  • _base.scss是用于生成基础 CSS 的 Sass 文件。
  • _layout.scss是用于生成布局 CSS 的 Sass。
• _site：该目录下便是默认生成的站点。
• .jekyll-cache：保留例如jekyll serve时生成的页面和标记（例如 Markdown）的副本，以便更快推送服务。可以使用--disable-disk-cache选项，或者在_config.yml中使用disable_disk_cache: BOOL来不生成副本。
• .jekyll-metadata：该文件帮助 Jekyll 跟踪上次构建之后，哪些文件没有被修改，哪些文件需要在下一次构建中重新生成。
• assets：该目录下存放网站需要的 CSS、JS 和图像文件。
  • css：该目录下存放网站使用的 CSS 文件（这个和前面的_sass不同，这个和一般的网站 CSS 文件是一个东西）
  • image：该目录下存放网站使用的图像文件。
• index.html或者index.md：这便是要生成的站点的首页面。

官方文档为：《Directory Structure》

希望能帮到有需要的人～