Hugo vs. Jekyll:领先的静态网站生成器对比

如果您正在构建一个新网站,静态站点生成器可能是适合您的平台。
435 位读者喜欢这篇文章。
A graduate degree could springboard you into an open source job

Opensource.com

除非您的精神动物是艾米莉·狄金森,否则当您创造一件东西时,您会希望与世界分享。分享您的作品意味着您需要一个网站。当然,您可以简单地参与数字佃农,并使用各种社交媒体网站中的任何一个来让您的作品展示在受众面前。当然有很多选择... 而不仅仅是“传统的”社交媒体网站。有了 Artstation、Flickr、Soundcloud 和 Wattpad 这样的地方,无论您的媒介是什么,都有一个出口适合您。

实际上,您应该使用这些网站。毕竟,人们都在那里。然而,这些地方都不是真正属于您的。没有一个是您可以控制的,并且您可以确保它会一直存在,供人们找到的根据地,而无需考虑社交媒体的兴衰趋势。

控制。这就是拥有您自己在网络上的位置的价值。

但本文不是关于为您的网站设置域名和托管。它是关于之后的步骤,即实际制作该网站。许多人的典型选择是使用像 WordPress 这样的东西。它在大多数托管提供商上都是一键安装,并且有大量的插件和主题可供选择,具体取决于您尝试构建的网站类型。但是,WordPress 不仅对于大多数网站来说有点过分,而且它还为您提供了一个动态生成的网站,其中包含许多可移动的部件。如果您不使所有这些部件保持最新,它们可能会构成重大的安全风险,并且您的网站可能会被劫持。

另一种选择是拥有一个静态网站,服务器端没有任何动态生成的内容。只是好的旧的 HTML 和 CSS(也许还有一点 Javascript 用于修饰)。该选项的缺点是您一直被降级为自己手动编写整个东西。这是可行的,但您只是想要一个分享您作品的地方。您不应该为了做到这一点而必须了解低级网页设计的所有特性(以及跨浏览器兼容性的巨大麻烦)。

静态站点生成器应运而生。您可以获得静态 HTML 页面的速度和安全性,但工作流程更接近动态站点的便利性。静态站点生成器领域的两个领先者是 Hugo 和 Jekyll。(顺便说一句, Paolo Bonzini 有一篇关于 Jekyll 入门的精彩文章。) 但是哪一个才是适合您的选择呢?希望在本文结束时,您会有一个更好的主意。我们将根据入门速度、主题可用性、编辑工作流程和可扩展性来评估这两种静态站点生成器。

入门

公平警告,这两个工具都需要您从命令行使用它们。大多数命令都很简单且易于记忆,但让我们相应地调整我们的期望。这不是一个点击式界面。

Jekyll 和 Hugo 的安装都非常简单。Jekyll 以 RubyGem 的形式安装,而 Hugo 提供了一个非常方便的一体化二进制文件,可让您快速入门。由于单一安装包,Hugo 在这里略胜一筹。虽然 Jekyll 的 RubyGems 安装方法本身也很容易,但它确实要求您已经在计算机上正确安装和配置了 Ruby 环境。在 Web 设计师和开发人员社区之外,大多数人还没有进行这种设置。

但是,一旦安装完成,Hugo 和 Jekyll 就势均力敌了。它们都有出色的文档和快速入门指南。您可以使用单个命令启动一个新站点(在 Jekyll 中,它是 jekyll new <your_site>,在 Hugo 中,它是 hugo new site <your_site>)。这将为您的站点设置一个通用目录结构和脚手架。目录结构和基本配置非常相似。Jekyll 使用 _config.yml 文件,而 Hugo 使用 config.toml(尽管如果您更习惯 YAML 或 JSON 语法,您可以将 YAML 甚至 JSON 语法与 Hugo 的配置一起使用)。每个内容文件顶部的 Front matter 元数据使用与配置相同的语法。之后,所有页面内容都以 Markdown 编写。

我想说的是,在让您开始使用您的第一个静态生成的站点方面,Jekyll 比 Hugo 略有优势,因为它从一些基本内容和默认主题开始。当您开始构建您的站点时,您可以将这些用作示例模板。Hugo 没有示例内容,甚至没有默认主题。也就是说,示例内容和默认主题通常是我在使用任何工具制作新站点时首先删除的东西,因此 Hugo 实际上为我节省了一个步骤。

主题

正如我提到的,Hugo 根本没有附带默认主题,因此这可能是您要设置的第一件事之一。Jekyll 有一个不错的默认主题,尽管它非常简陋。您可能也希望为您的 Jekyll 站点寻找主题。

