前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何在Ubuntu 16.04上建立一个Jekyll开发网站

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

原创
作者头像
小皇帝James
修改2018-10-22 10:58:41
1.6K0
修改2018-10-22 10:58:41
举报
文章被收录于专栏:云计算教程系列

介绍

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

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

准备

要学习本教程,您需要:

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

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

第一步 - 安装Jekyll

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

代码语言:javascript
复制
sudo apt-get update

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

代码语言:javascript
复制
sudo apt-get install ruby ruby-dev make build-essential

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

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

代码语言:javascript
复制
nano .bashrc

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

代码语言:javascript
复制
# Ruby exports
​
export GEM_HOME=$HOME/gems
export PATH=$HOME/gems/bin:$PATH

保存并关闭文件。要激活导出,请运行以下命令:

代码语言:javascript
复制
source ~/.bashrc

完成之后,我们将使用gem安装Jekyll本身以及管理Gem依赖项的Bundler:

代码语言:javascript
复制
gem install jekyll bundler

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

第二步 - 打开防火墙

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

代码语言:javascript
复制
sudo ufw status

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

代码语言:javascript
复制
Status: active
To Action  From
-- ------  ----
OpenSSH ALLOW   Anywhere
OpenSSH (v6)   ALLOW   Anywhere (v6)

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

代码语言:javascript
复制
sudo ufw allow 4000

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

代码语言:javascript
复制
sudo ufw status

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

代码语言:javascript
复制
To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere
4000                       ALLOW       Anywhere
OpenSSH (v6)               ALLOW       Anywhere (v6)
4000 (v6)                  ALLOW       Anywhere (v6)

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

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

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

代码语言:javascript
复制
cd ~
jekyll new www

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

代码语言:javascript
复制
New jekyll site installed in /home/sammy/www.

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

代码语言:javascript
复制
...
├── 404.html
├── about.md
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.md
├── _posts
│   └── 2018-03-19-welcome-to-jekyll.markdown
└── _site

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

提示: tree是查看文件和目录结构的一个非常有用的命令。您可以使用以下命令安装它:

代码语言:javascript
复制
sudo apt-get install tree

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

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

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

代码语言:javascript
复制
cd ~/www
jekyll serve --host=203.0.113.0

输出如下:

代码语言:javascript
复制
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文件夹中的内容:

代码语言:javascript
复制
...
├── 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》

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 介绍
  • 准备
  • 第一步 - 安装Jekyll
  • 第二步 - 打开防火墙
  • 第三步 - 创建新的开发站点
  • 第四步 - 启动Jekyll的Web服务器
  • 结论
相关产品与服务
云服务器
云服务器(Cloud Virtual Machine,CVM)提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源,适应变化的业务需求,并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档