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

介绍

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

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

准备

要学习本教程,您需要:

  • 具有sudo权限的非root用户的Ubuntu 16.04服务器:您可以在使用Ubuntu 16.04教程的初始服务器设置中了解有关如何使用这些权限设置用户的更多信息。没有服务器的同学可以在这里购买,不过我个人更推荐您使用免费的腾讯云开发者实验室进行试验,学会安装后再购买服务器

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

第一步 - 安装Jekyll

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

sudo apt-get update

然后,我们将安装Ruby和开发库以及makebuild-essential,因此,一旦我们安装Jekyll,Jekyll库即可编译:

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

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

输入以下内容打开文件.bashrc

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服务器的流量。

第二步 - 打开防火墙

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

sudo ufw status

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

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

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

sudo ufw allow 4000

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

sudo ufw status

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

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

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

第三步 - 创建新的开发站点

从我们的主目录,我们将使用Jekyll的new命令为子目录www中的站点创建脚手架:

cd ~
jekyll new www

jekyll new命令启动bundle install以安装所需的依赖项,并自动安装名为Minima的主题。成功安装后,您应该看到如下输出:

New 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是查看文件和目录结构的一个非常有用的命令。您可以使用以下命令安装它:

sudo apt-get install tree

要使用它,请您切换到想要的目录中键入tree或提供完整的路径tree /home/sammy/www

第四步 - 启动Jekyll的Web服务器

Jekyll内置的轻量级Web服务器专为支持站点开发而定制,它通过监视目录中的文件并在保存更改时自动重新生成静态站点。因为我们正在处理远程服务器,所以我们将指定主机地址,以便从本地计算机浏览站点。如果您正在使用本地计算机,则可以在 没有主机设置的情况下运行jekyll serve并连接http://localhost:4000

cd ~/www
jekyll serve --host=203.0.113.0

输出如下:

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.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并创建了一个包含一些自动生成内容的开发站点。

想要了解更多关于Ubuntu的开源信息教程,请前往腾讯云+社区学习更多知识。

参考文献:《How to Set Up a Jekyll Development Site on Ubuntu 16.04》

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张戈的专栏

Nginx内容替换模块http_substitutions_filter_module及实用案例分享

说到 Nginx 的内容替换功能,大部分人应该都听说过 Nginx 内置的的 subs_filter 替换模块,但是这个模块有个缺憾,就是只能替换一次,而且还不...

4637
来自专栏Flutter入门到实战

Flutter填坑全面总结

Flutter是一个新的跨平台开发的工具,博主也玩了一段时间,一步步的踩着坑摸石头过河,这其中受尽了各种各样的坑,各种谷歌,stackoverflow,Flut...

5922
来自专栏LIN_ZONE

Linux各目录及每个目录的详细介绍(转载)

Linux目录和Windows目录有着很大的不同,Linux目录类似一个树,最顶层是其根目录,如下图:

1352
来自专栏北京马哥教育

利用TCMalloc优化Nginx的性能

TCMalloc的全称为Thread-Caching Malloc,是谷歌开发的开源工具google-perftools中的一个成员。与标准的glibc库的Ma...

2515
来自专栏ytkah

thinkcmf安装教程与目录结构详解 快速上手版

  最近接了一个建站项目,要求用thinkcmf来搭建,ytkah在想php都大致一样吧,快速地下载安装包,可是!怎么安装呢?没看到安装指引文件或目录,查看了安...

5254
来自专栏张戈的专栏

Nginx 内容替换模块 http_substitutions_filter_module 及实用案例分享

说到Nginx的内容替换功能,大部分人应该都听说过Nginx内置的的subs_filter替换模块,但是这个模块有个缺憾,就是只能替换一次,而且还不支持正则表达...

6050
来自专栏杨建荣的学习笔记

数据库巡检参考项(r7笔记第95天)

是否为归档模式 数据库是否为归档模式,可以使用archivelog list查看 是否为force logging模式 数据库是否启用了force logg...

30210
来自专栏web前端

HTTP协议理解

HTTP(Hyper Text Transfer Protocol)超文本传输协议,是一种请求响应式协议,类似两国会晤中需要遵守的规则。那么,其中有什么内容特点...

2188
来自专栏我的博客

Nginx和Apache日志格式分析

1、nginx日志格式 log_format main ‘$remote_addr – $remote_user [$time_local] “$reques...

4065
来自专栏小狼的世界

利用AWStat+JAWStat进行Apache访问日志分析

Apache的访问日志中会记录服务器所处理的所有请求,对apache的访问日志进行分析是一种比较传统的形式。虽然现在很多第三方的统计分析工具提供了嵌入到页面中的...

1312

扫码关注云+社区

领取腾讯云代金券