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

最新推荐文章于 2024-04-13 08:30:00 发布

dfsgwe1231

最新推荐文章于 2024-04-13 08:30:00 发布

阅读量280

点赞数

文章标签： markdown php javascript ViewUI

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

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

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

流行的静态页面框架概述

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

让我们仔细看看它们中的每一个，并比较它们的基本功能：

杰基尔

用Ruby编写，
开箱即用地支持Liquid模板引擎；

中间人

用Ruby编写，
开箱即用地支持ERB和Haml模板引擎；

雨果

用Go编写，
开箱即用地支持Go模板引擎；

六o

用JavaScript编写，
开箱即用地支持EJS和Pug。

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

设置静态站点生成器

每个框架的文档都是全面的，而且精益求精，您可以在这里获取：

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

例如，这是在不同框架中开始新项目的方式：

杰基尔

jekyll new my_website

中间人

middleman init my_website

雨果

hugo new 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中创建新文章的命令：

中间人

middleman article my_article

雨果

hugo new posts/my_article.md

六o

hexo new post my_article

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

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

前事

最重要的是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中的全局变量站点保存有关站点的帖子，页面，类别和标签的信息。

了解可用变量以及如何使用它们可以使开发人员的生活更轻松。 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: https://github.com/maliMirkec/
- name: GitHub
  href: https://www.linkedin.com/in/starbist/

默认情况下，Jekyll将数据文件存储在_data目录中。 Middleman和Hugo使用data目录，而Hexo使用source/_data directory _data 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 }}

六o

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

雨果使用以下命令：

{{ .Title | upper }}

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

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

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

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

萨斯

Jekyll开箱即用地支持Sass，但您应遵循一些规则。 Middleman还开箱即用地支持Sass。雨果通过雨果管道为Sass编译Sass 。 Hexo通过plugin做到了。

ES6

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

图片

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

插件，扩展

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

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

Markdown中的简码

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

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

Hexo YouTube简码：

{% youtube video_id %}

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

内容管理系统

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