This guide is available to download as a free PDF. Download this file now. Feel free to copy and share this with your friends and family.

欢迎使用MakeUseOf指南来使用静态站点生成器。在本指南中，我们将介绍什么是静态站点生成器（SSG），为什么要使用它，以及如何使用它构建一个全新的站点。我们将探讨的一些细节：

目录

1. 静态站点生成器（SSG）简介为什么要使用SSG？|SSG是如何工作的？|有哪些流行的SSG？|选择SSG
2. 准备安装jekylla本地安装的优点|远程安装的优点|先决条件
3. Jekyll安装安装Ruby on Linux |安装（更新）Ruby on macOS |安装Ruby on Windows |安装Jekyll
4. 项目设置和结构创建Jekyll项目|了解Jekyll结构
5. Jekyll Content AuthoringPreviewing Your Site | update the About Page | update the Site Configuration | Creating New Content in Markdown
6. 构建和部署构建|部署
7. 杰基尔主题
8. Jekyll插件

静态站点生成器简介

在过去的几年里，静态网站重新兴起。许多现代网站都使用内容管理系统（CMS），它结合了脚本和数据库内容来动态构建页面。

相反，静态站点的页面是创建的，然后上传到web主机。听起来有点老派，不是吗？是的，但那是件好事。

为什么要使用ssg？

在互联网的早期，创建网页的方法是将每个页面**成一个文件，然后将文件上传到服务器。在当今数据库和高级管理面板的世界中，这似乎有点过时了。但这两种趋势的结合导致了ssg的日益流行。

• 首先，许多从事网络工作的非技术性作者（比如博客作者）已经使Markdown这样的轻量级标记语言非常流行。当人们开始习惯于以这些格式**内容时，SSGs就成为了一种方便的工具，可以将其转换为一个网站。
• 其次，CMS系统的复杂性有时会导致性能和安全问题（例如，对于没有大量功能的简单博客而言，与CMS的开销相比，静态站点更具吸引力）。

SSGs还有其他好处，包括离线工作的能力和一天结束时非常快速的站点。静态站点生成器不擅长的地方是创建非常交互式的网站。如果你计划允许用户注册在你的网站上发表评论，甚至创建他们自己的页面，SSG可能不是最好的选择。同样地，如果您希望销售产品，请允许用户相互发送消息，或在文档上进行协作。但是如果你想找一个简单的方法让内容呈现在你的观众面前，ssg是一个很好的选择。

SSG是如何工作的？

现代CMSE使用类似以下的流：

1. 网站访问者从服务器请求一个网页。
2. 服务器接受请求并确定用户要查找的内容。
3. 服务器使用主要查询数据库的脚本来组装内容。
4. 服务器以网页的形式将内容发送回用户，网页显示在浏览器中。

相比之下，静态站点通过预先构建页面来避免所有的复杂性。然后，访问者的浏览器简单地请求页面，服务器返回所述页面。

因此，您可以认为ssg本质上是发布工具。创建内容，运行SSG，然后它将内容转换为web页面。然后使用任意数量的可用方法将这些页面上载到web服务器。

听起来不错吧？如果你感兴趣，让我们看看一些流行的ssg，看看他们能提供什么。

有哪些流行的SSG？

网站StaticGen是静态站点生成器的主要资源。它提供了一个广泛的可用列表，以及基于用户投票和Github分叉的排名系统。

您可以仔细阅读清单，轻松查看SSG使用的编程语言，并深入查看其功能的摘要。基于这些列表，让我们基于以下属性来检查一些主要的ssg。

• 编程语言：描述编写SSG工具的语言。这对于CMS应用程序非常重要，因为web服务器环境需要支持它。对于ssg来说，这仍然有点重要，但是在您自己的机器上可以安装什么和不能安装什么方面，您通常有更多的灵活性。
• 模板语言：模板语言是用来构造页面结构以及执行一些自动化（例如，显示分配给特定页面的标记）的语言。如果你已经熟悉其中一个而不是另一个，这可能很重要。
• （本机）输入格式：可以用来起草内容的文本标记格式。
• （本机）输出格式：我们专注于生成网站，因此这里给出了HTML（加上CSS/Javascript）。但是一些生成器也可以输出其他格式，比如PDF。
• 特性：SSG可能包含其他有用的特性。一个常见的例子是，如果它是“blog-aware”，它允许您向内容文件添加标记和日期，并将生成的页面安排成类似blog的结构。

此表总结了五个主要SSG的上述情况：

选择ssg

