[译] 2018 年，如何选择最好的静态站点生成器

• 原文地址：How to Choose the Best Static Site Generator in 2018
• 原文做者：Mathieu Dionne
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：ssshooter
• 校对者：dandyxu lihanxiang

截止到如今已经有很是多静态站点生成器了。

即便咱们已经作了 15+（还在增长）个演示和教程，也没法覆盖全部静态站点生成器。

我难以理解 JAMstack 和静态页面生态系统的开发人员的感觉…

大概像爱丽丝踏入仙境那样吧。

为了解决这个问题，咱们决定把咱们的知识综合到一块。

本文结束时，你应该可以对各个项目都能找到对应的最佳静态站点生成器（Static site generators 缩写 SSG）。

你能够学习到如下内容：

1. 它们是什么（以及为何要使用它们）。
2. 如今最好的静态站点生成器是什么。
3. 在选择 SSG 以前的注意事项。

1. 静态站点生成器是什么？

若是你看本文的目标是寻找合适的 SSG，那么你应该很清楚 SSG 是什么啦，不过我在这里解释一下也无伤大雅。

静态网站不是什么新鲜事物。它们是咱们在动态 CMS（WordPress，Drupal 等）以前用来构建 Web 的方式。

那有什么新特性？

过去几年中出现的现代的静态站点生成器，扩展了静态站点的功能。

简而言之，静态站点生成器会获取您的站点内容，将其应用于模板，并生成纯静态 HTML 文件，以便传递给访问者。

与传统的 CMS 相比，这一处理过程带来了许多好处。

为何要使用 SSG？

每次访问者在内容繁多的网站上跳转，必须动态地从数据库中提取信息，这可能致使页面呈现速度慢，从而用户流失。

SSG 将已编译的文件提供给浏览器，大大减小了加载时间。

→ 安全性和可靠性

使用动态 CMS 开发的最大威胁之一是缺少安全性。动态 CMS 复杂的后端架构产生了不少潜在风险。

而使用静态设置，几乎没有使用服务器端功能。

→ 灵活性

老旧繁琐的传统 CMS 不灵活。扩展的惟一方法是使用现有插件，或者为某个平台定制。若是不懂技术直接用却是很爽，但开发人员发现本身各类被束缚。

SSG 对技术要求可能会稍高，但自由度一样也高。他们中的大多数还有插件生态系统，主题和易于插入第三方服务。此外，使用其核心编程语言的可扩展性是无限的。

→ 他们的弱点……正在消失。

随着 SSG 生态系统的不断发展，不少主要问题都被新工具解决。

内容管理和管理任务对于没有技术背景的用户来讲可能并不简单。但好消息是，如今有大量的 headless CMS（无头 CMS） 能够完善你的 SSG。headless 和传统 CMS 之间的区别在于，您只能将前者用于“内容管理”任务，而不是模板和前端内容生成。你总会发现一个适合你的需求。

一些静态站点 CMS 直接支持SSG。例如，Jekyll 和 Hugo 的 Forestry 或者广泛适用的 DatoCMS。

若是你须要一些动态的特性，也有不少很棒的服务可供选择：

• 实现后端功能的 Serverless 或 Webtask
• 用于部署的 Netlify
• 用于搜索的 Algolia
• 电商方面能够考虑 Snipcart
• 用户生成内容（如评论）能够考虑 Disqus 或 Staticman

这里只是其中几个例子。

经过将这些开发进度转化为业务优点，将 JAMstack 和静态站点生成器发布给你的客户，阅读本指南了解更多。

2. 应该选择哪一个静态站点生成器？

了解 SSG 是什么是一方面，弄明白哪一个 SSG 更适合本身又是另外一回事了。

网上有超过 400 种 SSG。若是你要是从静态 Web 开始开发，如下内容将有助于你的决策！

我将介绍其中最好的一部分，但请记住它仅仅是全部现有 SSG 种的一小部分。完整列表建议访问staticgen.com。

2.1 2018年最佳静态站点生成器

在本节中，我将为你介绍那些广为人知而且能够知足大多数项目的需求的 SSG。这个推荐基于这些项目的热度，也取决于咱们团队创建数十个 JAMstack demo 的经验。

Jekyll

Jekyll 仍然是最受欢迎的 SSG，具备庞大的用户群和大量插件。做为我的博客很是适合，也被电子商务网站普遍使用。

Jekyll 对新手来讲的一个主要卖点是各类 importer。它能使现有站点相对轻松地迁移到 Jekyll。例如，若是你有 WordPress 站点，则可使用 importer 切换到 Jekyll。