Hugo 和 Jekyll 都有各种各样的主题,适用于各种网站类型,从单页 ID 主题到包含博客文章和评论的完整多页站点。尽管如此,找到适合您需求的主题并不容易。在任何一种情况下,查找主题的地方——Hugo 的 themes.gohugo.io 和 Jekyll 的 jekyllthemes.org——基本上都是一个包含主题屏幕截图的大页面。一旦您单击一个主题,您可以获得一些关于它的非常详细的信息,但最初的搜索非常粗略。Hugo 的主题页面内置了一些基本标签,但总的来说,主题搜索和呈现是我觉得这两个项目都真正需要改进的地方。

主题管理也是一个有趣的话题。在这两种情况下,几乎每个主题都是一个 Git 存储库(通常托管在 GitHub 上),您将其克隆到您的网站脚手架中。在 Jekyll 中,还有一个额外的步骤,即使用 RubyGems 的 bundle 来确保主题与站点一起管理。大多数主题已经附带 Gemfile,这使得此步骤相对轻松。如果主题还没有 Gemfile,则很容易添加。在 Hugo 中,没有捆绑步骤。只需从您的 config.toml 指向主题,就可以了。

我发现我偏爱 Hugo 处理主题的方式。您可以将主题克隆(或创建)到其在 themes 子目录中的自己的空间中。这不仅使您在刚开始时相对容易地在主题之间切换,而且还使您能够使用自己的文件覆盖主题的任何组件文件。这意味着您可以根据自己的口味自定义主题,而无需过多地修改原始主题的源代码,使其保持足够的通用性以供其他人使用。当然,如果您有认为主题的其他用户可能会觉得有价值的更改,您仍然可以编辑该源代码并将拉取请求提交给主题维护者。

工作流程

一旦您设置了初始配置,Jekyll 和 Hugo 中构建站点的工作流程就非常相似。两者都有一个实时的 serve 命令,该命令在您的计算机上运行一个小型轻量级 Web 服务器,以便您可以在本地测试您的站点,而无需将其上传到任何地方。真正的好处是,无论您运行的是 jekyll serve 还是 hugo serve,默认情况下,它们都配置为监视您在处理站点时对其所做的任何更改。当您在浏览器中查看站点的本地服务版本时,它会自动更新您所做的任何更改,无论该更改是对内容、配置、主题还是仅仅是图像的更改。这真的很方便,而且非常节省时间。

您可以使用 Markdown 语法在两个系统中编写站点的内容。如果您恰好不熟悉 Markdown,它是一种非常简化的纯文本编写方式,同时仍然允许一些漂亮的格式标记。它非常容易使用且易于阅读。并且由于它是纯文本,因此您的内容(以及您的站点)很容易进行版本控制。这几乎是我现在编写几乎所有内容的主要方式。

可以通过在正确的位置手动创建文件将新内容添加到您的站点脚手架中。它只需要是一个 Markdown 文件,文件顶部带有适当的“Front matter”元数据。与配置文件一样,Jekyll 对 Front matter 使用 YAML 语法,而 Hugo 将接受 TOML、YAML 或 JSON(默认为 TOML)。新的页面文件需要放置在站点脚手架中的正确目录中。在 Jekyll 中,您有单独的 _drafts_posts 目录,分别用于存储您的工作草稿和已完成的内容页面。在 Hugo 中,只有一个 content 目录。您可以在该内容文件的 Front matter 中指定帖子是否为草稿。

现在,虽然可以手动完成所有这些操作,但 Hugo 确实提供了一些便利功能,以确保您的新文件在脚手架中的正确位置创建,并且文件预先填充了适当的 Front matter。这仅仅是在终端中转到您的站点目录并键入 hugo new content/<page.md>,其中 <page.md> 是您要创建的新页面。您甚至可以设置名为 archetypes 的模板,这些模板为不同类型的页面保存自定义的 Front matter(例如,如果您的网站上同时有博客和播客)。

当您的站点准备好发布时,您可以关闭预览服务器并发出命令来构建站点的实际页面。在 Jekyll 中,这将是 jekyll build。在 Hugo 中,它只是 hugo。Jekyll 将完成的站点放在 _site 子目录中,而 Hugo 将它们放在名为 public 的子目录中。在任何一种情况下,一旦您这样做,您就拥有了一个完整的静态网站,您可以上传该网站并将其托管在几乎任何地方。

可扩展性

Hugo 和 Jekyll 都使您能够将您的站点自定义到最小的细节。但是,在可扩展性方面,Jekyll 目前以很大的优势领先,因为它具有插件 API。由于这种插件架构,通过 Jekyll 社区提供的或您自己编写的合理的代码片段,可以相对容易地向您的 Jekyll 生成的站点添加功能。

Hugo 目前根本没有插件 API,因此添加此类功能有点困难。有人希望将来会添加编写和包含插件的功能,但似乎目前还没有人致力于此。

结论

