Jekyll 简介

Jekyll 是一个构建网站的框架 - 用 Markdown 编写您的内容，使用 HTML/CSS 进行结构和展示，然后 Jekyll 将其全部编译为静态 HTML。没有服务器。没有后端。别大惊小怪。

近年来，静态网站生成器和 JAMStack 已经起飞。并且有充分的理由。只需提供静态 HTML、CSS 和 Javascript，就不需要复杂的后端。没有后端意味着更好的安全性、更低的运营开销和更便宜的托管。双赢！

在本文中，我将讨论 Jekyll。Jekyll 使用 Ruby 引擎将用 Markdown 编写的文章转换为 HTML。Sass 允许将复杂的 CSS 规则合并到平面文件中。Liquid 允许对其他静态内容进行一些编程控制。

安装

[Jekyll 网站有安装说明] 适用于 Linux、macOS 和 Windows（https://jekyllrb.com/docs/installation/）。安装后，快速入门指南将设置一个基本的 Hello-World 项目。

现在http://localhost:4000在您的浏览器中访问。您应该会看到默认的“很棒”博客。

目录结构

默认站点包含以下文件和文件夹：

• _posts: 你的博客条目。
• _site: 最终编译好的静态网站。
• about.markdown：关于页面的内容。
• index.markdown: 主页的内容。
• 404.html：404 页面的内容。
• _config.yml: Jekyll 的全站配置。

创建新的博客条目

创建帖子很简单。您需要做的就是_posts使用正确的格式和扩展名创建一个新文件，一切就绪。

有效的文件名是2021-08-29-welcome-to-jekyll.markdown. 一个 post 文件必须包含 Jekyll 所说的 YAML Front Matter。它是包含元数据的文件开头的一个特殊部分。如果您看到默认帖子，您将看到以下内容：

YAML

---

布局：发布

标题：   “欢迎来到 Jekyll！”

日期:    2021-08-29 11 : 28 : 12 +0530

类别： jekyll 更新

Jekyll 使用上述元数据，您还可以定义自定义key: value对。如果您需要一些灵感，请查看我网站的前台内容。除了前面的问题，您还可以使用内置的 Jekyll 变量来自定义您的网站。

让我们创建一个新帖子。2021-08-29-ayushsharma.markdown在_posts文件夹中创建。添加以下内容：

YAML

---

布局：发布

标题：   “看看 ayushsharma.in！”

日期:    2021-08-29 12 : 00 : 00 +0530

类别：我的类别

---

这是我的第一篇文章。

# 这是一个标题。

## 这是另一个标题。

这是[链接] (http://notes.ayushsharma.in)

这是我的类别：

如果jekyll serve命令仍在运行，请刷新页面，您将看到下面的新条目。

恭喜您创建了您的第一篇文章！这个过程看起来很简单，但你可以用 Jekyll 做很多事情。使用简单的 Markdown，您可以生成帖子存档、代码片段的语法突出显示以及一个类别中帖子的单独页面。

草稿

如果您还没有准备好发布您的内容，您可以创建一个新_drafts文件夹。此文件夹中的 Markdown 文件仅绕过--drafts参数呈现。

布局和包括

请注意我们_posts文件夹中两篇文章的前面内容，您将layout: post在前面内容中看到。该_layout文件夹包含所有布局。您不会在源代码中找到它们，因为 Jekyll 默认加载它们。Jekyll 使用的默认源代码在这里。如果您点击链接，您将看到post布局使用了defaultlayout。默认布局包含{{ content }}注入内容的代码。布局文件还将包含include指令。这些从includes文件夹加载文件并允许使用不同的组件组成页面。

总体而言，这就是布局的工作方式 - 您在最前面定义它们，并将您的内容注入其中。Includes 提供页面的其他部分以组成整个页面。这是一种标准的网页设计技术——定义页眉、页脚、旁白和内容元素，然后在其中注入内容。这就是静态站点生成器的真正威力 - 完全编程控制将您的网站与最终编译成静态 HTML 的组合。

页面

并非您网站上的所有内容都是文章或博客文章。您将需要关于页面、联系页面、项目页面或投资组合页面。这就是 Pages 的用武之地。它们的工作方式与 Posts 完全一样，这意味着它们是带有前台的 Markdown 文件。但他们不会进入_posts目录。它们要么保留在您的项目根目录中，要么保留在它们自己的文件夹中。对于布局和包含，您可以使用与帖子相同的布局或创建新的帖子。Jekyll 非常灵活，您可以随心所欲地发挥创意！您的默认博客已经有index.markdown和about.markdown。随意自定义它们。

数据文件

数据文件住在_data目录中，并且可以.yml，.json或.csv。例如，一个_data/members.yml文件可能包含：

YAML

-姓名： A

github ： a@a

-姓名： B

github ： b@b

-姓名： C

 github ： c@c

Jekyll 在站点生成期间读取这些。您可以使用site.data.members.

HTML

< ul >

{ % 为 site.data.members 中的成员 %}

 <李>

 <一个 HREF = “https://github.com/” >

      { { 成员名字 }}

 </一>

 </ li >

{ % 结束为 %}

</ ul >

永久链接

您_config.yml的文件定义了永久链接的格式。您可以使用各种默认变量来组合您自己的自定义永久链接。

构建您的最终网站

该命令jekyll serve非常适合本地测试。但是一旦您完成了本地测试，您将需要构建要发布的最终工件。该命令jekyll build --source source_dir --destination destination_dir将您的网站构建到_site文件夹中。请注意，此文件夹在每次构建之前都会被清理，所以不要将重要的东西放在那里。获得内容后，您可以将其托管在您选择的静态托管服务上。

您现在应该对 Jekyll 的功能以及主要部分的功能有一个全面的了解。如果您正在寻找灵感，官方JAMStack 网站上有一些很棒的例子。

本文章由javascript技术分享原创和收集