大家好，我是Echa。

最近有不少的粉丝私信小编问道：怎么实现静态站点页面？用什么技术实现？有部分懂技术的粉丝也会问SSG 和SSR有啥区别，是一样的东西么？SSG有哪些优点和缺点呢？

小编带着这些疑问继续为大家一一讲解，今天重点讲静态站点生成器SSG 大全，但是首先要彻底搞明白SSG用来做什么的：

• SSG：Static Site Generation，静态页面生成；
• SSR：Server Side Rendering，服务端渲染；

什么是SSG（static site generator）？

SSG是一种基于原始数据和一组模板生成完整静态 HTML 网站的工具。本质上，SSG会自动完成对单个 HTML 页面进行编码的任务，并使这些页面提前准备好为用户提供服务。因为这些 HTML 页面是预先构建的，所以它们可以非常快速地加载到用户的浏览器中。

SSG是内容管理系统 (CMS) 的替代品——另一种用于管理 Web 内容、生成网页和实施模板的工具。

SSG优点

• 加载速度快 -由于静态站点生成器是提前创建网页而不是按需创建网页（如使用 CMS），因此网页在用户浏览器中的加载速度略快。将HTML发送给客户端，所以几乎会立即看到页面内容。
• 无需获取其他客户端 -理想情况下，服务器呈现过程将进行所有必需的调用以获取数据，因此不会从客户端进行任何其他服务调用。
• 非常适合SEO
• 更轻量的后端 -静态网站是轻量级的，不需要在服务器端运行那么多代码，而基于 CMS 的网站不断向服务器端查询内容。
• 定制-开发人员可以创建他们想要的任何模板。它们不受 CMS 提供的字段的限制，也不受 CMS 内置模板的限制。

SSG缺点

• 大型页面可能会很慢 -如果路由很多，速度可能会变慢。
• 与某些UI库不兼容 -如果你用的某些库使用了window，那你就要想办法来解决了。 因为 Node 中没有window或者 document。
• 很少或没有预先构建的模板-定制的缺点是可能需要更长的时间。许多静态站点生成器不附带模板，开发人员首先必须花费大量时间从头开始构建它们。
• 没有用户友好的界面-非开发者用户更难使用静态站点生成器发布内容。没有 CMS 界面，使用原始的未格式化数据可能会让用户感到害怕。此外，进行网站更新通常需要开发人员支持。

近年来，构建网站的方式发生了很大变化，出现了很多新的构建网站的方式。静态站点生成器 (SSG) 就是一种构建网站的现代 Web 开发技术，其正在变得越来越流行！

2023年值得考虑的静态站点生成器大纲

1. Next.js
2. Hugo
3. Gatsby
4. Jekyll
5. Nuxt
6. Docusaurus
7. Hexo
8. Slate
9. GitBook
10. Astro
11. Docsify
12. VuePress
13. MkDocs
14. UmiJS
15. Eleventy

为了正确审查值得考虑的静态站点生成器，我们将把它们分为以下两类：

• 提供多种渲染方法（包括静态站点生成）的框架：Gatsby、Next.js、Astro、Nuxt.js和 SvelteKit等等。
• 仅提供静态渲染功能的 SSG：Eleventy 和 Hugo。

目前，不分语言的话有超过 350 个静态站点生成器可以供我们选择：

详细请见：https://jamstack.org/generators/

Next.js

官网网址：https://nextjs.org/

Github：https://github.com/vercel

Next.js 不仅是一个静态站点生成器，而且是使用最广泛的开源、基于 React 的框架之一，用于构建网站和 Web 应用。它支持服务端渲染 (SSR)、静态站点生成 (SSG)、增量静态渲染和客户端渲染 (CSR)。

Next.js 的一大优点是它允许我们决定如何为每个页面使用 SSR 或 SSG。这使其成为需要多种渲染方法的更复杂项目的不错选择。

Next.js 由 Vercel 创建，目前拥有 101k GitHub Star。Next.js 还具有结构良好且易于浏览的文档，可提供无缝的学习体验。

特性：

• 基于文件的路由系统
• 默认为 SSG，不同于默认为 SSR 的其他工具
• 通过其自定义图像组件优化图像

图下图：

