Jekyll教程：如何创建一个静态的网站

在今天的数字时代，拥有一个网站对于建立一个在线存在、推广你的品牌和接触潜在客户是至关重要的。然而，创建一个网站可能是一项艰巨的任务。

这就是静态网站生成器（SSG）的作用–它们使创建漂亮、快速加载的网站变得容易，而不需要复杂的后台系统或数据库。

在这篇文章中，我们将向你介绍流行的SSG之一–Jekyll，了解它是如何工作的，以及你如何用它创建一个静态网站。

1. 什么是Jekyll？
2. 如何安装Jekyll
3. Jekyll的命令和配置
4. 如何在Jekyll上创建一个静态网站？
5. 如何预览一个Jekyll网站
6. 如何定制一个Jekyll网站
7. 如何在Jekyll网站上添加主题
8. 如何在Jekyll网站上添加内容

用Jekyll建立的博客网站

如果你想仔细看看，你可以访问这个项目的GitHub仓库。

什么是Jekyll？

Jekyll是一个免费的开源SSG，它是在Ruby编程语言上建立和运行的。你不需要了解Ruby的工作原理来使用Jekyll，你只需要在你的机器上安装Ruby。

Jekyll可以用来建立各种类型的静态网站，如个人博客、投资组合网站和文档网站，而不需要数据库或使用WordPress等内容管理系统。

以下是Jekyll在SSG中脱颖而出的原因：

1. 易于使用：Jekyll使用纯文本文件和markdown语法来创建和管理内容，这意味着你不需要有HTML或CSS的知识就可以开始使用。
2. 快速和安全：Jekyll不处理任何服务器端的数据库或脚本，这意味着漏洞和攻击的风险较小。它生成静态HTML文件，使你的网站难以置信地快速和安全。
3. 可定制：Jekyll是高度可定制的，允许你使用布局和模板，甚至创建插件来扩展功能。
4. 易于部署：Jekyll生成的静态HTML文件可以部署到网络服务器或主机提供商，而不需要动态内容管理系统。
5. 有大型社区的支持：Jekyll有一个庞大的用户和开发人员社区，这意味着如果你需要帮助或想扩展你的网站功能，可以获得大量的资源。

如何安装Jekyll

你首先需要在你的机器上安装Ruby，然后才能继续安装Jekyll，正如Jekyll文档中所述。

如何在macOS上安装Jekyll

默认情况下，Ruby预装在macOS中，但不建议你使用这样的Ruby版本来安装Jekyll，因为它很旧。例如，在苹果最新的操作系统Ventura上，预装的Ruby版本是2.6.10，其中最新的版本是3.1.3（截止到本文写作时）。

要解决这个问题，你需要使用chruby等版本管理器正确安装Ruby。你需要先在你的Mac上安装Homebrew，在终端使用以下命令：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

一旦安装成功，退出并重启终端，然后通过运行这个命令检查Homebrew是否准备好了：

brew doctor

如果你得到 “Your system is ready to brew“，你现在可以继续用下面的命令安装 chruby 和ruby-install：

brew install chruby ruby-install

你现在可以使用你刚刚安装的 ruby-install 软件包安装ruby的最新版本，即3.1.3：

ruby-install 3.1.3

这将需要几分钟的时间。一旦成功，用下面的命令将你的shell配置为自动使用 chruby ：

echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc
echo "chruby ruby-3.1.3" >> ~/.zshrc

现在你可以退出并重新启动你的终端，然后通过运行这个命令检查一切是否正常：

ruby -v

它应该显示ruby 3.1.3。

现在你的机器上已经安装了Ruby的最新版本。现在你可以继续安装最新的Jekyll和bundler gem：

gem install jekyll bundler

如何在Windows上安装Jekyll

要在Windows机器上安装Ruby和Jekyll，你需要使用RubyInstaller。这可以通过从RubyInstaller Downloads下载并安装Ruby+Devkit版本，并使用默认的安装选项来完成。

在安装向导的最后阶段，运 ridk install 步骤–它是用来安装宝石的。通过RubyInstaller文档阅读更多内容。

从选项中，选择MSYS2和MINGW开发工具链。打开一个新的命令提示符窗口，使用下面的命令安装Jekyll和Bundler：

