家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

今天给大家带来的主题是2023 年值得考虑的10大静态站点生成器，话不多说，直接开始！

前言

在不断发展的 Web 开发环境中，静态站点生成器 (SSG) 已成为开发人员快速高效地创建网站的流行工具。 它们弥合了传统静态网站（使用需要手动更新和修改的 HTML 和 CSS 构建）与依赖数据库和服务器端脚本语言（如 PHP）的动态网站之间的差距。

本文将探讨 2023 年 10 个顶级 React 静态站点生成器 SSG，通过对每一个静态站点生成器的初步比较，帮助开发者选择最适合特定项目需求的静态站点生成器。

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

React 静态站点生成器是一种工具，可让开发者使用 React 组件作为站点的构建块来生成静态网站。 首先一起来了解什么是静态站点和静态站点生成器。

静态站点是由预构建的 HTML、CSS 和 JavaScript 文件组成的网站，这些文件完全按照静态站点生成器生成的方式提供给用户。 这些文件不会根据用户交互或输入而更改，也不需要服务器端处理。

静态站点生成器是一种自动化构建静态网站过程的工具。 它接受输入文件（例如 Markdown 文件、HTML 模板或 React 组件）并生成静态 HTML、CSS 和 JavaScript 文件，这些文件可以直接提供给用户，使开发人员可以快速轻松地创建网站，而无需完整的 Web 应用程序堆栈。

2.React 静态站点生成器用例

在静态站点生成器出现之前，开发人员必须手动使用 HTML 和 CSS 对每个网站页面进行编码。 这种方法既费时又容易出错，难以维护和更新大型网站。

借助 React 静态站点生成器，开发人员可以创建可跨多个页面重复使用的模板或布局，从而更轻松地更新和维护大型网站。 这样可以节省大量时间和成本并提高网站性能。

使用 React Static Site Generator 的一些优点包括：

• 提高网站性能和速度
• 更容易维护和部署
• 更好的可扩展性和灵活性
• 增强的 SEO 功能

React 静态站点生成器的典型用例包括：

• 构建文档网站：可用于创建易于浏览和更新的文档站点。
• 开发博客：可用于创建快速、响应迅速且易于更新、维护和托管的博客。
• 创建电子商务网站：可用于创建快速、可扩展的电子商务网站，提供出色的用户体验。因为这些网站是静态的，它们可以处理大量流量而不会减慢或崩溃。

3.10 个值得考虑的 React 静态站点生成器

在探索每个 React 静态站点生成器之前，需要首先了解当使用静态站点生成器生成静态站点时，会生成一组静态文件，这些文件可以直接提供给用户而无需服务器端处理，但是依然需要平台来托管这些静态文件。

下面来一起看看 10 个值得考虑的 React 静态站点生成器。

3.1 Next.js

Next.js 是一种流行的基于 React 的框架，在过去几年中在 Web 开发社区中得到广泛采用，现在普遍被认为是最好的 React 静态站点生成器之一。

Next.js 具有以下明显优势：

• 支持自动代码拆分和延迟加载，可以通过减少每个页面需要加载的代码量来提高网站性能。
• 可以轻松集成流行的 React 库和框架，例如 Redux、GraphQL、Material UI 等等。 这种灵活性和易于集成有助于开发人员和企业等广泛采用 Next.js。
• 具有广泛的使用案例： 比如 Hulu 和 TikTok 等知名网站。

目前 Next.js 在 Github 上有超过 105k 的 star、23.5k 的 fork、1330k 的项目依赖量，代码贡献者达到了 2.6k、NPM 周平均下载量达到了 298K，是妥妥的前端顶级开源项目。

3.2 Gatsby

Gatsby 是一个开源框架，它将 React、GraphQL 和 Webpack 的功能组合到一个用于构建静态网站和应用程序的工具中。 由于其支持的网站性能好、代码拆分等令人印象深刻的开箱即用功能以及友好的开发人员体验，Gatsby 正迅速成为现代 Web 开发的主要工具。

Gatsby 是现代网络的产物，其采用 JAMstack 架构、静态站点生成器和其他网站优化策略。Gatsby 具有以下明显特征：

• 提供 Gatsby 框架：使用基于 React 的开源框架构建快速、安全且功能强大的网站。
• Gatsby 数据层：将不同的内容、API 和服务无缝集成到一种 Web 体验中。
• Gatsby 云服务：在最快的可用网络上实时构建、预览和部署 Gatsby 站点。