而且，Jekyll 可让你专一于内容而无需担忧数据库，更新和评论审核，同时保留永久连接，类别，页面，帖子和自定义布局。

Jekyll 用 Ruby 构建，并集成到 GitHub Pages 中，所以被黑客攻击的风险要低得多。主题能够简单更换，自带 SEO，而且 Jekyll 社区提供了大量的自定义插件。

→ Jekyll 教程：

• 静态电商网站：集成 Snipcart 与 Jekyll
• Jekyll CloudCannon CMS：构建多语言网站
• Staticman 用户内容生成 + Jekyll 静态网站

---

Gatsby

Gatsby 将静态页面带到前端技术栈，依靠浏览器端 JavaScript，可重用 API 和预构建标记。这是一个易用的解决方案，可使用React.js，Webpack，现代 JavaScript，CSS 等建立 SPA（单页应用程序）。

Gatsby.js 是一个静态 PWA（Progressive Web App）生成器。它仅提取关键的 HTML，CSS，数据和 JavaScript，以便您的网站尽量快地加载。

其丰富的数据插件生态系统容许网站从无头 CMS，SaaS 服务，API，数据库，文件系统等渠道拉取数据。

Gatsby 应用普遍，对于须要利用来自多个来源的数据的站点而言，它是不二之选。它正在走向顶峰，若是它在将来几个月成为头号 SSG，请不要感到惊讶。

哦，它也可能解决了 SSG 最大的开发难题之一：长原子构建（long atomic build）。创做者 Kyle Matthews 以 Gatsby 为主最近创建了一家公司。Gatsby Inc. 将为 Gatsby 网站构建一个云基础架构，能够实现增量构建，甚至能够说是改变了 SSG 的游戏规则了。

→ Gatsby 教程：

• Snipcart & Gatsby 搭建 ReactJS 无后台电商网站
• Grav CMS + Gatsby + GraphQL
• 静态表单，受权，无服务器功能（Gatsby + Netlify Demo）

---

Hugo

一个易于设置，用户友好的 SSG，部署运行网站不须要太多配置。

Hugo 以其构建速度而闻名，而其数据驱动内容的特性能够轻松地基于 JSON/CSV 源生成HTML。你经过不多的代码就能使用预先构建的模板快速设置 SEO，评论，分析和其余功能。

此外，Hugo 为多语言网站提供全面的 i18n 支持，受众面大大增长。这对于想要本地化的电商网站特别有用。

最近，他们发布了一种先进的主题功能，这可让你使用可重用组件构建 Hugo 站点。

→ Hugo 教程：

• 搭建高速静态电商网站
• Hugo 的静态电子商务与 Forestry.io 中的产品管理
• Forestry.io & Hugo 静态电商网站
• 6 种简易工具给你优秀，快速的静态电商体验

---

Next.js

Next.js 本质上不仅是 SSG，它是一个用于静态服务端渲染的 React 轻量框架。

Next.js 构建能够在浏览器端和服务器上均可运行的通用 JavaScript 应用程序。这个过程提高了这些应用程序在首页加载和搜索引擎优化功能方面的表现。Next.js 包括自动代码拆分，简单的前端路由，基于 webpack 的开发环境和任何 Node.js 服务器实现等一整套功能。

JavaScript 如今无处不在，React 是如今最流行的 JS 前端框架，因此它绝对值得一看。

→ Next.js 教程：

• Next.js 教程：SEO 友好的 React 电商单页应用
• 用 Next.js 客户端渲染 ReactJS 应用

---

Nuxt.js

名字和功能都与 Next.js 类似，但 Nuxt 是用于建立 Vue.js 应用程序的框架。它能够在抽象出客户端/服务器分布的同时启用 UI 呈现。它还有一个用于构建静态 Vue.js 应用程序的 nuxt generate 选项。

这种用于无服务器的简约框架使用十分简单，但它更倾向于程序化实现而不是传统的 DOM 脚手架。

因为 Nuxt 是 Vue 框架，所以强烈建议你先了解 Vue，固然以前使用 Vue 的开发者会感到宾至如归。随着 Vue.js 的迅速崛起，咱们也用 Vue 重构了项目，因此最后固然要推荐一下它啦。

若是你是 Vue.js 用户，你也能够了解一下VuePress。

→ Nuxt 教程：

• Cockpit CMS & Nuxt.js 全栈教程
• Nuxt.js 服务器端渲染、路由与页面跳转

---

2.2 主要考虑因素

本节将采用另外一种方法，帮助你找到最适合本身的 SSG。

在选择合适的工具以前，你应该先问本身这些问题：

1. 您是否须要开箱即用的大量动态功能和扩展？

这里有两个流派：