gem install jekyll bundler

如何验证Jekyll的安装是否正确

为了验证Jekyll是否正确地安装在你的机器上，请打开你的终端并运行以下命令：

jekyll -v

如果你看到版本号，说明Jekyll已经安装并在你的系统上正常工作。你现在可以使用Jekyll了!

Jekyll的命令和配置

在我们开始用Jekyll创建和定制静态网站之前，最好先熟悉一下它的各种CLI命令和配置文件参数。

Jekyll CLI命令

下面是一些常用的Jekyll CLI命令。你不需要记住它们，只需要知道它们的存在，当你注意到它们在本文后面的用法时，可以随时回头查看它们的作用。

• jekyll build：生成_site目录下的静态网站。
• jekyll serve：构建网站并在你的本地机器上启动一个Web服务器，允许你在浏览器中预览网站，http://localhost:4000。
• jekyll new [site name]：在一个新的目录中创建一个新的Jekyll站点，并指定站点名称。
• jekyll doctor：输出任何可能存在的配置或依赖性问题。
• jekyll clean：删除_site目录，它是生成的站点文件的存放地。
• jekyll help：输出Jekyll的帮助文档。
• jekyll serve --draft：生成并提供你的Jekyll站点，包括_drafts目录中的任何文章。

你也可以在这些命令中附加一些选项。请参阅Jekyll文档中的Jekyll命令和选项的完整列表。

Jekyll配置文件

Jekyll配置文件是一个名为_config.yml的YAML文件，包含Jekyll网站的设置和选项。它用于配置你网站的各个方面，包括网站的标题、描述、URL和其他设置。

下面是一些最常用的配置选项：

• title：你的网站的标题。
• description：你的网站的简短描述。
• url：你的网站的基本URL。
• baseurl：你的网站的子目录，如果它被托管在一个域名的子目录中。
• permalink：你的文章和页面的URL结构。
• exclude：要从网站生成过程中排除的文件或目录的列表。
• include：在网站生成过程中要包括的文件或目录的列表。
• paginate：使用分页时每页要显示的文章数量。
• plugins：要加载的Jekyll插件的列表。
• theme：默认情况下，这被设置为 minima。你可以通过设置它的名字和实施我们将在本文后面了解的其他设置来使用任何其他主题。

你也可以在你的配置文件中创建自定义变量，并在你的网站的模板、布局和包括中使用它们。例如，你可以创建一个名为 author_name 的变量，然后在你的模板中这样使用它：{{ site.author_name }}。

要修改你的Jekyll配置文件，请在文本编辑器中打开Jekyll项目目录中的_config.yml文件并进行修改。

注意：你对配置文件所做的任何修改都会在你下次用 jekyll build 或 jekyll serve 生成网站时生效。

如何在Jekyll上创建一个静态网站？

现在你已经在你的机器上安装了Jekyll，现在可以用一个命令在几秒钟内创建一个Jekyll静态网站。打开你的终端，运行这个命令：

jekyll new joels-blog

确保你把 “joels-blog “替换成你喜欢的网站名称。

Jekyll静态网站

接下来，导航到网站文件夹。你会注意到一个基本的Jekyll网站结构，包括像这样的目录和文件：

├── _config.yml
├── _posts
├── Gemfile
├── Gemfile.lock
├── index.md
└── README.md

以下是这些目录和文件的用途：

• _config.yml：Jekyll配置文件，包含你的网站的设置和选项。
• _posts：一个包含你的网站内容的目录（可以是博客文章）。这些可以是Markdown或HTML文件，有特定的文件命名规则：YEAR-MONTH-DAY-title.MARKUP。
• Gemfile和Gemfile.lock：捆绑程序使用这些文件来管理你的网站所依赖的Ruby gems。
• index.md：你网站的默认主页，由Markdown或HTML文件生成。

但是还有更多的文件/文件夹可以用来定制你的Jekyll网站。这些文件夹包括：

• _includes：一个包含可重复使用的HTML片段的目录，可以包含在你的布局和页面中。如导航条、页脚等。
• _layouts：一个包含HTML布局模板的目录，它定义了你的页面结构。
• assets：一个包含你的网站所使用的任何文件的目录，如图片和CSS文件。
• _sass：一个包含Sass文件的目录，可用于为你的网站生成CSS。

