如何在 Ubuntu 16.04 上建立 Jekyll 开发网站

介绍

Jekyll是一个静态网站生成器,提供内容管理系统(CMS)的一些好处,同时避免这些基于数据库的网站引入的性能和安全问题,它是博客意识,并包含处理日期组织的内容的特殊功能,尽管它的有用性不限于博客网站。

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

前提条件

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

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

一旦您完成了此前提条件,您就可以安装 Jekyll 及其依赖。

步骤1:安装Jekyll

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

1sudo apt-get update

然后我们将安装Ruby及其开发库以及制造和构建必备,以便Jekyll的库在我们安装Jekyll后进行编译:

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

当完成时,我们将继续将两个行添加到我们的 .bashrc 文件中,以指示 Ruby 的 gem 包管理器将宝石放入用户的主文件夹中,从而避免系统范围内的安装可能引起的并发症,同时还将本地 jekyll 命令添加到用户的 PATH。

打开.bashrc键入以下内容:

1nano .bashrc

在文件的底部,添加以下行:

1[label .bashrc]
2# Ruby exports
3
4export GEM_HOME=$HOME/gems
5export PATH=$HOME/gems/bin:$PATH

保存和关闭文件. 若要激活导出,请执行以下操作:

1source ~/.bashrc

当完成时,我们将使用珠宝来安装Jekyll本身以及管理珠宝依赖的Bundler:

1gem install jekyll bundler

接下来,我们将确保我们的防火墙设置允许流量到达和从Jekyll的开发Web服务器。

第2步:打开防火墙

我们将首先检查防火墙的状态,看看它是否已启用,如果是这样,我们将确保我们网站的流量被允许,以便我们可以在网页浏览器中查看我们的开发网站。

1sudo ufw status

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

1[secondary_label Output]
2Status: active
3To Action From
4-- ------  ----
5OpenSSH ALLOW Anywhere
6OpenSSH (v6)   ALLOW Anywhere (v6)

由于在这种情况下仅允许SSH流量,我们需要打开端口4000,这是Jekyll开发服务器的默认端口:

1sudo ufw allow 4000

让我们双重检查状态:

1sudo ufw status

现在我们的防火墙规则看起来像:

1[secondary_label Output]
2To Action From
3--                         ------      ----
4OpenSSH ALLOW Anywhere
54000 ALLOW Anywhere
6OpenSSH (v6)               ALLOW Anywhere (v6)
74000 (v6)                  ALLOW Anywhere (v6)

安装了软件和打开必要的端口,我们已经准备好创建开发网站。

步骤三:创建新开发网站

从我们的主目录中,我们将使用Jekyll的新命令来创建一个名为www的子目录中的网站:

1cd ~
2jekyll new www

jekyll new命令启动了bundle install来安装所需的依赖,并自动安装了一个名为 Minima的主题。

1[secondary_label Output]
2New jekyll site installed in /home/sammy/www.

Jekyll的新命令会创建以下目录和文件:

 1...
 2├── 404.html
 3├── about.md
 4├── _config.yml
 5├── Gemfile
 6├── Gemfile.lock
 7├── index.md
 8├── _posts
 9│   └── 2018-03-19-welcome-to-jekyll.markdown
10└── _site

这些不是实际的网站文件. 它们是 Jekyll 将用于 create 静态网站的源文件. Jekyll 依靠特定的名称,命名模式和目录结构来分析不同内容来源并将它们组合成静态网站。

<$>[note] ** 提示:** tree 是一个用于从命令行中查看文件和目录结构的有用命令。

1sudo apt-get install tree

要使用它,请cd进入您想要的目录并键入树,或者提供树 /home/sammy/www <$>

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

Jekyll 的内置轻量级 Web 服务器通过监控目录中的文件并在任何保存更改时自动再生静态网站来支持网站开发,因为我们在远程服务器上工作,我们将指定主机地址,以便从本地机器浏览网站。如果您在本地机器上工作,您可以运行jekyll serve而无需主机设置,并连接到http://localhost:4000。

1cd ~/www
2jekyll serve --host=203.0.113.0

 1[secondary_label Output of jekyll server]
 2Configuration file: /home/sammy/www/_config.yml
 3            Source: /home/sammy/www
 4       Destination: /home/sammy/www/_site
 5 Incremental build: disabled. Enable with --incremental
 6      Generating...
 7                    done in 0.645 seconds.
 8 Auto-regeneration: enabled for '/home/sammy/www'
 9    Server address: http://203.0.113.0:4000/
10  Server running... press ctrl-c to stop.

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

 1...
 2├── 404.html
 3├── about.md
 4├── _config.yml
 5├── Gemfile
 6├── Gemfile.lock
 7├── index.md
 8├── _posts
 9│   └── 2018-03-19-welcome-to-jekyll.markdown
10└── _site
11    ├── 404.html
12    ├── about
13    │   └── index.html
14    ├── assets
15    │   ├── main.css
16    │   └── minima-social-icons.svg
17    ├── feed.xml
18    ├── index.html
19    └── jekyll
20        └── update
21            └── 2018
22                └── 03
23                    └── 19
24                        └── welcome-to-jekyll.html

它还开始查看当前的目录www,查看更改. 一旦保存到帖子或页面的更改,静态网站将自动重建,因此重要的是不要直接对_site文件夹中的文件进行更改。

如果我们在我们网站上工作时把这个终端打开,开发服务器在前沿运行,我们将立即收到反馈,当我们添加页面和帖子并更改内容。

<$>[注] 注: 如果您正在与一个大网站合作,启用--增量构建可以通过只重建被更改的文件来加速重建,但我们不需要这个小网站。

在一个网页浏览器中,我们可以访问它在服务器地址和端口显示在jekyll服务的输出:

Screenshot of the Jekyll homepage

结论

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