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

来自菜鸟教程
跳转至:导航、​搜索

介绍

Jekyll 是一个静态站点生成器,它提供了内容管理系统 (CMS) 的一些好处,同时避免了此类数据库驱动站点引入的性能和安全问题。 它是“博客感知的”,并包括处理按日期组织的内容的特殊功能,尽管它的用处不仅限于博客网站。 Jekyll 非常适合需要离线工作、更喜欢使用轻量级编辑器而不是 Web 表单进行内容维护以及希望使用版本控制来跟踪其网站更改的人。

在本教程中,我们将在 Ubuntu 16.04 上安装 Jekyll 3.7.3 开发站点。 在后面的教程中,我们将探索此处生成的内容,将静态站点发布到同一服务器,并最终部署到生产位置。

先决条件

要遵循本教程,您将需要:

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

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

第 1 步 — 安装 Jekyll

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

sudo apt-get update

然后我们将安装 Ruby 及其开发库以及 makebuild-essential 以便在我们安装 Jekyll 后编译 Jekyll 的库:

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

完成后,我们将继续在 .bashrc 文件中添加两行,以指示 Ruby 的 gem 包管理器将 gem 放入用户的主文件夹中。 这避免了系统范围安装可能引起的复杂情况,同时还将本地 jekyll 命令添加到用户的 PATH

通过键入以下内容打开 .bashrc

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

在这种情况下,只允许通过 SSH:

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

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

sudo ufw allow 4000

让我们仔细检查一下状态:

sudo ufw status

现在我们的防火墙规则如下所示:

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.md
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.md
├── _posts
│   └── 2018-03-19-welcome-to-jekyll.markdown
└── _site

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

提示: tree is a useful command for seeing file and directory structures from the command-line. You can install it with the following command:

sudo apt-get 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.md
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.md
├── _posts
│   └── 2018-03-19-welcome-to-jekyll.markdown
└── _site
    ├── 404.html
    ├── about
    │   └── index.html
    ├── assets
    │   ├── main.css
    │   └── minima-social-icons.svg
    ├── feed.xml
    ├── index.html
    └── jekyll
        └── update
            └── 2018
                └── 03
                    └── 19
                        └── welcome-to-jekyll.html

它还开始观察当前目录 www 的变化。 保存对帖子或页面的更改后,将自动重建静态站点,因此请务必不要直接更改 _site 文件夹中的文件。

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

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


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

结论

在本教程中,我们安装了 Jekyll 并创建了一个包含一些自动生成内容的开发站点。 在我们的 下一个指南 中,我们将探索此内容以说明 Jekyll 如何将源文件转换为静态站点并告知有关我们的配置设置的决策。