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

提供静态HTML文件有许多明显的好处, 比如更容易缓存, faster load times, 整体环境也更加安全. 每个静态页面生成器生成的HTML输出不同.

However, 这篇文章的目的不是深入讨论它们机制的复杂性, 但是要比较每个框架提供的特性集，并突出每个框架的独特方面和特性.

流行的静态页面框架概述

在这篇文章中，我们将仔细研究以下静态页面框架: Jekyll, Middleman, Hugo, and Hexo. 这些绝不是唯一的发电机, 但它们是最常用的, 由大型社区和大量有用资源支持.

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

• Jekyll
  • written in Ruby,
  • 支持Liquid模板引擎开箱即用;
• Middleman
  • written in Ruby,
  • 支持ERB和Haml模板引擎;
• Hugo
  • written in Go,
  • 支持Go模板引擎开箱即用;
• Hexo
  • 用JavaScript编写，
  • 支持EJS和Pug的开箱即用.

Note: 值得指出的是，这些静态页面生成器中的每一个都可以使用插件和扩展进行定制和扩展, 允许您满足大部分或全部需求.

设置静态站点生成器

每个框架的文档都很全面，非常出色，你可以在这里获取:

哲基尔文档

中间人文档

雨果的文档

Hexo文档

如果您只是遵循安装指南, 您应该在几分钟内准备好开发环境. 安装完成后，您可以通过从终端运行命令启动一个新项目.

例如，以下是在不同框架中启动新项目的方法:

Jekyll

杰基尔新my_website

Middleman

中间人init my_website

Hugo

Hugo新my_website

Hexo

Hexo init my_website

Configuration

配置通常存储在单个文件中. 每个静态网站生成器都有自己的特点，但这四种工具的很多设置都是一样的.

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

迁移到静态生成器

如果你已经有了 Wordpress project 准备就绪后，您可以相对轻松地将其迁移到静态页面生成器.

对于杰基尔，你可以 Jekyll Exporter plugin. 对于Middleman，您可以使用命令行工具 wp2middleman. You can use Wordpress到Hugo出口商 关于Hugo迁移和Hexo，你可以阅读我们的 如何从Wordpress迁移到Hexo的指南 那是我去年写的.

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

Content

静态页面生成器使用 Markdown 主要内容. Markdown是强大的，你可以很快学会它. 使用Markdown编写内容感觉很自然，因为它的语法很简单. 这份文件看起来干净而有条理.

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

在《欧博体育app下载》中，你应该在 _posts directory. 文章名称格式如下:年-月-日-标题.MARKUP. 其他生成器也有类似的规则，它们提供了创建新文章的命令.

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

Middleman

中间人文章my_article

Hugo

Hugo新帖子/my_article.md

Hexo

Hexo新帖子my_article

在Markdown中，您只能使用一组特定的语法. 幸运的是，所有的生成器都可以处理原始HTML. For example, 如果你想用一个特定的类添加一个锚, 你可以像在普通HTML文件中那样添加它:

This is a text with a link.

Front Matter

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

例如，您可以这样向文章添加标签.

tags:
   - web
   - dev
   - featured

静态页面生成器中的模板

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

{{ page.title }}

让我们试着在我们的帖子中显示一个来自前面内容的标签列表 Jekyll. 您需要检查变量是否可用. 然后，需要循环遍历标记并在无序列表中显示它们.

{%- if page.tags -%}
 

   {%-用于页面中的标记.tags -%}
     
{{ tag }}
   {%- endfor -%}
 
{%- endif -%}

Middleman:

<% if current_page.data.tags %>
 

   <% for tag in current_page.data.tags %>
     
<%= tag %>
   <% end %>
 
<% end %>

Hugo:

{{ if .Params.Tags }}
 

   {{ range .Params.Tags }}
     
{{ . }}
   {{ end }}
 
{{ end }}

Hexo:

