介绍

如果您想快速构建静态网站或博客，Jekyll 可能是一个很好的解决方案。一个用 Ruby 编写的开源静态站点生成器，Jekyll 允许快速执行命令，帮助管理您的站点，从初始到生产部署，所有这些都来自您的命令行。Jekyll 具有博客感知能力，优先考虑类别、帖子和布局，并提供一系列可用于导入以前博客内容的导入器。如果您需要经常离线工作，更喜欢使用轻量级编辑器而不是 Web 表单进行内容维护，或者希望使用版本控制来跟踪对您网站的更改，Jekyll 可以为您提供实现目标所需的一切。

在本教程中，我们将使用自动生成的内容在 Ubuntu 20.04 上安装 Jekyll 开发站点。安装 Jekyll 后，您将能够主要使用 Markdown 文件和一些 Jekyll 命令来创建个人站点或博客。

先决条件

要学习本教程，您需要：

• 具有 sudo 权限的非 root 用户的 Ubuntu 20.04 服务器：您可以在我们的Ubuntu 20.04 初始服务器设置指南中了解有关如何设置具有这些权限的用户的更多信息。

完成此先决条件后，您就可以安装 Jekyll 及其依赖项了。

步骤 1 — 安装 Jekyll

我们将首先更新我们的包列表，以确保我们拥有最新版本的包及其依赖项的最新信息：

sudo apt update

接下来，让我们安装makeandbuild-essential以便 Jekyll 的库编译，并供 Ruby 及其开发库使用。我们在y此处包含标志以确认是的，我们要安装软件包并避免提示确认。

sudo apt -y install make build-essential ruby ruby-dev

完成后，让我们在.bashrc文件中添加两行，告诉 Ruby 的gem包管理器将 gem 放置在用户的主文件夹中。这避免了在系统范围内安装时出现的问题，同时还将本地jekyll命令添加到用户的PATH.

.bashrc使用您选择的编辑器打开，例如 nano：

nano .bashrc

在文件底部，添加以下几行：

# Ruby exports

export GEM_HOME=$HOME/gems
export PATH=$HOME/gems/bin:$PATH

保存并关闭文件。要激活导出，请运行以下命令：

source ~/.bashrc

完成后，我们将用于gem安装 Jekyll 本身以及管理 gem 依赖项的 Bundler。请注意，这可能需要一些时间。

gem install jekyll bundler

接下来，我们将确保我们的防火墙设置允许进出 Jekyll 的开发 Web 服务器的流量。

步骤 2 — 打开防火墙

让我们检查是否启用了防火墙。如果是这样，我们将确保允许访问我们的站点，以便我们能够在 Web 浏览器中查看我们的开发站点。

sudo ufw status

如果您遇到状态显示inactive，请运行以下命令。

ufw allow OpenSSH
sudo ufw enable

这将使您的防火墙能够在系统启动时运行。您可能会收到以下提示（按“y”确认以继续）：

Command may disrupt existing ssh connections. Proceed with operation (y|n)? y
Firewall is active and enabled on system startup

在我们的例子中，只允许 SSH 通过：

Output
Status: active
To Action  From
-- ------  ----
OpenSSH ALLOW   Anywhere
OpenSSH (v6)   ALLOW   Anywhere (v6)

根据您设置防火墙的方式，您可能有其他规则或根本没有防火墙规则。由于在这种情况下只允许 SSH 流量，我们需要打开端口 4000，这是 Jekyll 开发服务器的默认端口：

sudo ufw allow 4000

现在我们的防火墙规则应该包括以下内容：

Output
To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere
4000                       ALLOW       Anywhere
OpenSSH (v6)               ALLOW       Anywhere (v6)
4000 (v6)                  ALLOW       Anywhere (v6)

现在安装了软件并打开了必要的端口，我们就可以创建开发站点了。

第 3 步 – 创建一个新的开发站点

在我们的主目录中，我们使用 Jekyll 的new命令为名为 的子目录中的站点创建脚手架www：

cd ~
jekyll new www

该jekyll new命令启动 abundle install来安装所需的依赖项，然后自动安装一个名为Minima的主题。安装成功后，您应该会收到如下输出：

Output
New jekyll site installed in /home/sammy/www.

Jekyll 的new命令创建以下目录和文件：

...
├── 404.html
├── about.markdown
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.markdown
├── _posts
│   └── 2020-05-29-welcome-to-jekyll.markdown
└── _site

这些不是实际的网站文件。它们是 Jekyll 用来创建静态站点的源文件。Jekyll 依靠特定的名称、命名模式和目录结构来解析不同的内容源并将它们组合成一个静态站点。添加新帖子和页面时，使用现有结构并遵循 Jekyll 的命名约定非常重要。

提示： tree是从命令行检查文件和目录结构的有用命令。您可以使用以下命令安装它：

sudo apt install tree

要使用它，cd进入你想要的目录并输入tree或提供起始点的路径tree /home/sammy/www

第 4 步 – 启动 Jekyll 的 Web 服务器

Jekyll 内置的轻量级 Web 服务器通过监视目录中的文件并在保存更改时自动重新生成静态站点来支持站点开发。

因为我们在远程服务器上工作，所以我们将指定主机地址以便从我们的本地机器浏览站点。如果您在本地机器上工作，则可以在jekyll serve 没有主机设置的情况下运行并使用http://localhost:4000.

cd ~/www
jekyll serve --host=203.0.113.0

Output of jekyll server
Configuration file: /home/sammy/www/_config.yml
            Source: /home/sammy/www
       Destination: /home/sammy/www/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 0.645 seconds.
 Auto-regeneration: enabled for '/home/sammy/www'
    Server address: http://203.0.113.0:4000/
  Server running... press ctrl-c to stop.

当我们调用 时jekyll serve，Jekyll 将配置和内容文件解析到一个新目录中，_site并开始提供该_site文件夹中的内容：

...
├── 404.html
├── about.markdown
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.markdown
├── _posts
│   └── 2020-05-29-welcome-to-jekyll.markdown
└── _site
    ├── 404.html
    ├── about
    │   └── index.html
    ├── assets
    │   ├── main.css
    │   │   ├── main.css.map
    │   └── minima-social-icons.svg
    ├── feed.xml
    ├── index.html
    └── jekyll
        └── update
            └── 2020
                └── 05
                    └── 29
                        └── welcome-to-jekyll.html

它还开始监视当前目录www, 的变化。一旦保存对帖子或页面的更改，静态站点将自动重建，因此不要直接更改文件_site夹中的文件，这一点很重要。

如果我们在我们的网站上工作时让这个终端打开，开发服务器在前台运行，我们将在添加页面和帖子以及更改内容时立即收到反馈。

注意：如果您正在处理大型站点，启用--incremental构建可以在您每次进行更改时通过仅重新生成更改的文件来加快重新构建，但对于这个小型站点，我们不需要它。您可以在 Jekyll 网站上了解有关此实验性功能的更多信息。

该网站现已可用。在 Web 浏览器中，我们可以通过以下输出中显示的服务器地址和端口访问它jekyll serve：

结论

在本教程中，我们安装了 Jekyll 并创建了一个包含一些自动生成内容的开发站点。您可以通过阅读我们关于该主题的其他教程来了解有关 Jekyll 的更多信息：

• 探索 Jekyll 的默认内容
• 如何在 Jekyll 中控制 URL 和链接