Gatsby 已经不只是一个静态站点生成工具，而是一整套的静态站点解决方案。目前 Gatsby 在 Github 上有超过 54.4k 的 star、10.5k 的 fork、478k 的项目依赖量，代码贡献者达到了 3.9k、NPM 周平均下载量达到了 3487K，是妥妥的前端顶级开源项目。

3.3 Docusaurus

Docusaurus 是一个基于 React 的静态站点生成器，专为构建文档网站而设计。它是一个开源工具，由 Meta 创建并由与 React 社区密切合作的开发人员团队维护。

Docusaurus 为构建文档站点的开发人员提供了诸多优势，包括：

• 易于设置和使用：具有简单直 观的设置过程。
• 可定制且灵活：高度可定制，并为开发人员提供广泛的选择，例如主题、插件和样式。
• 适用于大型项目：非常适合大型项目，因为开发人员可以轻松地将他们的文档组织成多个部分和页面。
• 适合协作：带有内置版本控制系统，允许多个用户在同一个文档站点上进行协作。
• 有利于 SEO：生成针对搜索引擎优化 (SEO) 进行优化的静态网站。
• 响应式设计：具有针对在不同设备和屏幕尺寸上查看而优化的响应式设计功能。

将 Docusaurus 与 React 结合使用的主要优势之一是它允许开发人员利用 React 的强大功能，包括创建可重用组件的能力，从而节省时间。目前使用 Docusaurus 构建的一些流行网站包括： React Native、Algolia DocSearch 和 Ionic 等等。

目前 Docusaurus 在 Github 上有超过 43.9k 的 star、6.8k 的 fork、9.5k 的项目依赖量，代码贡献者达到了 1.1k、NPM 周平均下载量达到了 5K，是妥妥的前端优质开源项目。

3.5 Astro

Astro 是一种流行的 Web 框架，用于构建以内容为中心的高性能网站。Astro 代表下一代前端架构，可以优化网站，允许开发者选择已有的 UI 框架（如 React、Svelte 和 Vue），使用 Astro 构建的站点加载速度提高 33%，JavaScript 大小减少 90%。

随着 Astro 2.0 的发布，其通过混合渲染实现了 SSG、SSR 的完美结合。

Astro 2.0 是第一个为 Markdown 和 MDX 提供完整类型安全的 Web 框架。 Astro 可以通过内置的解析、验证和自动 TypeScript 类型生成来组织 Markdown。 对于在站点上使用 Markdown 来说，Astro 2.0 的发布是一个很好的消息。

Astro 2.0 的新特性还包括：Markdown 和 MDX 的自动类型安全检测、混合渲染（静态&动态结合）、重新设计错误（引入错误叠加层（Error Overlay））、开发服务器优化、集成 Vite 4.0 等等。

Astro 在 2 年前开源，在 Github 上有超过 28.4K 的 star，1.4k 的 fork，有超过 29.2k 的项目使用它，NPM 周平均下载量超过 84K。

3.5 Qwik

Qwik 是一种快速、轻量级的 React 静态站点生成器，对于寻求快速简便的方法来构建高性能网站的开发人员来说值得一试。

Qwik 构建的站点能够快速加载，因为在构建时生成静态 HTML 和 JavaScript 页面。 不需要在运行时进行服务器端渲染或 JavaScript 执行。 同时， Qwik 还对其他 Web 技术提供可靠的支持，包括 ：Webpack、Babel 和 TypeScript。

Qwik 使用预渲染和缓存来最大限度地减少服务器请求并加快页面加载速度，使 Qwik 构建的站点即使在缓慢或不可靠的网络上也能提供闪电般的性能。

总的来说，Qwik 具有以下独特优势：

• 快速高效
• 开发工作流程简单直观
• 高度的灵活性和可定制性，具有广泛的插件和选项
• SEO 友好，内置了对元数据标签和结构化数据的支持。

目前 Qwik 在 Github 上有超过 16.5k 的 star、0.83k 的 fork、2.2k 的项目依赖量，代码贡献者达到了 0.31k、NPM 周平均下载量 8K，是妥妥的前端优秀开源项目。

3.6 其他 SSG 方案

当然除了上面介绍的 5 个静态站点生成器外，还有一些优秀的方案也值得考虑，比如：

Cuttlebelle

Cuttlebelle 是一个相对不太知名的 SSG，但它是一个很棒的框架，可以将编辑和代码问题分开。 开发者可以通过将 Cuttlebelle 与 React 组件结合使用来扩展可能性。使用此框架，可以创建 Javascript XML、编写布局、从外部 API 获取数据、进行 Jest 测试并轻快的进行部署。

