如何在Ubuntu18.04上设置Jekyll开发站点

介绍

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

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

先决条件

要遵循本教程，您将需要：

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

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

第 1 步 — 安装 Jekyll

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

sudo apt update

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

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

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

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

nano .bashrc

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

.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：

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

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

sudo ufw allow 4000

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

OutputTo                         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 命令启动 bundle install 来安装所需的依赖项，然后自动安装一个名为 Minima 的主题。成功安装后，您应该会收到如下输出：

OutputNew 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 is a useful command for inspecting file and directory structures from the command-line. You can install it with the following command:

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 serverConfiguration 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 的更多信息：