这个文件结构为Jekyll项目提供了一个坚实的基础，但你可以根据需要修改它以适应你的项目的具体需要。

快速入门选项：使用我们的GitHub模板

作为使用Jekyll CLI启动项目的替代方案，你可以使用这个在GitHub上的 “Hello World” Jekyll模板创建一个Git仓库。选择Use this template > Create a new repository，将启动代码复制到你自己的GitHub账户中的一个新仓库。

如何预览一个Jekyll网站

你现在有了一个Jekyll网站，但在你可能开始定制它以满足你的需要之前，你如何预览该网站，看看它是什么样子的？打开你的终端，进入你的项目目录，然后运行以下命令：

jekyll serve

这将产生一个_site文件夹，其中包括从你的项目中产生的所有静态文件。它还将启动Jekyll服务器，你可以通过http://localhost:4000，预览你的网站。

如果你在你的浏览器中访问这个URL，你应该看到你的Jekyll网站和minima主题：

默认外观

如何定制一个Jekyll网站

当你用Jekyll创建一个网站并使用一个主题时，你可以根据你的需要来定制网站。例如，你可能想添加新的页面，改变页面的布局，或者调整某些项目的显示方式。所有这些都可以通过Jekyll实现。

前面的内容如何在Jekyll中工作

当你打开你的项目文件夹中的每个页面或博客文章时，你会注意到页面顶部的三个破折号（-）内有一个信息块。这被称为front matter。

它是Jekyll中使用的一种元数据格式，用来存储页面或文章的信息–它可以用YAML或JSON编写。

---
title:  "Welcome to Jekyll!"
description: "Introduction to what Jekyll is about and how it works"
date:   2023-03-07 16:54:37 +0100
---

在上面的例子中，前面的内容包括一些变量，如文章的标题、描述和日期。这些变量可以在页面或文章的布局或内容中使用。

Jekyll会解析前言，并使用它来为你的网站生成输出的HTML。你可以使用前述内容来指定各种选项，如布局、固定链接、发布状态等。

如何配置默认的front matter

你也可以配置默认前题，这样你就不需要为类似的文件定义相同的前题。例如，如果每篇博客文章使用相同的作者姓名和布局。你可以在你的_config.yml文件中定义一个自定义的前置事项，以服务于你所有的博客文章。

它的结构方式有点复杂，但这里是它的模样。把这个粘贴在你的_config.yml文件的最后一个配置下面：

defaults:
-
scope:
path: "posts" # empty string means all files
values:
layout: "post"
author: "John Doe"

当你现在运行 jekyll serve 命令时，你会注意到，即使你不在每个文章上定义版面和作者，你仍然可以在文件中访问它们。

注意：当你不定义路径时，所有的文件都将使用定义的前题值。

在Jekyll中创建页面

当你在项目的根目录下创建一个文件时，它被认为是一个页面。你给文件起的名字多数时候是用在URL中的，所以你要给每个页面文件起一个能引起共鸣的名字。

例如，如果你想创建一个网址为https://example.com/about的页面，就创建一个名为about.html或about.md的文件。文件的扩展名决定了页面内容要使用的标记语言（HTML或Markdown）。

一旦你创建了一个文件，添加适当的前题和内容。保存文件并在浏览器中刷新你的Jekyll网站。现在应该可以通过文件名对应的URL访问新的页面。

前言和内容

在Jekyll中创建Layouts

你可以使用Layouts来定义你网站的页面和文章的结构和设计。这通常主要是通过HTML代码完成的。你可以在页面的元数据中加入页眉、页脚、元信息。

第一步是在你项目的根目录下创建一个_layouts文件夹。然后为每个布局创建一个文件–该文件应该有一个描述性的名字，以反映布局的目的。例如，你可以创建一个名为page.html的文件来定义你网站上所有页面的布局。

最好是用HTML或其他标记语言来定义布局的整体结构。

你可以为任何将被插入布局的动态内容包括占位符，如页面标题、内容和元数据。例如，你可以创建一个基本的布局，包括一个页眉、页脚和内容区，像这样：