目前 Cuttlebelle 还处于起步阶段，目前 Github 上有接近 0.5k 的 star，是一个值得关注的 SSG 前端项目。

Hugo

这个静态站点生成器是用 Golang 编程语言编写的，开发者可以在 ReactJS 应用程序中使用。 Hugo 也是一个免费的开源框架，拥有 300 多个主题。

Hugo 最好的地方在于页面加载时间不到一毫秒，让用户在一秒内获得整个网站。 Hugo 支持 Windows、Linux、FreeBSD、macOS 等操作系统。 Hugo 还有助于菜单、分类法、各种内容类型、动态 API 和其他用于构建有趣的 React 网站的插件。

目前 Hugo 在 Github 上有超过 66.6k 的 star、7.1k 的 fork、0.4k 的项目依赖量，代码贡献者达到了 0.76k、是一个值得尝试的 React 生态前端 SSG 优秀开源项目。

React Static

React 团队创建了这个静态站点生成器来克服其他 SSG 的缺点，以便开发人员获得更好的体验。 使用 React Static，网站可以实现从源到路由的更快数据流。

React Static 的学习曲线更短，因此开发人员会非常乐意使用它。 它结合了属性映射功能（Prop Mapping Functionalities）以及数据摄取（Data Ingestion）和查询。

目前 React Static 在 Github 上有超过 10.2k 的 star、0.8k 的 fork、0.4k 的项目依赖量，代码贡献者 0.24k、是一个值得尝试的 React 生态前端 SSG 优秀开源项目。

Jekyll

Jekyll 是一个简单的、博客感知的静态站点生成器，非常适合个人、项目或组织站点。 把它想象成一个基于文件的 CMS，没有那么复杂。 Jekyll 获取内容，渲染 Markdown 和 Liquid 模板，并吐出一个完整的静态网站，最后由 Apache、Nginx 或其他网络服务器提供服务。 Jekyll 是 GitHub Pages 背后的引擎，开发者可以使用它直接从 GitHub 存储库托管站点。

目前 Jekyll 在 Github 上有超过 46.5k 的 star、10.1k 的 fork、代码贡献者达到了 1k、是一个值得尝试的 React 生态前端 SSG 优秀开源项目。

Phenomic

Phenomic 是一个模块化的网站编译器，可以在其中将 React 用作渲染器，将 Webpack 用作打包器。 开发人员可以拥有使用此静态网站生成器 React 构建成熟网站或应用程序的经验。

Phenomic 有一些资源和一个文档来构建 React 博客应用程序。 借助此 SSG，可以构建具有极佳和快速用户体验的高性能 SEO 网站。

目前，Phenomic 在 Github 上有超过 3.2k 的 star、0.3k 的 fork、不过值得一提的是目前该项目已经废弃，官方推荐使用 Next.js 进行替换。

4.本文总结

本文主要给大家带来的主题是2023 年值得考虑的10大静态站点生成器。因为篇幅有限，文章并没有过多展开，如果有兴趣，文末的参考资料提供了优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://github.com/vercel/next.js/

https://github.com/gatsbyjs/gatsby

https://www.mparticle.com/blog/what-is-gatsby/

https://qwik.builder.io/docs/

https://github.com/gohugoio/hugo

https://kinsta.com/blog/react-static-site-generator/

https://github.com/react-static/react-static

https://github.com/jekyll/jekyll

https://github.com/cuttlebelle/cuttlebelle

https://github.com/MoOx/phenomic

https://www.bacancytechnology.com/blog/react-static-site-generators

https://aglowiditsolutions.com/blog/top-react-static-site-generators/

TML

HTML 可以从以下几个方面进行了解：

索引文件

文件 public/index.html 是一个模板，将使用 html webpack 插件进行处理，在构建期间，将自动注入资产链接，除此之外，Vue CLI 还可以自动注入资源提示（预加载/预取）、清单/图标链接（使用PWA插件时）以及生成期间生成的JavaScript和CSS 文件的资产链接。

插值

由于索引文件用作模板，因此可以使用lodash模板语法在其中插入值：

• <%=VALUE%> 用于非缩放插值；
• <%-VALUE%> 用于HTML转义插值；
• <%expression%> 用于JavaScript控制流。

除了html webpack插件公开的默认值之外，所有客户端env变量也可以直接使用。

<link rel="icon" href="<%=BASE_URL %>favicon.ico">

预载

<link rel="preload"> 是一种资源提示，用于指定页面加载后很快将需要的资源，因此如果我们希望在页面加载生命周期的早期，在浏览器的主要呈现机制启动之前就开始预加载。

