2020 年值得关注的最佳 JavaScript 静态网站生成器

JAMStack

推理

缺点

工具

基于 React

基于 Vue

其他

相当不错的旅程...

这篇文章取自我的博客，因此请务必查看以获取更多最新内容。

静态网站和所谓的JAMstack最近非常流行。随着 2020 年的临近，这种趋势似乎没有停止的迹象。为什么？为什么重新设计和命名的老式 HTML + CSS + JS 三元组会受到如此多的关注？在本文中，我们将探讨 JAMstack 是什么以及它的优点，并介绍一些基于 NodeJS 的优秀静态网站生成器 (SSG)。让我们开始吧！

JAMStack

首先，我们来聊聊 JAMstack 和静态网站本身。你可能已经知道，编程中的“堆栈”指的是一些工具集——一组库和框架的集合。常见的例子有MEAN（MongoDB、ExpressJS、Angular和NodeJS）和MERN（React而不是 Angular）堆栈。所以，正如你所见，这里有一些解密的内容。

现在，让我们回到 JAMstack，更具体地说，回到它的定义：

基于客户端 JavaScript、可重用 API 和预构建标记的现代 Web 开发架构。

我认为上面的文字是不言自明的。有了这些信息，我们就可以理解JAM快捷方式的含义了：

• JavaScript - Web 开发者最好的朋友，所有逻辑都在这里执行。通常同时存在于生成器和客户端；
• API——为 JS 提供数据提取的提供者；
• 标记- 模板，在您的网站部署时处理。

“JAMstack”这个术语最初是由Netlify在 2015 年左右使用的。它的主要目的是说服开发人员使用那些广为人知但不太受欢迎的静态网站。新名称旨在改变人们对旧技术的观念。正如我们今天所知——这个策略奏效了！

JAMstack 的核心思想是移除客户端和服务器之间的任何紧密连接。接收数据的唯一方式是通过API。这些数据稍后可以与 Markdown 和其他资源一起处理，以创建一个静态网站，然后将其提供给客户端。

推理

现在我们已经了解了所有术语，是时候探索 JAMstack 背后的原因和好处了。

定价

价格或许是静态网站最重要的优势之一。托管静态网站无需强大的服务器，也无需CMS，而且随之而来的是成本更低。记住，你只需将网站处理/预构建为静态资源（HTML、JS、CSS、文本文件等）即可。这些资源可以以极低的价格提供服务，并且与标准、低价的托管服务相比，其要求不会更高。

表现

性能是静态网站的下一个关注点。这似乎显而易见——静态资源速度很快——这是它们的天性。在这方面，没有什么能比得上它们。使用 JAMstack，您可以轻松获得较高的 Google Lighthouse 评分，从而在搜索结果中获得更高的排名！除此之外，内容分发网络(CDN)的易用性可以进一步提升您网站的分发速度！

稳定与信心

这个问题可能有点棘手。“信心”是什么意思？嗯，主要是指你的网站及其架构的稳定性。有了 JAMstack，事情就变得非常简单了。它除了静态前端和生成过程之外，没有别的了。

您的数据来自不同的 API。其他功能可以通过无服务器系统提供。其背后的主要思想是，您可以使用第三方 API 和服务为您的网站提供额外的功能。目前有许多公共无服务器提供商，包括AWS、Google Cloud和Microsoft Azure，它们都能很好地与静态网站兼容。

可扩展性

基于 JAMstack 的网站易于扩展。这主要归功于其背后的性能和架构解决方案。前面提到，CDN 在其中发挥着至关重要的作用。改进交付流程无非就是提供更多更快的 CDN。

搜索引擎优化

静态网站的另一个难点。使用 JAMstack比使用单页应用程序(SPA)更容易获得良好的SEO排名。静态网站可以获得更好的Lighthouse评分，并且更有可能被 Google 和其他搜索引擎完全收录。而这正是 SPA 的不足之处。您必须使用服务器端渲染(SSR) 才能获得与静态网站几乎开箱即用的 SEO 性能。

安全

最后但同样重要的是安全原因。随着后端扩展到众多API和其他第三方服务，发生严重安全问题的风险将显著降低。

缺点

当然，静态网站也有一些缺点。可能最大的缺点就是它们是静态的。同样，这意味着你没有在它们背后运行任何真正的后端。而且，由于并非所有功能都能被无服务器服务很好地替代，因此 JAMstack 并不适合所有人。

此外，静态网站不像动态网站那样“易于升级”。要更新其内容，您需要先进行预处理。而且，网站的页面越多，这个过程就越慢。这就是为什么许多工具如此强调构建性能的原因。

所以，综上所述，最终决定权在你手中。无论你未来的网站是选择静态还是动态，最好先权衡一下两种方案的利弊。

工具

现在是时候探索一些最好的 JAMStack 工具了。但在此之前，让我先介绍一下以下生成器的一些基本细节。