1. 选择一个提供大量开箱即用的功能的静态站点生成器。不须要大量的插件或本身构建一切。若是你是这样想的，Hugo 提供了大量内置功能，其次 Gatsby 也挺适合于这个状况。
2. 选择功能较少的 SSG，但提供普遍的插件生态系统，而且容许你根据须要扩展和自定义设置。这多是 Jekyll 最大的优点之一。它长期以来如此热门，社区也逐渐完善，各类各样的插件也随之而出现。为了进一步推进这一律念，Metalsmith 或 Spike 将设置交给插件，其具备高度可定制性让其无所不能。要权衡的是，它对技术要求很高，但若是你想学习 SSG 运行的语言，这多是一线但愿！

2. 你在乎构建和部署时间吗？

正如我已经提到的，通常静态站点的速度就已经颇有优点，可是个别 SSG 更是非通常的快。

这局的赢家明显是 Hugo。它以其超快的构建时间而闻名，能够在几毫秒内将内容和模板组合成一个简单站点，以这个速度几秒钟内能够完成数千页。

诸如 Nuxt 之类的响应式框架也很是适合性能和搜索引擎优化。

Jekyll 在这方面就不怎么样了 —— 许多开发人员抱怨它的构建速度。

3. 你想用 SSG 处理什么类型的项目？

各个 SSG 实现的目的并不相同，选择前想清楚你的网站类型能够省掉不少麻烦事。

→ 博客或小型我的网站：

Jekyll，答案显而易见。它自己就为博客而生，它能够抽象出博客的主要内容。Hexo 是搭建简单博客平台的另外一个选择。不过，其实大多数 SSG 均可以作博客或我的网站。

也能够了解一下：Hugo，Pelican，Gatsby。

→ 文档：

GitBook 使编写和维护高质量的文档变得容易，如今已经是最流行的文档工具。

也能够了解一下 Docusaurus，MkDocs。

→ 电子商务：

您还能够用 SSG 生成电商网站（如前面的教程中所示）。但电商网站很差作，须要考量的东西十分多：用户体验方面，例如速度和UI定制，搜索引擎优化也是必不可少的。

大型电商网站须要 CMS 进行产品管理，这个时候就要思考哪一个 SSG 更适合你选择的无头 CMS。

根据咱们的经验，咱们推荐 Gatsby 和 Nuxt 这样的响应式框架。但若是你仍是须要一切从简，你能够考虑 Jekyll 或 Hugo。

→ 营销网站：

以前还没提过 Middleman。它的不同凡响之处在于它能够灵活搭建任何类型的网站，而不是专一于博客引擎。这对于高级营销网站来讲很是棒，MailChimp 和 Vox Media 等公司也将它用于本身的网站。

也能够了解一下 Gatsby，Hugo，Jekyll。

4. 你是否但愿本身修改网站和生成器？是否须要使用本身精通的语言？

如下是各个框架使用的语言：

• JavaScript：Next.js & Gatsby（适用于 React）、Nuxt & VuePress（适用于 Vue）、Hexo、GitBook、Metalsmith、Harp、Spike。
• Python：Pelican、MkDocs、Cactus.
• Ruby：Jekyll、Middleman、Nanoc、Octopress.
• Go：Hugo、InkPaper。
• .NET：Wyam、pretzel。

5. 非技术用户是否须要管理此网站？

开发并网站构建后，网站内容的管理员是谁？在大多数状况下，他们不是技术人员，他们很难经过代码进行内容管理。

这种状况应该将有无头 CMS 的 SSG 放在首位。CMS 的选择很重要，找到能够对接的 SSG 一样重要。

Gatsby 的新功能，使用 GraphQL 实现。这里不解释 GraphQL 是啥，简而言之，它能够实现更快更简洁的数据查询。

6. 你依赖社区和同行的帮助吗？

若是答案是确定的，请考虑前面列出的顶级静态站点生成器。这些都是目前最受欢迎的 SSG，社区活跃，案例研究和各类资源的支持都不会落后。

注意，现代静态网站和 JAMstack 仍然是一个相对较新的生态系统的一部分，若是你用的工具用户很少，踩到坑可能就要本身填了。

总结

到最后我仍是不会告诉你，你应该选择什么 SSG，你应该按本身的状况本身作选择。

如今你能够认真思考一下真正吸引你的是什么。有一件事是确定的，SSG 必定就会给你自由和灵活的感受！

你会推荐什么静态网站生成器？JAMstack 生态系统将何去何从？我真的很想听听你们的意见，请在下面的评论中加入讨论！

若是您喜欢这篇文章，就在 Twitter 上分享一下吧！

首发地址 Snipcart blog 本文地址（英语） newsletter

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。