默认情况下，Vue CLI应用程序将自动为应用程序初始呈现所需的所有文件生成预加载提示。提示是使用 @vue/preload webpack plugin 注入的，可以通过 chainWebpack as config.plugin（'preload'） 进行修改/删除。

预取

<link rel="prefetch"> 是一种资源提示，告诉浏览器在页面加载完成后，在浏览器空闲时间内预取用户近期可能访问的内容。

默认情况下，Vue CLI应用程序将自动为为异步块生成的所有JavaScript文件生成预取提示（这是通过dynamic import（）按需拆分代码的结果）。

提示是使用 @vue/preload webpack plugin 注入的，同样是可以通过chainWebpack as config.plugin（'prefetch'） 进行修改/删除。

注意：在使用多页设置时，应更改上面的插件名称以匹配结构 “prefetch-{pagename}”，例如“prefetch app”。

禁用预取插件后，您可以使用webpack的嵌入式注释手动选择要预取的特定块：

import(/* webpackPrefetch: true */ './someAsyncComponent.vue')

加载父块时，webpack的运行时将注入预取链接。

禁用索引的生成

当使用具有现有后端的VUE CLI时，可能需要禁用 index.html 的生成，以便生成的资产可以在服务器呈现的页面中使用，因此我们可以将以下内容添加到vue.config.js：

但是上面的代码是存在一些问题的：

• 硬编码的文件名使得实现高效的缓存控制变得更加困难；
• 硬编码的文件名也不能很好地处理代码拆分，因为代码拆分会生成具有不同文件名的附加JavaScript文件；
• 硬编码文件名不适用于现代模式。

相反，我们可以应该考虑使用indexPath选项将生成的HTML用作服务器端框架中的视图模板。

静态资产

静态资产可以从以下几个方面进行了解：

静态资产处理可以有两种不同的方式：

• 在JavaScript中导入或通过相对路径在templates/CSS中引用。此类引用将由webpack处理。
• 放置在 public 中并通过绝对路径引用。这些资产只会被复制而不会通过webpack

相对路径导入

在 .JavaScript、CSS或 *.vue 文件中使用相对路径（必须以开头）引用静态资源时，该资源将包含在webpack的依赖关系图中。在此编译过程中，所有资产URL，例如 <img src="…">、background:url(...) 和CSS @import，都被解析为模块依赖项。

<img src="./image.png">
// 将被编译为
h('img', { attrs: { src: require('./image.png') }})

在内部，我们使用 file-loader 通过版本散列和正确的公共基路径确定最终文件位置，并使用 url-loader 有条件地内联小于4kb的资产，从而减少HTTP请求的数量；我们还可以通过chainWebpack调整内联文件大小限制。

URL转换规则

• 如果URL是一个绝对路径（例如： /images/jtzc_1.png），它将保持原样；
• 如果URL以 . 开头，它将被解释为一个相对的模块请求，并根据文件系统上的文件夹结构进行解析；
• 如果URL以~ 开头，则将其解释为模块请求之后的任何内容，也就意味着我们甚至可以引用节点模块中的资源；（例如：<img src="~some-npm-package/jtzc_1.png">）
• 如果URL以 @ 开头，则它也被解释为模块请求。

公用文件夹

放置在公用文件夹中的任何静态资产都将被复制，而不会通过webpack。我们需要使用绝对路径引用它们。

注意：我们尽可能将资产作为模块依赖关系图的一部分导入，以便它们通过webpack时具有以下好处：

• 脚本和样式表被缩小并捆绑在一起，以避免额外的网络请求；
• 丢失的文件会导致编译错误，而不是用户的404个错误；
• 结果文件名包含内容散列，因此我们无需担心浏览器缓存其旧版本。

公共目录是作为一个转义填充提供的，当通过绝对路径引用它时，我们需要考虑到自身的应用程序将部署在哪里，如果应用未部署在域的根目录下，则需要在URL前面加上publicPath：

• 在public/index.html或html webpack plugin用作模板的其他html文件中，需要用<%=BASE_URL%>作为链接的前缀：<link rel="icon" href="<%=BASE_URL %>favicon.ico">
• 在模板中，您需要首先将基本URL传递给组件data () { return { publicPath: process.env.BASE_URL } } 然后：<img :src="`${publicPath}my-image.png`">

怎么使用公共文件夹：

• 在生成输出中需要具有特定名称的文件；
• 成千上万的图像，我们需要动态地引用它们的路径；
• 某些库可能与Webpack不兼容，没有其他选项时，只能将其作为 <script>标记包含。

链接：https://www.9xkd.com/