Hugo

官网网址：https://gohugo.io/

Github：https://github.com/gohugoio/hugo

Hugo 是一个用 Go 编写的静态站点生成器，针对快速构建时间进行了优化。

Hugo 提供了内容管理功能，使其成为拥有许多帖子的网站或博客的绝佳选择。首先，它处理存储在 /content 目录中的 markdown 文件中的所有内容，使得从单个文件夹发布和管理大量内容变得容易。其次，Hugo 内置了对分页的支持，生成目录，并支持将内容分组到类别和标签中，称为分类法。最后，Hugo 提供字数统计和阅读分钟数功能。Hugo 还将 Markdown 用于元数据、布局模板和 i18n 配置。

特性：

• 跨平台支持 Windows、macOS、Linux 等
• 集成的谷歌分析支持
• 使用 markdown 来创建内容
• 内置分页支持
• 支持生成目录
• 提供分页功能
• 支持国际化（i18n），开发者可以快速搭建多语言网站
• 一个很棒的主题系统，它提供了 300 多个主题
• 除了 HTML 输出，Hugo 还支持 AMP 和 JSON 等其他格式

如下图：

Gatsby

官网网址：http://gatsbyjs.org/

Github： https://github.com/gatsbyjs/gatsby

Gatsby 也是最流行和使用最广泛的框架之一。它是一个基于 React.js 的开源框架，是创建网站和应用的绝佳选择。除了延迟静态生成 (DSG) 和服务端呈现 (SSR) 之外，它还提供了静态站点生成。使用 Gatsby 的一个好处是它提供了大量的主题、入门模板和插件。

除了其框架功能之外，Gatsby 还提供一种名为 Gatsby Cloud 的产品，这是一种用于构建和托管 Gatsby 网站的云基础设施。Gatsby Cloud 之于 Gatsby 就像 Vercel 之于 Next.js。

Gatsby 框架拥有一个活跃的开发者社区，并提供了丰富的文档。

特性：

• 支持基于 GraphQL 的数据获取
• 拥有庞大的插件生态系统，其中包含适用于不同用例的插件，包括样式、图像、分析和搜索
• 支持与多个 CMS 集成，包括 Prismic
• 提供多个主题和入门模板
• 可以通过 Gatsby 的云平台访问全球 CDN、云功能等
• 通过 gatsby-image 插件提供开箱即用的图像处理、压缩和优化

如下图：

Jekyll

官网网址： https://jekyllrb.com/

Github： https://github.com/jekyll/jekyll

Jekyll是一个简单的、支持博客的静态站点生成器，非常适合个人、项目或组织站点。把它想象成一个基于文件的CMS，没有所有的复杂性。Jekyll获取您的内容，呈现Markdown和Liquid模板，并吐出一个完整的静态网站，可供Apache、Nginx或其他web服务器使用。Jekyll是GitHubPages背后的引擎，您可以使用它直接从GitHub存储库托管站点。

如下图：

Nuxt

官网网址： https://nuxtjs.org/

Github：https://github.com/nuxt/nuxt.js

Nuxt.js 是一个基于 Vue 的框架，并不是纯粹的静态站点生成器。但是，它可以用作构建 SPA 的 SSR 框架或用作 SSG。它有一个全静态模式，可以用它来开发静态站点。

Nuxt.js 的最新版本默认使用 Vite，使其速度更快、性能更高。Nuxt.js 在 Vue.js 开发者中非常流行。

特性：

• 基于文件的路由
• 全静态模式
• 支持 TypeScript
• 零配置启动
• 自动导入组件
• 提供超过 160 个模块

如下图：

Docusaurus

官网网址： https://v2.docusaurus.io/

Github：https://github.com/nuxt/nuxt.js

节省时间，专注于项目文档。只需使用Markdown编写文档和博客文章，Docusaurus就可以发布一组静态html文件。

特性：

