流行的静态站点生成器概述

已发表: 2022-03-11

所有静态页面生成器都有一个看似简单的任务:生成静态 HTML 文件及其所有资产。

提供静态 HTML 文件有许多明显的好处,例如更轻松的缓存、更快的加载时间和更安全的整体环境。 每个静态页面生成器产生不同的 HTML 输出。

图示的静态站点生成器

然而,这篇文章的目的不是深入讨论它们机制的复杂性,而是比较每个框架提供的功能集,并突出每个框架的独特方面和特性。

流行的静态页面框架概述

在这篇文章中,我们将仔细研究以下静态页面框架: JekyllMiddlemanHugoHexo 。 这些绝不是唯一的生成器,但它们是最常用的生成器,由大型社区和大量有用资源提供支持。

让我们仔细看看它们并比较它们的基本特征:

  • 杰基尔
    • 用红宝石写的,
    • 支持开箱即用的 Liquid 模板引擎;
  • 中间人
    • 用红宝石写的,
    • 支持开箱即用的 ERB 和 Haml 模板引擎;
  • 雨果
    • 用围棋写的,
    • 支持开箱即用的 Go 模板引擎;
  • 海索
    • 用 JavaScript 编写,
    • 开箱即用支持 EJS 和 Pug。
相关:后端:使用 Gatsby.js 和 Node.js 进行静态站点更新

注意:值得指出的是,这些静态页面生成器中的每一个都可以使用插件和扩展进行自定义和扩展,从而满足您的大部分或全部需求。

设置静态站点生成器

这些框架中的每一个的文档都很全面,而且非常出色,您可以在此处获取它:

Jekyll 文档

中间人文档

雨果文档

Hexo 文档

如果您只是按照安装指南进行操作,您应该会在几分钟内准备好开发环境。 安装后,您可以通过从终端运行命令来启动新项目。

例如,这是您在不同框架中启动新项目的方式:

杰基尔

jekyll new my_website

中间人

middleman init my_website

雨果

hugo new my_website

海索

hexo init my_website

配置

配置通常存储在单个文件中。 每个静态网站生成器都有其细节,但所有四个中的许多设置都是相同的。

您可以指定存储源文件的位置或输出构建源的位置。 通过设置 exclude 或skip_render选项跳过不会在构建过程中使用的数据总是有用的。 您还可以使用配置文件来存储项目标题或作者等全局设置。

迁移到静态生成器

如果您已经准备好一个 Wordpress 项目,您可以相对轻松地将其迁移到静态页面生成器。

对于 Jekyll,您可以使用 Jekyll Exporter 插件。 对于 Middleman,您可以使用名为 wp2middleman 的命令行工具。 您可以使用 Wordpress 到 Hugo Exporter 进行 Hugo 迁移,对于 Hexo,您可以阅读我去年写的关于如何从 Wordpress 迁移到 Hexo 的指南。

原理几乎相同且非常简单——首先将所有内容导出为合适的格式,然后将其包含在正确的文件夹中。

内容

静态页面生成器使用 Markdown 作为主要内容。 Markdown 功能强大,可以快速学习。 由于其简单的语法,使用 Markdown 编写内容感觉很自然。 文档看起来干净整洁。

静态页面生成器中的内容

您应该将文章放在全局配置文件中指定的文件夹中。 文章名称应遵循生成器指定的约定。

在 Jekyll 中,您应该在_posts目录中放置一篇文章。 文章名称应采用以下格式:YEAR-MONTH-DAY-title.MARKUP。 其他生成器也有类似的规则,它们提供了创建新文章的命令。

以下是在 Middleman、Hugo 和 Hexo 中创建新文章的命令:

中间人

middleman article my_article

雨果

hugo new posts/my_article.md

海索

hexo new post my_article

在 Markdown 中,您仅限于一组特定的语法。 对我们来说幸运的是,所有生成器也可以处理原始 HTML。 例如,如果要添加具有特定类的锚点,可以像在常规 HTML 文件中一样添加它:

This is a text with <a class="my-class" href="#">a link</a>