<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</title>
</head>
<body>
<header>
<!-- Navigation menu goes here -->
</header>
<main>{{ content }}</main>
<footer>
<!-- Footer content goes here -->
</footer>
</body>
</html>

在这个例子中， {{ page.title }} 和 {{ content }} 占位符将被替换为被渲染的页面的实际标题和内容。

在这一点上，任何在前台使用page作为布局值的页面或文章都会有这种布局。你可以在_layouts文件夹中创建多个布局，并以你喜欢的方式设计你的布局。你也可以通过定义一个具有类似名称的布局来覆盖一个主题的布局。

_includes文件夹如何在Jekyll中工作

_includes文件夹包含可重复使用的代码片段，你可以将其包含在网站的不同部分。例如，你可以在你的includes文件夹中创建一个navbar.html文件，并使用 {% include %} 标签将其添加到page.html布局文件。

<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }} </title>
</head>
<body>
<header>{% include navbar.html %} </header>
<main>{{ content }} </main>
<footer>
<!-- Footer content goes here -->
</footer>
</body>
</html>

在构建时，Jekyll会用navbar.html的内容替换该标签。

_includes文件夹可以包含任何类型的文件，如HTML、Markdown或Liquid文件。其主要目的是通过允许你在你的网站上重复使用代码来保持你的代码DRY（Don’t Repeat Yourself）。

循环浏览Jekyll中的文章

你可能想创建一个专门的博客页面来存放你的所有博客文章，这意味着你想获取你网站上的所有文章并循环浏览它们。在Jekyll中，使用 {% for %} 标签很容易实现。

任何Jekyll网站上的所有文章都存储在 site.post 变量中。你可以循环浏览并使用 {{post.title }}} 液体变量来输出每个文章的标题。液态变量来输出每个文章的标题，这种方式：

{% for post in site.posts %}
<h2>{{ post.title }}</h2>
{% endfor %}

你还可以使用额外的Liquid变量来输出每个文章的其他信息，如文章的日期或作者：

{% for post in site.posts %}
<h2>{{ post.title }}</h2>
<p>Published on {{ post.date | date: "%B %-d, %Y" }} by {{ post.author }}</p>
{% endfor %}

请注意，在上面的例子中，date Liquid过滤器将每个文章的日期格式化为更容易让人理解的格式。

现在，你对可以对你的Jekyll网站进行的一些基本格式化有了一个概念。但你可能不需要使用所有这些来从头开始建立一个Jekyll网站，因为你可以随时搜索符合你需要的主题，并将其添加到你的Jekyll网站。

如何向Jekyll网站添加主题

有各种易于添加的主题，但好在每个主题在GitHub上的ReadMe文件中都有关于如何安装它们的明确信息。你可以决定克隆主题，如果是基于gem的主题，这个过程就比较简单。

在这篇文章中，你将安装一个博客主题，并对其进行定制，以便部署一个博客网站。这是一个基于基因的主题，你可以在GitHub上获取其源代码和说明。

要添加一个基于基因的主题，请打开你网站的Gemfile，添加你要使用的主题的基因。我们将使用的主题是jekyll-theme-clean-blog。你可以在Gemfile中替换默认的minima主题：

gem "jekyll-theme-clean-blog"

在你的网站目录中运行 bundle install 命令，以安装主题的gem及其依赖项。

在你网站的_config.yml文件中，添加以下一行来指定你要使用的主题：

theme: jekyll-theme-clean-blog

在这一点上，你的主题已经可以使用了。

你要删除_layouts目录下的所有布局，以避免它们覆盖主题的布局。

然后你可以在主题的文档中找到你的文件的布局名称。例如，如果你使用的是jekyll-theme-clean-blog主题，index.html文件的布局名称是home，其他页面是page，而所有文章是post。

最后，运行 jekyll serve ，使用新的主题建立和服务你的网站。

Jekyll博客静态网站

这就是了! 你的Jekyll站点现在应该使用你添加的基于宝石的新主题。你可以通过在你的站点的_layouts目录中修改其布局来进一步定制该主题。

定制一个Jekyll主题