• 让您节省时间、专注于文档编写。您只需采用 MDX 格式编写文档和博文， Docusaurus 就会将它们构建成静态的 HTML 文件供用户访问。 您甚至可以在 Markdown 中嵌入 React 组件，这一切都得益于 MDX。
• 利用 React 组件可以为您的项目扩展或自定义页面布局。 得益于 Docusaurus 的插件架构，再设计您自己的 网站的同时，仍然能够重用由 Docusaurus 插件所创建的数据。
• 内置支持本地化翻译功能。可以通过 git、Crowdin 或任何 翻译管理工具来翻译您的文档并能够独立部署。
• 让用户可以查看您的项目的所有版本的文档。文档版本化功能可以帮 您保持文档与项目版本的同步。
• 让您的用户能够轻松地查找他们所需要的内容。 我们自豪地支持 Algolia 文档搜索产品。

如下图：

Hexo

官网网址： https://hexo.io/

Github： https://github.com/hexojs/hexo

Hexo是一款基于Nodejs的，快速、简洁且高效的博客框架。具有丰富的插件和主题，具有超快的速度。支持Makedown语法，可以方便快捷的编写博客文档。同时支持node命令，可以一键部署到GitHub Pages, Heroku 或其他平台。

总之，是个写博客的利器。

如下图：

Slate

官网网址： https://slatedocs.github.io/slate/

Github： https://github.com/slatedocs/slate

Slate 可帮助您创建美观，智能，响应式的 API 文档。

具有以下特性：

• 干净、直观的设计
• 支持 Markdown 语法
• 有多种编程语言的代码示例
• 开箱即用的语法高亮功能，支持超过 100 种语言，无需配置

目前仅支持 Linux 以及 OS X，在 Windows 上可能可以运行，但官方不支持。

如下图：

Gitbook

官网网址： https://www.gitbook.com/

Github： https://github.com/GitbookIO/gitbook

GitBook 是一个基于 Node.js 的命令行工具，可使用 Github/Git 和 Markdown 来制作精美的电子书或制作开源软件帮助文档等。

从前我们用笔墨纸砚写书，后来我们在电脑上敲击 Word 文档，再后来，我们似乎不满足于这样的使用工具，Gitbook 为我们提供了新的思路。它不同于备忘录、Word 文档这类书写工具，而是能直接在线实现添加目录、排版等功能。除此之外，Gitbook 还有一个最大的优点——能多人同时在线编辑。著作完成之后，你可以将图书输出成静态 HTML 或 PDF 等格式分享给其他小伙伴。

如下图：

Astro

官网网址： https://astro.build/

Github： https://github.com/withastro/astro

Astro 在技术上是一个开源框架，而不是静态站点生成器。这意味着即使 Astro 支持静态站点生成，它也提供 SSR 并具有其他功能。例如，它支持与 Tailwind CSS、React、Vue 和 Svelte 等技术集成，并允许我们在同一应用中混合混合它们。

Astro 的 Island 架构允许我们在静态页面上拥有交互式内容。Astro islands 为我们打开了将 SSG 与动态内容相结合的新方式的大门。一个示例就是将销售活动所需的倒数计时器组件注入到博客页面。

Astro 将 UI 提取到页面上的较小组件中，并用轻量级 HTML 替换未使用的 javaScript。这使得网站加载速度更快并缩短了可交互时间 (Time to Interactive，TTI)，因为发送到客户端的 JavaScript 非常少。

尽管 Astro 是一个相对较新的解决方案，但其令人兴奋的功能已经引起了开发者的广泛关注。Astro 提供了多种集成和主题，开发者可以使用它们来丰富应用。

特性：

• 提供多个主题
• 提供多种集成
• 基于文件的路由
• 为 Markdown 和 MDX 提供原生支持
• 支持混合多个框架
• Island 架构允许将交互式内容注入到静态页面

如下图：

Docsify

官网网址： https://docsify.js.org/

Github： https://github.com/docsifyjs/docsify

我们在做完项目的时候经常会写一些项目手册，来记录我们在项目开发过程中的一些开发流程、使用方式以及注意事项，分享给将会使用到这个项目的人，方便大家快速上手，让程序顺利运行。

目前比较好的方式就是写成Markdown格式的技术文档，方便我们发布在github上，同时也可以发布到博客分享平台。除此之外我们还可以借助docsify这个工具，来帮助我们快速的搭建一个小型的文档网站，它可以自动将我们写在Markdown中的标题生成目录，整个页面的配色和布局也十分舒适易读，让整个阅读体验提升了好几个level，有了docsify这个神器，再也不害怕看长长的技术文档了。

docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会将 .md 转成 .html 文件，所有转换工作都是在运行时进行。这将非常实用，如果只是需要快速的搭建一个小型的文档网站，或者不想因为生成的一堆 .html 文件“污染” commit 记录，只需要创建一个 index.html 就可以开始写文档而且直接部署在GitHub Pages。

特性

• 无需构建，写完文档直接发布
• 容易使用并且轻量 (~19kB gzipped)
• 智能的全文搜索
• 提供多套主题
• 丰富的 API
• 支持 Emoji
• 兼容 IE10
• 支持 SSR (example)

如下图：

VuePress

官网网址： https://vuepress.vuejs.org/

Github： https://github.com/vuejs/vuepress

VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

特性(features)

• 内置 markdown 扩展，针对技术文档进行了优化
• 能够利用内嵌在 markdown 文件中的 Vue 代码
• 以 Vue 驱动的自定义主题系统
• PWA 支持
• Google Analytics 集成
• 一个默认主题：响应式布局可选的主页简单、开箱即用、基于标题的搜索功能可定制的导航栏和侧边栏自动生成的 GitHub 链接和页面编辑链接

如下图：

MkDocs

官网网址： http://www.mkdocs.org/

Github： https://github.com/mkdocs/mkdocs

MkDocs是一个快速、简单、华丽的静态网站生成器，适用于构建项目文档。文档源文件以Markdown编写，并使用一个YAML文件来进行配置。 MkDocs生成完全静态的HTML网站，你可以将其部署到GitHub pages、Amzzon S3或你自己选择的其它任意地方。

MkDocs有一堆很好看的主题。 官方内置了两个主题： mkdocs 和readthedocs， 也可以从MkDocs wiki中选择第三方主题， 或者自定义主题。

支持实时预览你的网站: 当你编辑Md文件时，内置的开发服务可以帮助你预览显示效果。当文档有改动时，甚至还可以自动载入并刷新你的浏览器。

如下图：

UmiJS

官网网址： https://umijs.org/

Github： https://github.com/umijs/umi

umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。umi 以路由为基础的，支持类 next.js 的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。然后配以完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求，目前内外部加起来已有 50 的插件。

umi 是蚂蚁金服的底层前端框架，已直接或间接地服务了 600 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。

#特性

• 开箱即用，内置 react、react-router 等
• 类 next.js 且功能完备的路由约定，同时支持配置的路由方式
• 完善的插件体系，覆盖从源码到构建产物的每个生命周期
• 高性能，通过插件支持 PWA、以路由为单元的 code splitting 等
• 支持静态页面导出，适配各种环境，比如中台业务、无线业务、egg、支付宝钱包、云凤蝶等
• 开发启动快，支持一键开启 dll 等
• 一键兼容到 IE9，基于 umi-plugin-polyfills
• 完善的 TypeScript 支持，包括 d.ts 定义和 umi test
• 与 dva 数据流的深入融合，支持 duck directory、model 的自动加载、code splitting 等等

如下图：

Eleventy

官网网址： https://11ty.dev/

Github： https://github.com/11ty/eleventy

Eleventy，简称 11ty，是一个用 JavaScript 编写的开源静态站点生成器。但是，它不依赖于特定的框架来生成或提供内容。对于熟悉并习惯使用 JavaScript 和 Node.js 的开发者来说，这是一个很好的选择。

多年来，Eleventy 越来越受欢迎，尤其是当 web.dev、ESlint、MDN 和 Netlify 等网站都是用它构建的时候。

Eleventy 默认是零配置的，具有灵活的配置选项，并且适用于任何项目的结构。它支持多种模板语言，包括 Liquid、Handlebars、Markdown 和 JavaScript。

特性：

• 灵活的模板系统
• 支持 11 种模板语言
• 无需客户端 JavaScript
• 快速构建时间
• JavaScript 友好
• 配置灵活

如下图：

最后

一台电脑,一个键盘,尽情挥洒智慧的人生;

几行数字,几个字母,认真编写生活的美好;

一 个灵感,一段程序,推动科技进步,促进社会发展。

创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。