像任何应用程序一样，您应该根据1）它对您的需求的支持程度和2）一些初始测试来选择一个可用的生成器。看看上面的表格，它的三个选项跳出来，我认为是好的。

Jekyll是其中最受欢迎的，并且在可用的主题、插件等方面得到了最广泛的支持。另一方面，我喜欢Hugo中更大的内容模型，以及使用Org模式作为输入的可能性。通过GitBook将站点导出为PDF图书的能力也很吸引人。

最终，我决定使用Jekyll，因为我可以通过插件实现它缺少的一些功能。但决定性的因素是它是用Ruby编写的，而且web主机更可能支持Ruby而不是Hugo的Go编程语言。（“等等，我还以为这是本地节目呢！”是的，或者至少可以。正如我们将在下一节中看到的，这有优点也有缺点。）

准备安装杰基尔

既然我们已经解决了杰基尔，让我们把一切都安排好。以下部分将帮助您决定在何处安装生成器本身，以及需要哪些必备软件。

与CMS不同，静态站点生成器应用程序本身的安装位置具有一定的灵活性。请记住，这些系统并不是真正为网站访问者提供页面服务的系统。它们以一种格式获取内容并将其转换为HTML。因此，您可以选择安装SSG：

• 本地（即在您编写内容的同一台计算机上）
• 远程（即在站点所在的服务器上）

本地安装的优点

在本地安装SSG的首要优势是能够在发布之前轻松预览。你的SSG是把你的纯文本内容和吐出HTML版本，有各种各样的视觉应用。在您担心复制到服务器之前，能够在浏览器中构建和预览您的站点是非常有用的（稍后将详细介绍）。下图显示了正在运行的Hugo服务器--请注意它是如何构建所有内容的，然后启动web服务器并为您提供查看它的URL的：

如前所述，本地安装可能是您唯一可用的选项。您的web宿主环境可能不支持SSG的基本编程语言。例如，如果不支持Ruby，我们的Jekyll命令将无法运行，因此您无法构建您的站点。但是，在自己的计算机上安装必备组件应该没有问题，除非您没有管理权限。

远程安装的优点

另一方面，您可以选择在服务器上安装SSG。在这种情况下，您的工作流看起来像：1）编写原始内容，2）将原始内容移动到服务器，3）运行SSG将原始内容转换为HTML。这种方法的一些好处如下：

• 一组先决条件：在一个地方安装SSG意味着您只需要完成一次安装。
• 一次安装管理：像所有软件一样，SSGs将发布新版本，如果你想要这些新特性，你必须更新。如果您在多台机器上使用SSG，则必须分别更新每台机器。但是将你的SSG建立在一个中央服务器上意味着你只需要更新一次。
• 创作中的平**立性：如果您在各种设备上工作，那么远程SSG意味着您只需要在本地担心创作。既然你是用纯文本创作的，你几乎可以用任何你喜欢的设备。例如，您可以在Android**上使用文本编辑器起草文章，然后在Windows机器上进行校对和添加图形。您甚至可以将所有内容与众多跨平台文件同步解决方案之一保持同步。

一方面，在发布任何更改之前预览站点的能力远远超过了远程安装的好处。因此，如果你只选择一个，就去本地安装。

但请记住，这两者并不是相互排斥的。对于正常的“默认”工作流，没有什么可以阻止您在本地（例如，在Windows计算机上）进行安装，但是也可以在服务器上维护安装，以便从移动设备发送紧急邮件。

先决条件

为了在一般情况下使用SSG，您需要以下内容：

• 能够用纯文本书写内容的编辑。不受干扰的编辑器是一个不错的选择（上图为Mac的Lightpaper）。
• 网络托管环境。
• Internet访问，将内容传输到宿主环境。

如果你是那种在“点击式”****服务上考虑SSG的人，那么你很可能已经拥有了所有这些东西。此外，您还需要满足软件需求。对杰基尔来说，这些是：

• Ruby版本2.2.5或更高版本
• RubyGems，一种用于打包基于Ruby的应用程序的格式
• 一个开源软件编译器GCC和make（不用担心，你根本不需要担心，但是Jekyll确实在后台使用它）

杰基尔装置

在linux上安装ruby

在基于Unix的操作系统（如Linux）上，先决条件是一个快照：几个简单的命令行安装。在Ubuntu及其衍生工具上，以下APT命令将为您设置Ruby语言：

这将安装Ruby语言以及处理一些Gems所需的开发工具。Gems是Ruby包格式，安装其中一些Gems实际上会将它们构建到位。但别担心，安装人员会处理好这一切。