首先，下面列出的工具基于NodeJS（JavaScript），并按所使用的JS 框架分组。其次，这里的所有工具都是通用的——没有文档生成器或其他专门的库和框架。关于这一点，您可以阅读我之前的一篇文章。

基于 React

GatsbyJS

GatsbyJS可以说是目前最流行的静态网站生成器之一。它允许您使用Webpack等流行工具，以及最重要的React来创建外观惊艳的静态网站。此外，GatsbyJS 的构建速度足以处理复杂的多页面设置。强大的社区、文档和庞大的生态系统使这款生成器成为同类产品中的佼佼者。大量的插件（包括第一方和第三方插件）允许您从无数来源提取数据（借助GraphQL），并轻松地为您的网站添加各种功能。

Next.js

Next.js是另一个基于 React 的 SSG。它由Zeit创建和支持，在 React 社区中享有盛誉。它不仅是一个生成器，更是一个功能齐全的框架，内置了SSR等其他功能。它让你可以选择创建哪种类型的网站。话虽如此，Next.js 可以被认为是一个一体化(AiO) 工具，适用于所有与 React 网站相关的功能。它拥有优秀的文档和更强大的社区支持。

静态反应

React Static，顾名思义，是一个用于 React 的渐进式静态站点生成器(SSG)。它与 React 紧密集成，对所有相关库和工具（例如Redux ）提供了强大的支持。它拥有出色的构建能力和卓越的网站性能。此外，它还通过开箱即用的热加载简化了开发体验。所有这些以及更多功能均记录在基于 GitHub 的精心优化文档中。

基于 Vue

格里索姆

说到基于 Vue 的 SSG，首先要说的就是Gridsome。它有点像GatsbyJS 的对应版本，只不过是 Vue 的！它同样拥有令人印象深刻的构建和网站性能，支持渐进式 Web 应用程序(PWA) 和SEO 优化，以及其他 JAMstack 的优点！也许它的社区不如 GatsbyJS 庞大，但作为一个相对较新的项目，我认为它看起来很棒！话虽如此，它的文档和社区参与度确实令人印象深刻。

Nuxt.js

Nuxt.js是一个功能齐全的框架。这意味着什么？主要是因为它是 Next.js 的 Vue 替代品，并且拥有多达三种渲染模式：SSR、静态网站和SPA。Nuxt.js作为AiO解决方案，可让您选择最适合您网站的方案。它非常稳定、知名，并且拥有出色的文档、社区和生态系统。考虑到所有这些，对于任何要求苛刻的 Vue 项目来说，它都是正确的选择。

VuePress

VuePress与以往的工具略有不同。它非常简约，允许你借助简单的Markdown文件生成页面内容。它拥有丰富的插件架构，并充分利用了Vue 生态系统的强大功能。它在某种程度上是为文档网站量身定制的；但是，由于可以在内容中使用自定义 Vue 组件，因此该工具可以用于许多不同的用途。总的来说，它的主要优点是简洁易用。

其他

Hexo

Hexo是基于 NodeJS 和Markdown 的SSG，专为博客作者量身定制。它速度快，插件丰富，能够为基于 Hexo 的静态网站提供各种功能。该框架还拥有完善的主题系统，官方页面上列出了多个主题。当然，您也可以根据个人需求创建自己的插件和主题。Hexo 还拥有详尽的文档和庞大的社区。

十一

Eleventy（或11ty）是一个简单的 SSG，是 Jekyll 的 JS 替代品。它极其灵活，数据处理能力出色，并支持多种不同的模板引擎和语言（markdown、html、hbs等）。11ty 的整体简洁性、易用性和渐进性使其成为一款非常有价值的工具。此外，它的文档也非常出色，内容丰富。

工兵

Sapper是一个基于Svelte 框架的 SSG ，该框架本身最近备受关注。由于 Svelte 的特性，它将大量处理工作移至编译步骤，因此默认情况下速度很快。Sapper 还支持SSR和其他AiO 框架的优点。因此，如果您喜欢 Svelte、对它感兴趣或想尝试一下，那么 Sapper 或许是您的理想之选。

相当不错的旅程...

现在您已经了解了 JAMstack 是什么以及有哪些工具可以处理它，是时候创建一个网站了！去吧，选择上面提到的生成器之一，或者其他任何您喜欢的生成器，亲自尝试一下，看看静态网站有多棒。除了尝试所有工具之外，没有其他神奇的方法可以找到最适合您的工具。话虽如此，我希望这篇文章至少能让您稍微了解一下静态世界的广阔和精彩。

在下面的评论区告诉我你还使用了哪些值得一试的 SSG——当然有很多！如果你喜欢这篇文章，不妨分享它，并在Twitter和Facebook上关注我，或者访问我的个人博客获取更多最新内容。我还有自己的YouTube 频道，你也可以去看看。感谢阅读这篇文章，祝你拥有美好的一天！