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

已发表: 2023-05-18

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

这就是静态站点生成器 (SSG) 的用武之地——它们可以轻松创建美观、加载速度快的网站，而无需复杂的后端系统或数据库。

在本文中，您将了解一种流行的 SSG——Jekyll，了解它的工作原理，以及如何使用它创建静态网站。

这是您将使用 Jekyll 构建的博客站点的现场演示。

如果您想仔细查看，可以访问该项目的 GitHub 存储库。

什么是杰基尔？

Jekyll 是一种免费的开源 SSG，它基于 Ruby 编程语言构建和运行。您无需了解 Ruby 的工作原理即可使用 Jekyll；你只需要在你的机器上安装 Ruby。

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

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

易于使用：Jekyll 使用纯文本文件和 markdown 语法来创建和管理内容，这意味着您无需具备 HTML 或 CSS 知识即可上手。
快速安全： Jekyll 不处理任何服务器端数据库或脚本，这意味着存在漏洞和攻击的风险较小。它生成静态 HTML 文件，使您的网站非常快速和安全。
可定制： Jekyll 是高度可定制的，允许您使用布局和模板，甚至创建插件来扩展功能。
易于部署：Jekyll 生成静态 HTML 文件，无需动态内容管理系统即可部署到 Web 服务器或托管服务提供商。
由大型社区支持： Jekyll 拥有庞大的用户和开发人员社区，这意味着如果您需要帮助或想要扩展站点的功能，可以使用大量资源。

创建新网站可能很痛苦！以下是 Jekyll 如何让它变得更容易和更快。点击鸣叫

如何安装 Jekyll

您首先需要在您的机器上安装 Ruby，然后才能按照 Jekyll 文档中的说明继续安装 Jekyll。

如何在 macOS 上安装 Jekyll

默认情况下，Ruby 预装在 macOS 中，但不建议您使用此类版本的 Ruby 来安装 Jekyll，因为它太旧了。例如，在 Apple 最新的操作系统 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 下载并使用默认安装选项下载并安装Ruby+Devkit版本来完成。

在安装向导的最后阶段，运行ridk install步骤——用于安装 gems。通过 RubyInstaller 文档阅读更多内容。

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

 gem install jekyll bundler

如何验证 Jekyll 是否安装正确

要验证 Jekyll 是否已正确安装在您的计算机上，请打开您的终端并运行以下命令：

 jekyll -v

如果您看到版本号，则表示 Jekyll 已安装并在您的系统上正常工作。您现在可以使用 Jekyll 了！

Jekyll 命令和配置

在我们开始使用 Jekyll 创建和自定义静态站点之前，最好熟悉它的各种 CLI 命令和配置文件参数。

杰基尔 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 配置文件是一个名为_config.yml的 YAML 文件，其中包含 Jekyll 站点的设置和选项。它用于配置站点的各个方面，包括站点标题、描述、URL 和其他设置。

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

标题：您网站的标题。
描述：您网站的简短描述。
url：您网站的基本 URL。
baseurl：如果站点位于域的子目录中，则为站点的子目录。
永久链接：您的帖子和页面的 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 站点结构，其中包括如下目录和文件：

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

以下是每个目录和文件的用途：

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

但是还有更多文件/文件夹可用于自定义您的 Jekyll 网站。这些文件夹包括：

_includes：包含可重用的 HTML 片段的目录，这些片段可以包含在您的布局和页面中。如导航栏、页脚等
_layouts：包含定义页面结构的 HTML 布局模板的目录。
assets：包含站点使用的任何文件的目录，例如图像和 CSS 文件。
_sass：包含可用于为您的站点生成 CSS 的 Sass 文件的目录。

此文件结构为 Jekyll 项目提供了坚实的基础，但您可以根据需要修改它以满足项目的特定需求。

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

作为使用 Jekyll CLI 启动项目的替代方法，您可以使用 GitHub 上的 Kinsta 的“Hello World”Jekyll 模板创建 Git 存储库。选择使用此模板>创建新存储库，将起始代码复制到您自己的 GitHub 帐户内的新存储库中。

如何预览 Jekyll 站点

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

 jekyll serve

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

如果您在 Web 浏览器中访问该 URL，您应该会看到带有 minima 主题的 Jekyll 站点：

如何自定义 Jekyll 站点

