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

介绍

如果你想快速建立一个静态的网站或博客,Jekyll可能是一个很好的解决方案。一个开源的静态网站生成器写在Ruby中,Jekyll允许快速执行指令,帮助管理你的网站从初始到生产部署,从你的命令行。Jekyll是博客意识,优先考虑类别,帖子和布局,有各种可用的导入器来导入以前的博客内容。

在本教程中,我们将安装一个Jekyll开发网站在Ubuntu 18.04上,具有自动生成的内容. 随着Jekyll安装,您将能够使用标记文件和几个Jekyll命令创建个人网站或博客。

前提条件

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

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

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

步骤1:安装Jekyll

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

1sudo apt update

接下来,让我们安装制造构建必不可少以便Jekyll的库将编译,以及用于Ruby及其开发库。

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

当完成时,让我们将两个行添加到我们的 .bashrc 文件中,告诉 Ruby 的 gem 包管理器将宝石放入用户的主文件夹中,从而避免在整个系统安装中出现的问题,同时还将本地 jekyll 命令添加到用户的 PATH

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

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

如果您遇到显示不活跃的状态,请运行以下命令。

1ufw allow OpenSSH
2sudo ufw enable

这将使您的防火墙在系统启动时运行,您可能会收到以下提示(用y确认继续):

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

在我们的情况下,只有通过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

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

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.markdown
 4├── _config.yml
 5├── Gemfile
 6├── Gemfile.lock
 7├── index.markdown
 8├── _posts
 9│   └── 2020-05-29-welcome-to-jekyll.markdown
10└── _site

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

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

1sudo apt 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.markdown
 4├── _config.yml
 5├── Gemfile
 6├── Gemfile.lock
 7├── index.markdown
 8├── _posts
 9│   └── 2020-05-29-welcome-to-jekyll.markdown
10└── _site
11    ├── 404.html
12    ├── about
13    │   └── index.html
14    ├── assets
15    │   ├── main.css
16    │   │   ├── main.css.map
17    │   └── minima-social-icons.svg
18    ├── feed.xml
19    ├── index.html
20    └── jekyll
21        └── update
22            └── 2020
23                └── 05
24                    └── 29
25                        └── welcome-to-jekyll.html

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

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

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

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

Screenshot of the Jekyll homepage

结论

在本教程中,我们安装了Jekyll并创建了一个开发网站,其中包含一些自动生成的内容,您可以通过阅读我们的其他教程来了解更多关于Jekyll的内容:

Published At
Categories with 技术
comments powered by Disqus