<% if (post.tags) { %>
 

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

Note: 检查变量是否存在以防止构建过程失败是一种很好的做法. 它可以节省您调试和测试的时间.

Using Variables

静态页面生成器提供了可用于提交模板的全局变量. 不同的变量类型包含不同的信息. For example, Hexo中的一个全局变量站点保存有关帖子的信息, pages, categories, 和网站的标签.

了解可用的变量以及如何使用它们可以使开发人员的工作更轻松. Hugo使用Go的模板库来制作模板. 如果您不熟悉，在Hugo中使用变量可能会有问题 the context或者他们称之为“点”.

《欧博体育app下载》没有全局变量. 但是，你可以打开 middleman-blog 扩展，将允许您访问一些变量，如文章列表. 如果希望添加全局变量，可以通过将数据提取到数据文件来实现.

Data Files

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

让我们将这些社交链接存储在数据文件中. 由于所有生成器都支持YAML格式，因此让我们将数据保存在社交媒体中.yml file:

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

Jekyll存储数据文件 _data 默认目录. Middleman和Hugo使用数据目录，Hexo使用 源/ _data目录.

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

Jekyll

{%- if site.data.social -%}
 

   {% for social in site.data.social %}
     
{{ social.name }}

   {%- endfor -%}
 

{%- endif -%}

Middleman

<% if data.social %>
 

   <% data.social.each do |s| %>
     
<%= s.name %>

   <% end %>
 

<% end %>

Hugo

{{ if $.Site.Data.social }}
 

   {{ range $.Site.Data.social }}
     
{{ .name }}
   {{ end }}
 
{{ end }}

Hexo

<% if (site.data.social) { %>
 

   <% site.data.social.forEach(function(social){ %>
     
<%= social.name %>
   <% }); %>
 
<% } %>

Helpers

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

{{ page.标题|大写}}

Middleman有类似的语法:

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

Hugo使用以下命令:

{{ .Title | upper }}

Hexo有不同的语法，但结果是一样的.

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

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

资产管理在静态页面生成器之间的处理方式是不同的. 无论资产文件放在哪里，Jekyll都会编译它们. Middleman只处理存储在源文件夹中的资产. Hugo中资源的默认位置是assets目录. Hexo建议将资源放在全局源目录中.

SASS

杰基尔支持萨斯的开箱即用，但你应该跟随 some rules. Middleman也支持Sass的开箱即用. Hugo编译了Sass 它的LibSass转译器. Hexo does it via plugin.

ES6

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

Images

默认情况下也不支持图像优化. 此外，像es6插件一样，有不止一个插件可以优化图像. 做你的功课，并尝试找到最好的插件的工作. 或者，您可以使用第三方解决方案. In my blog 这是建立与Hexo，我使用cloudary免费计划. I developed a cloudinary tag，我正在通过cloudary转换提供响应性和优化的图像.

插件,扩展

静态页面生成器具有强大的库，允许您自定义您的网站. 每个插件都有不同的用途. 你可以找到各种各样的插件, 从liverload获得更好的开发环境到生成Sitemap或RSS提要.

您可以编写一个新的插件或扩展. 在此之前，请检查是否存在类似的插件. See Jekyll插件列表, 中间人扩展, and Hexo plugins. Hugo没有插件或扩展. 但是，它确实支持自定义短代码.

Markdown中的短代码

短代码是可以放在Markdown文档中的代码片段. 这些片段输出HTML代码. Hugo和Hexo支持短代码. 有内置的短代码，就像《欧博体育app下载》中的人物:

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

Hexo youtube短代码:

{% YouTube video_id %}

如果你找不到合适的短代码，你可以创建一个新的. 例如，Hexo不支持CanIUse嵌入，我开发了 a new tag 支持CanIUse嵌入. 不要忘记在npm或官方的生成器站点发布你的插件. 如果你这样做，社区会很感激的.

CMS

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

奖励:JAMstack模板

如果您不想花费太多时间来配置您的项目，那么您可以从 JAMstack模板. 其中一些模板已经预先配置了CMS，这可以为您节省很多时间.

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

Wrapping Up

静态页面生成器是一种快速可靠的方式来建立一个网站. 现在，你甚至可以用一个生成器来构建重要的、高度定制的网站.

For example, Smashing Magazine 去年搬到了JAMstack，他们设法大大提高了网站的速度. 静态网站还有其他成功的例子，它们都有相同的原则——生成静态资源，并通过内容交付网络交付，以获得更快的加载速度和更好的用户体验.

你可以对静态网站做更多的事情:从使用Wordpress REST API作为后端到使用Lambda函数. 即使对于简单的网站，也有很好的解决方案，比如使用 HTTPS开箱即用 or 处理表单提交.

我希望静态页面框架的概述能够帮助您认识到它们的潜力，并在下次考虑新项目时考虑使用它们.