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

本文概述

流行的静态页面框架概述
设置静态站点生成器
组态
迁移到静态生成器
内容
前端内容
静态页面生成器中的模板
使用变量
数据文件
辅助对象
静态页面生成器如何处理资产
插件, 扩展
Markdown中的简码
内容管理系统
奖励：JAMstack模板
本文总结

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

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

但是, 本文的目的不是深入探讨其机制的复杂性, 而是比较每个框架提供的功能集并强调每个框架的独特方面和功能。

流行的静态页面框架概述

在本文中, 我们将仔细研究以下静态页面框架：Jekyll, Middleman, Hugo和Hexo。这些绝不是唯一的生成器, 但它们是最常用的生成器, 并得到大型社区和大量有用资源的支持。

让我们仔细研究一下它们, 并比较它们的基本功能：

杰奇
- 用Ruby编写,
- 开箱即用地支持Liquid模板引擎；
中间人
- 用Ruby编写,
- 开箱即用地支持ERB和Haml模板引擎；
雨果
- 用Go编写,
- 开箱即用地支持Go模板引擎；
六o
- 用JavaScript编写,
- 开箱即用地支持EJS和Pug。

相关：后端：使用Gatsby.js和Node.js进行静态网站更新

注意：值得指出的是, 可以使用插件和扩展名定制和扩展这些静态页面生成器中的每一个, 从而使你能够满足大部分或全部需求。

设置静态站点生成器

每个框架的文档都是全面的, 并且精益求精, 你可以在这里获取：

Jekyll文档

中间人文档

雨果文档

Hexo文档

如果仅遵循安装指南, 则应在几分钟之内准备好开发环境。安装完成后, 你可以通过从终端运行命令来启动新项目。

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

杰奇

jekyll新my_website

中间人

中间人初始化my_website

雨果

雨果新my_website

六o

hexo init my_website

组态

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

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

迁移到静态生成器

如果你已经可以使用Wordpress项目, 则可以相对轻松地将其迁移到静态页面生成器。

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

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

内容

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

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

在Jekyll中, 你应该将文章放在_posts目录中。文章名称应采用以下格式：YEAR-MONTH-DAY-title.MARKUP。其他生成器具有类似的规则, 并且它们提供用于创建新文章的命令。

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

中间人

中间人文章my_article

雨果

雨果新帖/my_article.md

六o

hexo新帖my_article

在Markdown中, 你只能使用一组特定的语法。对我们来说幸运的是, 所有生成器都可以处理原始HTML。例如, 如果要添加具有特定类的锚, 则可以像在常规HTML文件中一样添加它：

这是带有<a class=”my-class” href=”#”>链接</a>的文本。

前端内容

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

例如, 这是你可以在文章中添加标签的方式。

tags:
   - web
   - dev
   - featured

静态页面生成器中的模板

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

让我们尝试在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中的全局变量站点保存有关站点的帖子, 页面, 类别和标签的信息。

了解可用变量以及如何使用它们可以使开发人员的生活更轻松。 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目录。

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

杰奇

{%- 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 }}

六o

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

辅助对象

模板通常支持数据过滤。例如, 如果要使标题大写, 则可以这样：

Middleman具有类似的语法：

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

雨果使用以下命令：

Hexo具有不同的语法, 但结果是相同的。

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

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

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

萨斯

Jekyll开箱即用地支持Sass, 但是你应该遵循一些规则。 Middleman还开箱即用地支持Sass。雨果通过雨果管道为Sass编译Sass。 Hexo通过插件实现。

ES6

如果要使用es6的现代JavaScript功能, 则应安装插件。类似插件的版本可能不止一个, 因此你可能需要检查代码或查看未解决的问题或最新提交, 以寻求最佳插件。

图片

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

插件, 扩展

静态页面生成器具有强大的库, 可让你自定义网站。每个插件都有不同的用途。你可以找到各种各样的插件, 从用于更好的开发环境的LiveReload到生成Sitemap或RSS feed。

你可以编写一个新的插件或扩展。在执行此操作之前, 请检查是否存在类似的插件。请参阅Jekyll插件列表, Middleman扩展和Hexo插件。 Hugo没有插件或扩展程序。但是, 它确实支持自定义短代码。

Markdown中的简码

简码是你可以放入Markdown文档中的代码段。这些代码片段输出HTML代码。 Hugo和Hexo支持简码。有内置的简码, 例如Hugo中的Figure：

Hexo YouTube简码：

{％youtube video_id％}

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

内容管理系统

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

奖励：JAMstack模板

如果你不想花费太多时间来配置项目, 则可以从JAMstack模板中受益。其中一些模板已经使用CMS进行了预配置, 可以节省大量时间。

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

本文总结

静态页面生成器是一种快速可靠的网站构建方法。你现在甚至可以使用生成器来构建非平凡和高度定制的网站。

例如, Smashing Magazine去年搬到了JAMstack, 他们设法大大加快了网站的速度。静态网站还有其他成功的例子, 它们都具有相同的原理-产生静态资源并通过Content Delivery Network交付它们, 以加快加载速度并提供出色的用户体验。

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

我希望静态页面框架的概述有助于你认识到它们的潜力, 并在下次考虑新项目时考虑使用它们。

相关：Web应用程序的客户端vs服务器端vs预呈现