构建 Jekyll 网站 – 第 1 部分（共 3 部分）：将静态网站转换为 Jekyll

以下文章来自来自 CloudCannon 的 Mike Neumegen 的客座文章。我和 Mike 谈论过做一个关于构建 Jekyll 网站的小系列文章，我当然很感兴趣，因为 Jekyll 很棒，而且关于静态网站生成器的更多教育内容也是件好事。完全公开，Mike 的公司 CloudCannon 是 Jekyll 之上的一个 CMS。在这个系列文章中，他将向您展示如何使用它，所以我要求将其作为一篇赞助文章。

静态网站生成器不再仅仅是开发者个人博客的工具。许多公司正在转向静态技术来构建面向公众的网站，包括 Netflix、GitHub 和 Atlassian。

Jekyll 是最受欢迎的静态网站生成器。它接受源文件并在前端生成静态页面网站，准备直接提供给用户。这与传统 CMS（例如 WordPress）的工作方式不同。WordPress 使用服务器端语言和数据库在用户请求时生成页面。

在本系列文章中，我们将介绍使用 Jekyll 开发网站的基础知识。首先将静态网站转换为 Jekyll，然后使用 CloudCannon 为非开发者添加 CMS，最后使用 Firebase 构建评论系统。

本教程创建了一个名为 Coffee Cafe 的虚拟咖啡馆网站。 这是一个演示。

安装 Jekyll

Jekyll 是一个命令行工具，需要在使用之前安装。

OS X

$ gem install jekyll -v 2.4.0

Ubuntu

$ apt-get install ruby ruby-dev make gcc nodejs
$ gem install jekyll -v 2.4.0

Windows

Windows 未获得官方支持，但 存在一种解决方法。

设置

如果您想跟着做，请 下载 Coffee Cafe 的源文件。

运行 Jekyll 来构建和提供网站。在您的终端中导航到该目录并运行

$ cd path/to/site/files
$ jekyll serve

jekyll serve 将静态网站构建到同一文件夹中的 _site 目录，并在本地启动一个 Web 服务器。在浏览器中导航到 http://localhost:4000 查看 Coffee Cafe。

Jekyll 布局

重复内容是纯粹静态网站最大的麻烦。Jekyll 布局解决了这个问题。布局是在 _layouts 文件夹中的一个 HTML 文件，其中包含内容占位符。

创建布局

在 Coffee Cafe 中，div.content 和 title 是每个页面上唯一更改的元素。创建布局的最简单方法是复制现有的 HTML 文件。将 index.html 复制到 _layouts/default.html，并将 div.content 的内容替换为 {{ content }}。

</header>

<div class="content">
    {{ content }}
</div>

<footer>

{{ content }} 是一个 Liquid 标签，它是 Jekyll 模板语言的一部分。

设置布局

要将 index.html 设置为使用默认布局，我们使用前置内容，这是一种在文件开头三条短线之间的 YAML 片段。

要设置 index.html 的布局

1. 更新文件的内容，使其仅包含 div.content 的内容
2. 在 front matter 中添加 layout: default

---
layout: default
---
<section class="hero">...</section>
<div class="container">...</div>
<section class="cta">...</section>

索引页面使用默认布局生成，并且文件内容位于 {{ content }} 的位置。网站应该看起来与之前相同。对所有其他 HTML 文件重复相同的过程。

使用页面变量

要自定义每个页面的 title，我们在每个页面上设置一个前置内容变量，并在布局中使用它。将 title 变量添加到 index.html

---
layout: default
title: Home
---
...

使用 Liquid 在 _layout/default.html 中输出变量

...
<title>{{ page.title }}</title>
...

现在 title 标签在页面之间发生了变化。这减少了网站中不必要的重复，因此您可以在一个地方进行未来的更改。

博客

添加文章的过程与添加页面几乎相同。文章是 _posts 文件夹中的 Markdown 或 HTML 文件，其文件名格式为 :year-:month-:day-:title.:extension。

撰写文章

文章的内容与页面相同，包含前置内容标头和文件的内容。创建一个名为 _posts/2016-01-01-what-is-coffee.md 的文件，然后添加前置内容，然后是文章的内容。

---
layout: post
title: What is Coffee?
category: Information
---
Coffee is a brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant. The Coffea plant is native to subtropical Africa and some islands in southern Asia. The plant was exported from Africa to countries around the world and coffee plants are now cultivated in over 70 countries, primarily in the equatorial regions of the Americas, Southeast Asia, India, and Africa. The two most commonly grown are the highly regarded arabica, and the less sophisticated but stronger and more hardy robusta. Once ripe, coffee beans are picked, processed, and dried. Green (unroasted) coffee beans are one of the most traded agricultural commodities in the world. Once traded, the coffee beans are roasted to varying degrees, depending on the desired flavor. Roasted beans are ground and brewed to produce coffee as a beverage.

Source / Read more [Wikipedia](https://en.wikipedia.org/wiki/Coffee).

这种标记和数据的分离是 Jekyll 理念的核心。这允许在网站的任何地方重复使用内容。

创建文章布局

上面的示例使用了名为 post 的新布局。此布局将扩展默认布局并添加特定于文章的元素，例如发布日期和类别。要实现此功能，我们在 Jekyll 中指定布局内的布局。将以下内容复制到 _layouts/post.html 中

---
layout: default
---
<div class="container">
  <h2 class="spacing">{{ page.title }}</h2>

  <div class="blog-post spacing">
    <p class="summary">{{ page.category }}<span class="date">{{ page.date | date: '%B %d, %Y' }}</span></p>
    {{ content }}
  </div>
</div>

使用 Liquid，我们输出每个前置 matter 里的变量，就像我们上面输出 title 一样。日期变量使用 Liquid 过滤器 进行格式化。

列出帖子

最后一步是在 blog.html 中列出博客帖子。使用 Liquid for 循环，为 site.posts 中的每个帖子创建一个元素。

---
layout: default
title: Blog
---
<div class="container">
  <h2 class="spacing">Blog</h2>

  <div class="blog-posts">
    {% for post in site.posts %}
      <div class="blog-post spacing">
        <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
        <p class="summary">
          {{ post.category }}
          <span class="date">
            {{ post.date | date: '%B %d, %Y' }}
          </span>
        </p>
        {{ post.excerpt }}
      </div>
    {% endfor %}
  </div>
</div>

Jekyll 提供了这里使用的内置变量，这些变量在前置 matter 中没有定义。

• url 是为帖子生成的 URL，通常为 /:categories/:year/:month/:day/:title.html，但也有 许多配置选项
• excerpt 是从帖子内容开头截取的一段文字。
• content 在这里没有使用，但它显示了帖子的全部内容，与布局中的 {{ content }} 完全相同。

全部完成

在短短几分钟内，我们就从一个静态站点变成了一个带有博客的 Jekyll 站点。这里有一个用于 最终的 Jekyll 咖啡馆站点 的下载链接。

敬请关注未来几天的更新，我们将通过一些强大的编辑功能和特性来升级此站点。