当您使用 Jekyll 创建站点并使用主题时，您可以自定义站点以满足您的需要。例如，您可能想要添加新页面、更改页面布局或调整某些项目的显示方式。使用 Jekyll 所有这些都是可能的。

Jekyll 中的 Front Matter 是如何工作的

当您打开项目文件夹的每个页面或博客文章时，您会注意到页面顶部三个破折号 (—) 内的信息块。这被称为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 ---

在上面的例子中，front matter 包括变量，例如帖子的标题、描述和日期。这些变量可用于页面或帖子的布局或内容。

Jekyll 解析前端内容并使用它为您的站点生成输出 HTML。您可以使用 front matter 来指定各种选项，例如布局、永久链接、发布状态等。

如何配置默认前题

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

它的结构方式有点复杂，但它看起来像这样。将此粘贴到_config.yml文件中的最后一个配置下方：

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

当你现在运行jekyll serve命令时，你会注意到即使你没有在每个帖子上定义布局和作者，你仍然可以在你的文件中访问它们。

注意：当您不定义路径时，所有文件都将使用定义的 front matter 值。

在 Jekyll 中创建页面

当您在项目的根目录中创建文件时，它被视为一个页面。您为文件指定的名称大部分时间都用在 URL 中，因此您将为每个页面文件命名一个能引起共鸣的名称。

例如，如果您想创建一个 URL 为https://example.com/about 的页面，请创建一个名为about.htm l 或about.md的文件。文件扩展名决定了页面内容使用的标记语言（HTML 或 Markdown）。

创建文件后，添加适当的前言和内容。保存文件并在浏览器中刷新 Jekyll 站点。现在应该可以通过与文件名对应的 URL 访问新页面。

在 Jekyll 中创建布局

您可以使用布局来定义站点页面和帖子的结构和设计。这通常主要通过 HTML 代码完成。您可以在页面的元数据中包含页眉、页脚和元信息。

第一步是在项目的根目录中创建一个_layouts文件夹。然后为每个布局创建一个文件——该文件应该有一个反映布局目的的描述性名称。例如，您可以创建一个名为page.htm l 的文件来定义站点上所有页面的页面布局。

最好使用 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 作为其 front matter 布局值的页面或帖子都将具有此布局。您可以在_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 文件。主要目的是通过允许您在站点中重复使用代码来保持代码干爽（不要重复自己）。

在 Jekyll 中遍历帖子

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

任何 Jekyll 网站上的所有帖子都存储在site.posts变量中。您可以遍历并使用{{ post.title }} Liquid 变量以这种方式输出每个帖子的标题：

 {% 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 %}

请注意，在上面的示例中，日期 Liquid 过滤器将每个帖子的日期格式化为更易于阅读的格式。

现在，您已经了解了可以对 Jekyll 站点进行的一些基本格式化。但是您可能不需要使用所有这些从头开始构建 Jekyll 站点，因为您始终可以搜索满足您需要的主题并将其添加到您的 Jekyll 站点。

如何为 Jekyll 站点添加主题

有各种易于添加的主题，但好处是对于每个主题，在 GitHub 上的自述文件中总是有关于如何安装它们的明确信息。您可以决定克隆主题，或者如果它是基于 gem 的主题，则该过程会更容易。

对于本文，您将安装一个博客主题并自定义它以将博客站点部署到 Kinsta。这是一个基于 gen 的主题，您可以在 GitHub 上访问其源代码和说明。

要添加基于 gem 的主题，请打开您站点的 Gemfile 并为您要使用的主题添加 gem。我们将使用的主题是jekyll-theme-clean-blog 。您可以替换 Gemfile 中的默认最小主题：

 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 站点现在应该使用您添加的新的基于 gem 的主题。您可以通过在站点的_layouts目录中修改其布局来进一步自定义主题。

自定义 Jekyll 主题

您现在已将主题添加到您的站点，下一步是自定义站点以满足您的需求并按预期工作。例如，不显示每个页面和帖子的图像，而是显示灰色背景。

您可以通过为每个页面添加一个前言选项来解决这个问题，并通过指定您希望使用的图像的路径来发布。在 Jekyll 中，图像等资产存储在assets文件夹中。在此文件夹中，您可以决定创建子文件夹来组织您的图像。

您现在可以将背景选项添加到 front matter 块及其图像的路径。例如，在关于页面上，这是前面的内容：

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

