介绍
Jekyll 是一个静态站点生成器，它提供了内容管理系统 (CMS) 的一些好处，同时避免了此类数据库驱动站点引入的性能和安全问题。 它是“博客感知”的，具有处理按日期组织的内容的特殊功能。 Jekyll 非常适合需要离线工作、喜欢使用轻量级编辑器而不是 Web 表单来维护内容以及希望使用版本控制来跟踪其网站更改的人。
在本系列的 第一部分 中，我们在 Ubuntu 16.04 服务器上安装了 Jekyll 及其依赖项，在我们的主目录中创建了一个开发站点，并确保防火墙允许访问该站点的流量。
在本教程中，我们将使用上一篇指南中自动生成的内容来探索 Jekyll 如何将源文件转换为静态内容，从而更轻松地创建和维护内容。
先决条件
要学习本教程，您需要完成前面的指南，如何在 Ubuntu 16.04 上设置 Jekyll 开发站点。 我们建立在我们在该教程中所做的工作的基础上，没有完成它，示例不会匹配。
完成第 1 部分后，您就可以开始了。
主页
让我们在主页上开始我们的探索，它由四个不同的源文件组合而成。 我们将逐个浏览这些文件，看看它们如何协同工作以生成静态主页。
如果您在完成第一个教程后退出了开发 Web 服务器，请立即重新启动它：
cd ~/www jekyll serve --host=203.0.113.0
然后，在网络浏览器中访问您的网站。 下面的主页截图已被修改，以突出显示配置和信息源。
配置设置：_config.yml
Jekyll 的大部分功能来自于在单个源文件 _config.yml 中设置将在静态网站的许多地方重复的信息的能力
通过运行 jekyll new 创建的默认 _config.yml 包含五个在主页上可见的设置：
title: 你很棒的标题 email: your-e-mail@domain.com description: 为你的新网站写一个很棒的描述这里… twitter_username: jekyll github_username: jekyllrb
此信息会自动包含在我们创建的所有其他页面和帖子中。 当我们需要更新其中一项设置时，我们可以在此文件中进行更改，它将随处更新。 为了观察这一点，我们将更改这些值。
在新终端中打开文件：
nano ~/www/_config.yml
我们将设置更改为以下值：
title: Sammy's Blog email: sammy@digitalocean.com description: > Welcome to my blog! github_username: DigitalOcean twitter_username: DigitalOcean
在开发过程中，我们将不理会 url 和 baseurl，并在需要部署我们的站点时进行任何调整。
要查看配置文件中所做的更改，我们需要使用 CTRL-C 停止 Web 服务器，然后重新启动它：
jekyll serve --host=203.0.113.0
注意： 确保 description 中的每一行至少缩进一个空格，否则你会遇到错误：“在扫描一个简单的键时找不到预期的 ':' 19 栏 1`。
完成后，保存并退出编辑器。 然后，在您的网络浏览器中重新加载该页面。 根据您的网络浏览器的本地缓存设置，您可能需要 Shfit+Reload 才能看到更改，这些更改应显示在下面突出显示的两个区域中：
在 _config.yml 文件中可以进行更多自定义，但现在我们将继续下一个源文件，并注意我们所做的更改如何在站点的其余部分可见。
页数：about.md
点击右上角的 About 链接。 我们在配置文件中所做的更改在此处可见，位于“关于”页面的主要内容上方和下方。
该中心内容和标题中的链接文本存储在包含四种内容的 about.md 文件中：
1. 杰基尔前线顶部的块about.md以三个破折号开头和结尾的文件是 Jekyll 的 Front Matter。 它必须是文件中的第一件事，当它出现时，它会向 Jekyll 发出信号，表明应该解析文件。 它通常在行之间包含有效的 YAML 以利用预定义的变量，但它也可以是空白的。 空白的 Front Matter 块有时对 CSS 文件或您不需要设置任何值但想要访问变量的其他地方很有用。
“关于”页面在其 Front Matter 中设置了三个值：
--- layout: page title: About permalink: /about/ ---
布局： 布局消除了页眉、页脚和菜单等重复内容，使网站更易于维护。 Jekyll 提供了三种布局：default、page 和 post。 每一个都有特殊的特点。 在这种情况下，标题值的菜单链接“关于”出现在标题导航中，因为布局设置为“页面”。
Title： 除了作为页眉导航中的链接文本外，还作为可见的页面标题，用Heading 1标签格式化，作为页面的<title>，这是出现在浏览器栏上的文本以及页面被添加书签时的文本。
Permalink: Jekyll 自动从这些确定页面 URL 的源文件生成目录和 HTML 文件。 永久链接允许您覆盖默认行为。 在这里，它导致页面 URL 为 http://203.0.113.0:4000/about/ 而不是 http://203.0.113.0 :4000/about.html。
2. 可见文本页面内容在 Front Matter 之后开始。 这里的文字出现在页面上，例如“This is the base Jekyll 3. 主题。”
3. 降价 Markdown 是主页面内容的一部分，控制着内容的格式。 它将被解析为静态站点的 HTML。 内容编写者通常比 HTML 更喜欢 Markdown，因为它被设计为更易于阅读和编写。
4. 液体模板指令 Jekyll 使用 Liquid 作为其模板引擎以包含动态元素。 Liquid 指令出现在大括号之间，例如 {% include icon-github.html username="jekyll" %}。
让我们对此页面进行一些更改，看看该网站是如何受到影响的。
更改标题
我们将做一个小改动，将页面称为“关于我”而不是“关于”：
nano ~/www/about.md
~/www/about.md
--- . . . title: "About me" . . . ---
完成后，保存并退出文件。
更改将出现在三个位置，并且菜单链接将在所有站点页面上更新：
添加新页面
接下来，我们将向站点添加一个“联系”页面，并使用一些降价来包含图像。
我们将首先创建一个 assets 目录来保存我们的图像：
mkdir ~/www/assets
然后我们将使用 wget 将图像传输到我们的机器。 -O 标志会将其定向到我们创建的目录。 该标志要求我们还指定文件名，因此我们将：
wget -O ~/www/assets/postcard.jpg https://assets.digitalocean.com/articles/jekyll-1604/postcard.jpg
一旦图像在本地就位，我们将创建新页面：
nano ~/www/contact.md
~/www/contact.md
--- layout: page title: "Send me a postcard!" --- DigitalOcean\\ Attn: Sammy Shark\\ 101 Avenue of the Americas\\ New York, NY 10013 
让我们仔细看看降价。 首先，每行末尾的双斜杠 \\ 强制返回而不增加额外的空格。 其次，用这个markdown![]()显示图片。 感叹号表示后面的链接是图像。 如果未加载图像或访问者正在使用屏幕阅读器，则括号包含要使用的替代文本。 括号包含指向图像文件的链接。 您可以在 kramdown 网站 上了解更多关于 Jekyll 的默认降价样式。
保存并退出文件，然后重新加载页面。 将出现新链接，并根据文件名按字母顺序排列。
有了新文件，我们文件结构的顶部现在看起来像这样：
├── about.md ├── assets │ └── postcard.jpg ├── _config.yml ├── contact.md
实际的网页页面如下所示：
单击站点标题以返回主页，您应该在其中找到标题导航中包含的新链接。
注意： 在联系页面上有一个交互式网络表单是很常见的。 Jekyll 不提供任何内置的表单处理 ，但您可以使用基于云的服务，例如 Disqus、Formspree 或 FormKeep，或托管您自己的。
帖子：_posts/YYYY-MM-DD-welcome-to-jekyll.markdown
点击“Welcome to Jekyll”链接查看提供的示例博客文章。
_posts 目录包含特殊命名的文件，格式为 YYYY-MM-DD-Words-in-Title。 如果您的帖子未以这种格式命名，则不会被解析。 如果文件名有一个将来设置的日期，则不会为静态站点解析页面。 使用未来日期 命名文件是否 允许将命名方案与 cron 或其他自动化策略结合使用，以在特定日期和时间之后发布帖子。 安装自定义 转换器 时，发布文件可以以 .markdown、.md、.html 或其他扩展名结尾。
帖子以 Front Matter 开头。 每个帖子文件都需要 Front Matter，因为它包含对网站创建至关重要的日期等值。
~/www/_posts/2016-08-31-welcome-to-jekyll.markdown
--- layout: post title: "Welcome to Jekyll!" date: 2016-08-31 17:35:19 +0000 categories: jekyll update ---
布局： 虽然布局可能完全不同，但帖子的布局与默认布局非常相似。 HTML <head> ... </head> 部分的页面内容不同，<div class="wrapper"> ... </div> 标签之间的内容不同，但其余部分相同。 页面本身唯一可见的区别是标题下方自动包含 Front Matter 的日期值。
标题： 标题在博客文章本身上显示为标题 1，在索引页面上显示为标题 2。
日期： 此处设置的日期将决定主页和帖子本身显示的日期。 正是这个日期也将决定帖子的 URL，我们稍后会更详细地探讨。
注意： Front Matter 中的日期与文件名的开始日期没有直接关系。 文件名必须以正确格式的日期开头才能被解析。 如果它以将来的日期命名，则在该日期之后的下一个站点构建过程之前不会对其进行解析。 同时Front Matter date决定了文件为解析后的目录结构，作为首页和帖子显示的值。
- Categories： 类别是特定于帖子的，用于按主题对内容进行分组。 默认情况下，它们在页面上不可见，但可以将它们添加到自定义模板中。
剩余文件
到目前为止，我们已经仔细查看了三个文件，即 _config.yml、about.md 和 _posts/YYYY-MM-DD-welcome-to-jekyll.markdown。 以下是对浏览器不太直接可见的文件的简要概述：
main.scss：Jekyll 使用了超棒的语法样式表 (Sass)，每次重建网站时它都会将其编译成常规的 CSS。 .sass 文件位于 css 目录中。
feed.xml：Jekyll 提供一个 RSS 提要，每次重建静态站点时也会构建，以允许站点聚合帖子并为用户提供订阅方式。
Gemfile 和 Gemfile.lock：Gemfile 列出了使用 bundle 命令安装的 Jekyll 插件。 安装它们时，会生成 Gemfile.lock 文件以跟踪已安装插件的特定版本。
在这四个文件中，只有 CSS 会影响内容的呈现。 如果你对 Jekyll 和 Sass 特别感兴趣，可以从 Jekyll 的 Sass 集成示例站点。
结论
在本教程中，我们探索了 Jekyll 在创建新站点时提供的样板内容，并进行了一些更改以演示源文件如何在网页上组合在一起。 通过在一个地方设置值，可以通过一次编辑来更新它们，而不必更改每个文件，从而使站点更易于维护。 它还允许帖子动态包含在主页上，因此您不必担心手动更新另一个页面以显示新帖子。
在 第 3 部分 中，我们将研究静态站点的文件结构，该结构如何默认反映在我们的页面和帖子的 URL 中，以及如何覆盖默认行为。