总的来说,Hugo 和 Jekyll 非常相似。这实际上归结为确定您最舒适的工作方式以及您的站点需求。如果您已经设置了 RubyGems 环境并且需要插件的可扩展性,那么 Jekyll 是您的最佳选择。但是,如果您重视简单的工作流程和自定义站点的直接方法,那么 Hugo 将是您的首选。

我发现我更喜欢 Hugo 的方法,并且在构建少量站点时,我还没有需要任何插件。当然,每个人的需求都略有不同。您会为您的站点选择哪个静态站点生成器?

标签
User profile image.
Jason van Gumster 主要编造东西。他写作、制作动画,偶尔也教书,所有这些都使用开源工具。他经营着一家小型独立动画工作室,撰写了《Blender For Dummies》和《GIMP Bible》,并继续在他[有时]每周的播客《开源创意播客》中吐露他的经历。在 @monsterjavaguns 上的冒险(和谎言)。

9 条评论

在长时间使用 Jekyll 后,Hugo 是我的首选。您是对的:两者很相似。但是 Jekyll 的问题在于,一旦您拥有超过标准网站的内容,它就会变得非常慢(因为 Ruby 很慢)。我有一个只有 80 篇文章的网站,加上标签和类别,情况变得更糟。站点生成需要很长时间,这对于在浏览器刷新方面开发站点非常不利。相同的站点在 Hugo 中大约需要 700 毫秒才能渲染。我有很多循环、分类法和标签。因此,您可以想象如果您在拥有 800 篇文章的站点上使用 Jekyll 会意味着什么。对我来说根本不可能。我见过 Hugo 的测试,人们生成了超过 100,000 篇文章,渲染时间仍然是几分钟。使用 Jekyll,这可能需要几天。

感谢这篇精彩的文章。

我使用 Pelican https://blog.getpelican.com/ 作为静态网站生成器。
主要是因为它使用 Python 编写,并支持 reStructuredText 作为标记语言。

我一直在对这个主题进行广泛的研究,最终选择使用 Jekyll。我完成了一个巨大的项目:https://docs.mendix.com,我们在 Github 上将整个网站开源。

有趣的项目,我最终将很多东西从 Jekyll 转移到了 Node。例如,在 Node 中生成站点地图往往比在 Jekyll 中更快。

但是... 这是缺点。我们的文档大约有 2700 页(我必须查阅真实数字)。生成整个站点大约需要 90 秒。当您迭代小的更改时,这有点烦人。我在 Hugo 中做了一个基本测试,它在大约 500 毫秒内完成。

因此,如果我能够将插件完成的工作转移到 Hugo/Node,我将因为速度原因将此重构为 Hugo。

我可能会最终撰写一篇关于这个类似项目的博客,这早就该做了。

Hugo 是用 Go 实现的。从名称上可能很明显,但对我来说不是。

Hugo 唯一缺少的是增量构建。
Hugo 每次都重建整个站点。
希望我们能尽快实现此增强功能。

请看一下 Nikola https://getnikola.com/。用 Python 编写。

很好的概述,但我不同意静态站点生成器解决了 WordPress 和“好的旧 HTML 和 CSS”对于不了解“低级网页设计的所有特性”的人来说太复杂的问题。

如果人们觉得 HTML/CSS 太复杂,他们有多大可能理解 YAML/TOML、Go 模板、Ruby Gems、命令行甚至 Markdown?

我认为 Jekyll 或 Hugo 的用例是一个您想要博客的动态驱动功能(按日期排序的帖子、自动代码段和索引、类别、标签),而没有动态后端的安装和安全问题的站点。您必须是一位经验丰富的开发人员,才能理解这样的工具如何帮助您维护站点。

您可以使用 SSG 创建一个站点,而无需接触模板,就像您可以使用 Wordpress 创建一个站点而无需接触模板一样:通过使用第三方主题。

而且,好吧,至少在一种 SSG 的情况下,如果 markdown 不符合您的口味,您可以使用自由软件办公套件来创建页面 :-)

https://plugins.getnikola.com/v7/odt/

回复 ,作者:Joel Davies (未验证)

我个人觉得 markdown 比 HTML/CSS 容易得多。我不是 Web 开发人员,我通过快速查找我需要的文档来勉强应付。对我来说,仅学习 HTML 是没用的,因为我在网站上看到的任何令人兴奋的东西总是更复杂,例如使用 javascript 以及那里的许多 *.js 工具。我只花了 30 分钟观看视频,就将我的所有技术培训资料从 Word 切换到了 MARKDOWN。但是,我并没有寻找一种简单的方法来使用 Hugo 托管我的 markdown 内容来“自动”获取“复制”按钮。例如,任何用反引号突出显示的代码都应该自动有一个“复制”按钮来复制代码。我什至不知道这个功能叫什么,无法开始搜索它。

回复 ,作者:Joel Davies (未验证)

Creative Commons License本作品根据知识共享署名-相同方式共享 4.0 国际许可协议获得许可。
© . All rights reserved.