一旦Ruby就位，就可以按照下面“安装Jekyll”一节中的描述安装Jekyll。

安装（更新）ruby-on-macos

macOS的确有Ruby的现成安装。不幸的是，该版本（至少在High Sierra中）是2.0.0，因此不足以运行Jekyll。

最直接的安装方法是通过Homebrew项目，它提供了一个命令行工具来安装许多有用的开源程序。这和MacPorts没什么不同，我们以前在MUO上研究过。

首先，通过将以下内容粘贴到终端应用程序中来安装Homebrew base。它将下载并运行一个安装程序，该程序将进一步解释该过程：

接下来，使用brew命令安装支持Jekyll的更新版Ruby：

此时，请确保关闭并重新打开终端——它将获取更新的Ruby版本（如下图所示）。然后使用下面“安装Jekyll”中的命令进行安装。

在windows上安装ruby

Windows不是Jekyll正式支持的目标。尽管如此，还是有几种方法可以安装它，有些方法可以说比mac更简单。

• 首先，您可以通过标准的.EXE安装程序进行安装。RubyInstaller项目支持最新的2.5.0版本。双击文件（如上图所示）将运行熟悉的安装向导。
• 或者，您可以使用chocolate（Windows的包管理器）来安装Ruby。按照前面的指南安装chocooley，然后使用chocoinstallruby命令安装Ruby。
• 最后，如果你运行的是最新的windows10，你可以从Windows商店安装Ubuntu。然后，您可以使用上面提到的APT命令安装Ruby，以及Ubuntu提供的所有开放源代码。

安装杰基尔

安装了Ruby后，您可以在所有三个平台上使用gem命令安装Jekyll及其所有依赖项（总共约25个）：

注意：在Ubuntu上，使用sudo预先设置上述内容，以便在系统范围内安装。虽然只允许用户安装，但我发现这是有问题的。

最后，您可以通过以下内容确认Jekyll的安装和版本：

如果成功了，你可以进入下一节，建立你的第一个杰基尔网站。

项目设置和结构

创建jekyll项目

现在你已经安装了Jekyll，你的第一步就是建立一个项目。这表示要使用Jekyll创建和管理的单个站点。以下命令将在当前目录中创建新项目：

这将创建一个名为awesome site的新目录。让我们深入了解一下，熟悉一下。

了解杰基尔的结构

Jekyll项目结构包含许多关键文件和子目录，如下所示：

• _贴子：顾名思义，这里是你放置博客贴子的地方。博客文章不同于“常规页面”，因为它们将包含一个有助于排序的日期，以及组织它们的可选类别。在“内容创作”部分，我们将更仔细地研究这一点。
• _配置yml：这是站点的配置文件，以YAML格式编写。YAML是一种用于结构化信息的标记语言，是configs的通用格式。当开始创作我们的内容时，我们将更改其中的一些。
• html：与其他系统一样，当访问者请求未知的url时，404页面会显示出来。
• Gemfile：这是一个Ruby配置文件。我们稍后将在安装其他组件时对此进行添加，但对于现在，请不要对此进行任何更改。
• 索引.md：如果您通常熟悉web服务器，那么这应该看起来很熟悉。当用户转到URL时（如“www.makeuseof.com“”，典型的web服务器将尝试加载索引.html“或”索引.php“此降价文件将转换为”索引.html“我们的静态网站。

你可能会注意到这张单子上少了一件事。。。页！你怎么能有一个没有网页的网站？

你可以自由地为你的网站创建其他文件和文件夹。只要它们不是以下划线开头，它们就会被认为是“内容文件夹”关于.md“文件（如上图所示）或这些任意文件夹中。我们所缺少的只是写一些内容。我们将在下一节集中精力做这件事。

jekyll内容创作

预览网站

我们能做的第一件事就是看看这个网站是如何开箱即用的。如前所述，在本地安装Jekyll的优点之一是使用其内置的web服务器轻松预览我们的站点。下面的命令将启动该服务器，并让您知道如何将浏览器指向它。

注意：从项目的目录（即下面示例中的“/home/aron/Documents/awesome site/”）发出Jekyll的命令非常重要。否则，你会得到各种各样的错误，关于丢失的东西，似乎只有这样，因为你没有在正确的地方。

正如输出所说，我们现在可以在浏览器中使用http://127.0.0.1:4080. 现在有一个网站欢迎我们来到杰基尔，如下图所示。

更新关于页面