对所有页面和帖子执行此操作，您的页面将如下所示：

您可以做的另一个自定义是调整导航栏选项。例如，您可能不需要联系页面，这意味着您应该从导航栏选项中删除它的链接。为此，您可以研究主题的源代码，注意负责导航链接的文件，并在您的项目中准确复制该文件，删除不需要的选项。

导航链接位于 _includes 文件夹的 navbar.html 文件中。您可以创建此文件，粘贴源代码中的代码，然后删除联系人选项或添加您想要的任何新选项。

保存项目时，您会注意到导航选项将被自定义：

最后，最后一项定制是创建一个帖子页面，该页面将包含您所有的博客帖子——这意味着您将循环浏览此页面上的所有帖子。

创建文件posts.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 文件夹中。每个内容都存储在一个文件中，该文件具有类似的命名约定YYYY-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 语法将您的内容添加到 front matter 块下方。

保存文件，Jekyll 将自动构建并将其包含在您的站点中。

如何在 Kinsta 上部署你的 Jekyll 站点

Kinsta 是一个云平台，允许您托管静态网站，包括 Jekyll。这可以通过设置一些配置，将代码推送到 GitHub，最后部署到 Kinsta 来完成。

先决条件：配置您的 Jekyll 站点

检查您的Gemfile.lock文件并确保它包含适用于所有设备的平台。为确保所有平台均已正确配置，请运行以下命令：

 bundle lock --add-platform arm64-darwin-22 x64-mingw-ucrt x86_64-linux

然后您可以继续创建一个Procfile — 此文件指定在您的站点部署时执行的命令。此文件会自动更新要在 MyKinsta 的“进程”选项卡中执行的命令。这是要添加到您的 Procfile 的命令：

 web: bundle exec jekyll build && ruby -run -e httpd _site

将你的 Jekyll 站点推送到 GitHub

对于本文，让我们使用 Git 命令将您的代码推送到 GitHub。首先，在GitHub上创建一个仓库；这将使您能够访问存储库的 URL。

您现在可以通过打开终端、导航到包含项目的目录并运行以下命令来初始化本地 Git 存储库：

 git init

现在使用以下命令将代码添加到本地 Git 存储库：

 git add

您现在可以使用以下命令提交更改：

 git commit -m "my first commit"

注意：您可以用描述您的更改的简短消息替换“我的第一次提交”。

最后，使用以下命令将代码推送到 GitHub：

 git remote add origin [repository URL] git push -u origin master

注意：确保将“[存储库 URL]”替换为您自己的 GitHub 存储库 URL。

完成这些步骤后，您的代码将被推送到 GitHub 并可通过存储库的 URL 访问。您现在可以部署到 Kinsta！

将您的 Jekyll 站点部署到 Kinsta

只需几分钟即可部署到 Kinsta。从 My Kinsta 仪表板开始登录或创建您的帐户。接下来，您将在 GitHub 上授权 Kinsta。

然后，您可以按照以下步骤部署您的 Jekyll 站点：

单击左侧栏中的应用程序
点击添加服务
从下拉列表中单击应用程序

将出现一个模式，您可以通过它选择要部署的存储库。如果您的存储库中有多个分支，请选择您希望部署的分支。

然后您可以为该应用程序指定一个名称。在可用的 25 个数据中心位置中选择一个位置，然后 Procfile 将自动提供 web 进程命令。

您的应用程序将开始部署。几分钟后，将提供一个链接以访问您网站的已部署版本。在这种情况下，它是： https ://myblog-84b54.kinsta.app/

没有更多的网站建设压力 - 探索 Jekyll 的无忧方法！点击鸣叫

概括

到目前为止，您已经了解了 Jekyll 的工作原理以及您可以使用 Jekyll 进行的各种定制。由于 Jekyll 的简单性、灵活性和强大的功能，现在可以安全地同意 Jekyll 是创建静态网站的出色工具。

Jekyll 直观的模板系统、流式模板以及对 markdown 和其他标记语言的内置支持使快速创建和管理内容丰富的站点变得容易。

随意使用 Kinsta 的应用程序托管免费托管您所有的静态网站，如果您愿意，请选择我们的 Hobby Tier 计划，起价为每月 7 美元。

你对杰基尔有什么看法？ 你用过 Jekyll 来构建任何东西吗？ 请随时在下面的评论部分与我们分享您的项目和经验。