前沿问题

Front matter 是 Markdown 文件顶部的数据块。 您可以设置自定义变量来存储创建更好内容所需的数据。 您可以在前面定义一个变量,而不是在 Markdown 中编写 HTML,这可能导致文档结构混乱和丑陋。

例如,这是您可以向文章添加标签的方式。

 tags: - web - dev - featured

静态页面生成器中的模板

静态页面生成器使用模板语言来处理模板。 要将数据插入模板,您需要使用标签。 例如,要在 Jekyll 中显示页面标题,您可以编写:

{{ page.title }}

让我们尝试在Jekyll 中的帖子中显示前文中的标签列表。 您需要检查变量是否可用。 然后,您需要遍历标签并将它们显示在无序列表中。

 {%- if page.tags -%} <ul> {%- for tag in page.tags -%} <li>{{ tag }}</li> {%- endfor -%} </ul> {%- endif -%}

中间人:

 <% if current_page.data.tags %> <ul> <% for tag in current_page.data.tags %> <li><%= tag %></li> <% end %> </ul> <% end %>

雨果:

 {{ if .Params.Tags }} <ul> {{ range .Params.Tags }} <li>{{ . }}</li> {{ end }} </ul> {{ end }}

海索:

 <% if (post.tags) { %> <ul> <% post.tags.forEach(function(tag) { %> <li><%= tag.name %></li> <% } ); %> </ul> <% } %>

注意:最好检查变量是否存在以防止构建过程失败。 它可以为您节省数小时的调试和测试时间。

使用变量

静态页面生成器提供可用于处理模板的全局变量。 不同的变量类型持有不同的信息。 例如,Hexo 中的全局变量 site 保存有关站点的帖子、页面、类别和标签的信息。

了解可用变量以及如何使用它们可以使开发人员的生活更轻松。 Hugo 使用 Go 的模板库进行模板化。 如果您不熟悉上下文或他们如何称呼它的“点”,则在 Hugo 中使用变量可能会出现问题。

Middleman 没有全局变量。 但是,您可以打开 middleman-blog 扩展,它允许您访问一些变量,例如文章列表。 如果要添加全局变量,可以通过将数据提取到数据文件来实现。

数据文件

当您想要存储 Markdown 文件中不可用的数据时,您应该使用数据文件。 例如,如果您需要保存要在网站页脚中显示的社交链接列表。 所有静态页面生成器都支持 YAML 和 JSON 文件。 此外,Jekyll 支持 CSV 文件,Hugo 支持 TOML 文件。

让我们将这些社交链接存储在我们的数据文件中。 由于所有生成器都支持 YAML 格式,我们将数据保存在 social.yml 文件中:

 - name: Twitter href: https://twitter.com/malimirkeccita - name: LinkedIn href: http://github.com/maliMirkec/ - name: GitHub href: https://www.linkedin.com/in/starbist/

Jekyll 默认将数据文件存储在_data目录中。 Middleman 和 Hugo 使用数据目录,Hexo 使用source/_data directory

要输出数据,您可以使用以下代码:

杰基尔

{%- if site.data.social -%} <ul> {% for social in site.data.social %} <li><a href="{{ social.href }}">{{ social.name }}</li> {%- endfor -%} </ul> {%- endif -%}

中间人

<% if data.social %> <ul> <% data.social.each do |s| %> <li><a href="<%= s.href %>"><%= s.name %></li> <% end %> </ul> <% end %>

雨果

{{ if $.Site.Data.social }} <ul> {{ range $.Site.Data.social }} <li><a href="{{ .href }}">{{ .name }}</a></li> {{ end }} </ul> {{ end }}

海索

<% if (site.data.social) { %> <ul> <% site.data.social.forEach(function(social){ %> <li><a href="<%= social.href %>"><%= social.name %></a></li> <% }); %> </ul> <% } %>

帮手

模板通常支持数据过滤。 例如,如果你想让标题大写,你可以这样做:

{{ page.title | upcase }}

Middleman 有类似的语法:

<%= current_page.data.title.upcase %>