从上图中，我们可以看到标题菜单中的“About”链接。点击它会弹出一个页面，里面有一堆关于杰基尔和它的最小主题的垃圾。

但这是我的网站！让我们把它改成个性化的。我们可以加一些降价到”关于.md“文件在我们项目的根目录中。还要注意文件顶部的“front matter”，其中指定了“/about/”URL。

刷新我们的浏览器标签（Jekyll的服务器将实时接收我们的更改），我们的欢迎信息就出现在顶部。很 完美！

但是现在其他的事情变得明显了。这个网站的标题是“你最棒的标题”而不是“我最棒的标题”。而且还有一些关于_配置yml“在网站的描述中。让我们把它们修好。

更新站点配置

那个_配置yml（这实际上很重要，不是胡说）文件包含了一些关于我们网站的重要信息，如下图所示：

在这里查找和调整内容很简单，让我们1）更改标题，2）更改描述，3）删除Github链接。与页面更改不同，我们需要重新启动服务器，以使用Ctrl+C（停止）和jekyll-serve（再次启动）来获取更新的配置文件：

但摆弄亚姆不是我们想要的。不，我们希望能够创建像降价这样的格式的内容。

在降价中创建新内容

正如本指南前面提到的，为大多数静态站点生成器创建内容的方法是降价。这种非常流行的轻量级标记语言使得在文本编辑器中创建网页变得非常容易。我们以前在MUO上讨论过很多次，包括它值得学习的原因，以及针对Windows、Mac和Linux的可靠编辑器。但是，如果你是一个全新的降价，迈克尔的超级降价概述应该是你的第一站学习的细节。

一旦你准备好降价了，我们就可以开始创建你的第一篇文章了。创建一个名为“YYYY-MM-DD”的新纯文本文件-标题.md“不管你喜欢什么方法，名字的第一部分代表日期。将文件放在“\u posts”目录中，然后用您喜爱的文本编辑器打开它。

原始的Jekyll源文件大多是标准的降价，除了前面的内容。这是一些以YAML格式出现在文件开头的配置（请参阅，告诉您它很流行）。最基本的东西，你可以提供通过前面的事是职位的标题。您还应该选择一个主题的可用布局（以下示例中的“post”）。在两组三个破折号之间的最开始处将它们放入降价文件中：

在用三个破折号结束前面的内容之后，您可以用标准降价来写剩余的内容。最好不要直接使用任何H1标记，因为Jekyll会将这些标记应用于您上面定义的标题。但添加一些较低的标题（第二级和第三级）和其他文本（包括项目符号列表）会使我们的页面更加充实。

此时，您可以开始累积帖子。如果你想从你的Jekyll网站上得到的只是一个简单的，日志式的博客，那么，你已经得到了。您可能需要考虑采取的进一步步骤包括（链接将带您访问更详细的参考资料）：

• 创建其他静态页面，比如我们之前修改的“About”页面。请记住，您可以将这些源文件放在项目的根目录中，也可以放在您定义的子文件夹中。
• 用“category”关键字对前面的页面进行分类。然后，创建筛选每个类别的登录页。
• 使用前面的“permalink”关键字将页面组织成一个站点树。例如，这允许您指定关于.md在你的项目的根实际上得到一个地址“真棒-网站.com/关于“/”。

有了这些知识，你就拥有了创建一个网站所需的一切，可以作为一个投资组合、个人博客，甚至是一个小型商业网站。问题是，到目前为止，它仍然局限于你的桌面。在下一节中，我们将探讨当您构建站点时发生了什么（您甚至不知道您是这样做的，是吗？）。我们还将研究一些将构建的或“生成的”站点放到web上的方法。

构建和部署

建造

看一下上面的屏幕截图——在第五行，您会注意到输出“Generating…”

为了服务你的网站，杰基尔首先需要建立它。这需要将所有的标记转换为HTML，并根据需要组装页面（比如我们前面提到的分类页面）。jekyllserve命令还为您构建项目。这就是为什么我们只需要刷新浏览器就可以看到变化。

我们还可以使用以下命令手动构建项目：

生成项目将创建一个名为\u site的子目录。它包含站点的“实时”版本（我们将在下一节讨论如何做到这一点）。其结构与主要项目结构相似，但略有不同：

在项目建设过程中，杰基尔将采取以下措施：