你现在已经把你的主题添加到了你的网站上，下一步的行动将是定制网站，以满足你的需求，并按照它的意图来工作。例如，每个页面和文章的图片都没有显示，而是显示一个灰色的背景。

你可以通过在每个页面和文章中添加一个前台选项，指定你希望使用的图片的路径来解决这个问题。在Jekyll中，图像等资产被存储在assets文件夹中。在这个文件夹中，你可以决定创建子文件夹来组织你的图片。

图像文件夹

现在，你可以为正面内容块添加一个背景选项，并为其图片添加一个路径。例如，在 “关于” 页面上，这就是正面内容：

---
layout: page
title: About
description: This is the page description. 
permalink: /about/
background: '/assets/images/about-page.jpeg'
---

对所有页面和文章都这样做，你的页面将看起来像这样：

背景图片显示在关于页面上

你可以做的另一个定制是调整导航栏选项。例如，你可能不需要联系页面，这意味着你应该从导航栏选项中删除其链接。你可以通过研究主题的源代码来做到这一点，注意到负责导航链接的文件，并在你的项目中完全复制该文件，删除你不需要的选项。

导航链接在_includes文件夹的navbar.html文件中。你可以创建这个文件，从你的源代码中粘贴代码，并删除联系选项或添加任何你想要的新选项。

自定义Jekyll主题的导航条

当你保存你的项目时，你会发现导航选项将被定制：

完全定制的导航条

最后，最后一个定制将是创建一个文章页面，它将容纳你所有的博客文章–这意味着你将在这个页面上循环浏览所有的文章。

创建一个文件，post.html并粘贴以下代码：

---
layout: page
title: Blog
description: Expand your knowledge and stay informed with our engaging blog posts.
background: '/assets/images/blog-page.jpeg'
---
{% for post in site.posts %}
<article class="post-preview">
<a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}">
<h2 class="post-title">{{ post.title }}</h2>
{% if post.subtitle %}
<h3 class="post-subtitle">{{ post.subtitle }}</h3>
{% else %}
<h3 class="post-subtitle">
{{ post.excerpt | strip_html | truncatewords: 15 }}
</h3>
{% endif %}
</a>
<p class="post-meta">
Posted by {% if post.author %} {{ post.author }} {% else %} {{ site.author
}} {% endif %} on {{ post.date | date: '%B %d, %Y' }} · {% include
read_time.html content=post.content %}
</p>
</article>
<hr />
{% endfor %}

请随意调整背景图片以反映你保存的图片。在上面的代码中，你正在循环浏览所有的文章，以显示这个页面上的所有文章。这就是保存后的文章页面的样子。

文章页面

如何向Jekyll网站添加内容

你现在已经创建了一个Jekyll网站，并根据你的需要配置了该网站。最后一步是添加内容或了解如何将内容添加到Jekyll站点。

所有的内容都存储在_posts文件夹中。每个内容都存储在一个文件中，其命名规则类似于YYY-MM-DD-title.md（或HTML文件的.html）。例如，如果你想创建一个名为 “我的第一篇文章 “的文章，在_posts目录下创建一个2023-03-08-my-first-post.md。

接下来，对于每个文章/内容文件，确保你在顶部添加关于文章的正面内容。这将包括布局、标题、描述、日期和其他信息。

---
layout: post
title: "How to Read Books: Tips and Strategies for Maximum Learning"
subtitle: "Reading books is one of the most powerful ways to learn new information, gain new perspectives, and expand your knowledge."
date: 2023-03-02 23:45:13 -0400
background: '/assets/images/blog/books.jpeg'
---

然后你可以用HTML标签或markdown语法将你的内容添加到前面的事项块下面。

在_posts文件夹中添加新的文章

保存该文件，Jekyll会自动建立并将其包含在你的网站中。

小结

到目前为止，你已经了解了Jekyll的工作原理以及你可以用Jekyll进行的各种定制。现在可以肯定的是，由于Jekyll的简单性、灵活性和强大的功能，它是一个创建静态网站的优秀工具。

Jekyll的直观模板系统、liquid模板以及对markdown和其他标记语言的内置支持，使得它可以轻松地快速创建和管理内容丰富的网站。