使用Jekyll构建你的网站

Jekyll是一个开源的静态网站生成器。你可以用Markdown编写内容，使用HTML/CSS进行结构和呈现，然后Jekyll会将它们编译成静态HTML。

近年来，静态网站生成器和JAMStack已经兴起。这是有充分理由的。只需要静态的HTML、CSS和Javascript来提供服务，不需要复杂的后端。没有后端意味着更好的安全性、更低的运营开销和更便宜的托管。这是一个三赢的局面！

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

安装Jekyll

Jekyll网站具有适用于Linux，MacOS和Windows的安装说明。安装后，快速入门指南将设置一个基本的Hello-World项目。

现在在浏览器中访问http://localhost:4000。你应该看到你默认的"awesome"博客。

图片来源

^{Ayush Sharma的截图, CC BY-SA 4.0}

目录结构

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

_posts: 你的博客文章。
_site: 最终编译的静态网站。
about.markdown: 关于页面的内容。
index.markdown: 主页的内容。
404.html: 404页面的内容。
_config.yml: Jekyll的站点范围配置。

创建新的博客文章

创建文章很简单。您所需要做的就是在_posts下创建一个新文件，使用正确的格式和扩展名，就一切准备就绪了。

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

---
layout: post
title:  "Welcome to Jekyll!"
date:   2021-08-29 11:28:12 +0530
categories: jekyll update
---

Jekyll使用上述元数据，你也可以自定义 key: value 键值对. 如果你需要一些灵感, 看看我网站的front matter. 除了 front matter, 你可以使用内置的 Jekyll 变量来定制你的网站。

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

---
layout: post
title:  "Check out ayushsharma.in!"
date:   2021-08-29 12:00:00 +0530
categories: mycategory
---
This is my first post.

# This is a heading.

## This is another heading.

This is a [link](http://notes.ayushsharma.in)

This is my category:

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

图片来源

^{Ayush Sharma的截图, CC BY-SA 4.0}

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

草稿

如果你尚未准备好发布内容，则可以创建一个新的_drafts文件夹。只有传递--drafts参数才能呈现此文件夹中的Markdown文件。

布局和包含

请注意我们的_posts文件夹中两篇文章的front matter，你将在Front Matter中看到layout: post。 _layout文件夹包含所有布局。你不会在源代码中找到它们，因为Jekyll默认加载它们。 Jekyll使用的默认源代码在这里. 如果你点击链接, 你会发现 post 布局使用了 default 布局. 默认布局包含代码 {{ content }}, 这是内容被注入的地方. 布局文件也包含 include 指令. 这些从includes 文件夹加载文件, 并允许使用不同的组件组成一个页面。

总而言之，这就是布局的工作方式-你在front matter中定义它们，并在其中注入内容。 Includes提供了页面的其他部分以组成整个页面。这是一种标准的Web设计技术-定义页眉，页脚，侧边栏和内容元素，然后在其中注入内容。这是静态站点生成器的真正力量-完全可以通过程序控制来组装网站，并最终编译为静态HTML。

页面

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

数据文件

数据文件位于_data目录中，可以是.yml，.json或.csv。例如，一个_data/members.yml文件可能包含

- name: A
 github: a@a

- name: B
 github: b@b

- name: C
 github: c@c

Jekyll在站点生成期间读取这些文件。你可以使用site.data.members访问它们。

<ul>
{ % for member in site.data.members %}
 <li>
 <a href="https://github.com/">
      { { member.name }}
 </a>
 </li>
{ % endfor %}
</ul>

永久链接

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

构建你的最终网站

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

你现在应该对Jekyll的功能以及主要组成部分的功能有了一个大致的了解。如果你正在寻找灵感，则官方的JAMStack网站有一些很棒的例子。