除非您的精神动物是艾米莉·狄金森,否则当您创造一件东西时,您会希望与世界分享。分享您的作品意味着您需要一个网站。当然,您可以简单地参与数字佃农,并使用各种社交媒体网站中的任何一个来让您的作品展示在受众面前。当然有很多选择... 而不仅仅是“传统的”社交媒体网站。有了 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 的方法,并且在构建少量站点时,我还没有需要任何插件。当然,每个人的需求都略有不同。您会为您的站点选择哪个静态站点生成器?
9 条评论