Hugo 使用以下命令:

{{ .Title | upper }}

Hexo 有不同的语法,但结果是一样的。

<%= page.title.toUpperCase() %>

静态页面生成器如何处理资产

资产管理在静态页面生成器中的处理方式不同。 Jekyll 会在任何位置编译资产文件。 Middleman 仅处理存储在源文件夹中的资产。 Hugo 中资产的默认位置是资产目录。 Hexo 建议将资产放在全局源目录中。

图片替代文字

SASS

Jekyll 开箱即用地支持 Sass,但您应该遵循一些规则。 Middleman 还支持开箱即用的 Sass。 Hugo 通过 Hugo Pipes for Sass 编译 Sass。 Hexo 通过插件实现。

ES6

如果你想使用 es6 的现代 JavaScript 特性,那么你应该安装一个插件。 可能有多个版本的类似插件,因此您可能需要检查代码或查看未解决的问题或最新提交以找到最佳版本。

图片

默认情况下也不支持图像优化。 此外,像 es6 插件一样,有不止一个插件可以优化图像。 做好功课并尝试找到最适合这项工作的插件。 或者,您可以使用第三方解决方案。 在我使用 Hexo 构建的博客中,我使用的是 Cloudinary 免费计划。 我开发了一个 cloudinary 标签,并通过 Cloudinary 转换提供响应式和优化的图像。

插件、扩展

静态页面生成器具有强大的库,可让您自定义网站。 每个插件都有不同的用途。 您可以找到范围广泛的插件,从 LiveReload 以获得更好的开发环境到生成站点地图或 RSS 提要。

您可以编写一个新的插件或扩展。 在您这样做之前,请检查是否存在类似的插件。 请参阅 Jekyll 插件列表、Middleman 扩展和 Hexo 插件。 Hugo 没有插件或扩展。 但是,它确实支持自定义简码。

Markdown 中的简码

简码是您可以放置​​在 Markdown 文档中的代码片段。 这些片段输出 HTML 代码。 Hugo 和 Hexo 支持简码。 有内置的简码,比如 Hugo 中的图:

{{< figure src="/lint/to/image.jpg" title="My image" >}}

Hexo youtube 简码:

{% youtube video_id %}

如果您找不到合适的短代码,您可以创建一个新的。 例如,Hexo 不支持 CanIUse 嵌入,我开发了一个支持 CanIUse 嵌入的新标签。 不要忘记在 npm 或官方生成器站点上发布您的插件。 如果您这样做,社区将不胜感激。

内容管理系统

静态页面生成器对于非技术人员来说可能是开销。 学习如何使用命令或 Markdown 对每个人来说都不是一件容易的事。 在这种情况下,用户可以从 JAMstack 站点的内容管理系统中受益。 在此列表中,您可以找到最适合您需求的系统。 知道配置 CMS 需要一些时间,但从长远来看,您和其他用户可以从更有效地发布内容中受益。

奖励:JAMstack 模板

如果您不想在配置项目上花费太多时间,您可以从 JAMstack 模板中受益。 其中一些模板已经预先配置了 CMS,这可以为您节省很多时间。

通过检查代码,您还可以学到很多东西。 尝试安装模板,将其与其他模板进行比较,然后选择最适合您的模板。

包起来

静态页面生成器是一种快速可靠的网站构建方式。 如今,您甚至可以使用生成器构建重要且高度定制的网站。

例如,Smashing Magazine 去年搬到了 JAMstack,他们设法显着加快了网站速度。 还有其他静态网站的成功示例,它们都具有相同的原则——生成静态资源并通过内容交付网络交付它们,以实现更快的加载和卓越的用户体验。

您可以使用静态网站做更多事情:从使用 Wordpress REST API 作为后端到使用 Lambda 函数。 即使对于简单的网站也有出色的解决方案,例如开箱即用的 HTTPS 或处理表单提交。

我希望这篇静态页面框架的概述能帮助你认识到它们的潜力,并在你下次想到一个新项目时考虑使用它们。

相关: Web 应用程序的客户端与服务器端与预渲染