• 正在将标记转换为HTML。
• 向站点页面添加“包含”元素，如页眉和页脚。
• 将模板中的动态代码段替换为其值。例如，通过查找所有博客文章并在列表中填写日期和标题来创建页面。
• 在必要的地方创建导航，比如文章类别的文件夹（上图中的“jekyll”）或者指向“awesome”的“About”菜单项-网站.com/关于“/”。

在这个过程结束时，您可以简单地将“\u site”目录的内容推送到一个web托管环境中。

部署

由Jekyll生成的站点不需要任何花哨的数据库安装就可以工作。您只需将“\u site”目录的所有内容放到您的web主机上。您可以使用多种方法来执行此操作，包括：

• 直接手动复制。不大惊小怪，不混乱。只需记住使用SFTP，而不是常规的（不安全的）FTP。
• 文件同步。如果你能找到一个支持SFTP（或常规FTP，如果你必须的话）的同步工具，你可以将它设置为将“\u site”目录与你的web根目录同步。请记住，它应该是一个单向同步，从您的机器到网络主机。Rsync在所有平台上都是可用的选项，Grsync UI也使其易于使用。
• 源代码管理。最后，对于像博客一样快速频繁变化的内容，您应该使用源代码管理来管理“原始”内容。一个部署选项是在源代码管理下设置“\u site”目录，它允许您在创建或修改内容时向宿主环境“git push”更新。或者，如果你真的很聪明，你可以在源目录上尝试一个post-commit钩子，它使用rsync将更新的内容复制到你的web主机上。

此时，您已经拥有创建网站所需的一切。但这并不是说我们已经涵盖了一切。例如，默认的最小值主题是一点点，嗯。。。缺乏。让我们用尖锐一点的东西来装饰一下。

杰基尔主题

要为你的Jekyll网站找到一个新主题最困难的事情是从所有选项中选择。有数百个可用。试试杰凯尔主题网站，以获得一个漂亮的，浏览的主题库。一旦你决定了一个，按照它的网站上的说明安装它。

注意：许多主题都打包为Ruby gems，这意味着您可以利用我们前面使用的“gem install”命令。不过，这项工作仍在进行中。或者，有些主题可能需要您手动安装。

由于大型的垂直侧边栏菜单很酷，我们将安装Hydeout主题。（在整个Jekyll生态系统中，您可以找到许多对这本经典小说的引用。）它被打包为Ruby gem，因此您可以使用我们最初安装Jekyll时使用的相同命令来安装它：

然后创建一个新的Jekyll站点，并将以下两个更改为1）考虑包含主题的gem，2）将主题实际应用到当前站点。首先，更改文件中的以下行：

现在，更改中的设置_配置yml要使用Hydeout（使用gem名称“jekyll theme Hydeout”）表示站点的活动主题：

现在重新启动Jekyll服务器（请记住，我们接触了配置文件），并看到您令人敬畏的新主题：

jekyll插件

主题并不是美化网站的唯一方法。Jekyll插件有助于添加新的输入和输出选项、自动生成目录或嵌入spotifyweb播放器等功能。它甚至可以提供一些我们强调为SSGs的缺点的功能，比如评论（例如gem“dischs for jekyll”支持dischs服务）。

我们将为我们的网站安装一个管理面板，使之成为一个类似于“静态网站CMS”的东西。。。我们只需要安装它：

然后根据开发人员的说明在Gemfile中启用它：

完成！转到站点的新管理面板你的网站：4080/管理员:

总结

总而言之，在本指南中，我们了解到：

• SSG如何将纯文本内容转换为格式良好的网页
• SSG的重要属性是什么，以及如何选择一个适合您的属性
• 如何在Windows、Mac和Linux上安装Jekyll静态站点生成器
• 如何开始你的第一个Jekyll项目，以及它的结构是什么样的
• 如何使用标记语言为站点创建内容，并预览结果
• 如何获取Jekyll的输出并将其从本地计算机传送到web主机
• 如何为您的站点安装和选择新的Jekyll主题
• 如何安装和使用附加组件向Jekyll添加功能

有了这些知识，您应该能够使用Jekyll快速轻松地运行一个以内容为中心的基本网站。此外，该网站将是快速，安全，易于管理。无论你身在何处，无论你是否可以上网，你都可以处理你的内容，就像在线一样预览你的作品。

你可以在任何一个网络主机上托管你的网站，甚至可以使用非常实惠的“**”计划。同时，你可以使用现代的，好看的主题，甚至通过插件添加一些CMS特性。

你觉得基于SSG的网站怎么样？对你合适吗？或者这一切听起来太复杂了，你宁愿坚持使用WordPress？请在评论中告诉我们！