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

大家好，我是Echa。

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

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

什么是SSG（static site generator）？

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

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

SSG优点SSG缺点

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

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

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

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

详细请见：

Next.js

官网网址：

Github：

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

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

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

特性：

图下图：

Hugo

官网网址：

Github：

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

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

特性：

如下图：

Gatsby

官网网址：

Github：

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

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

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

特性：

如下图：

Jekyll

官网网址：

Github：

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

如下图：

Nuxt

官网网址：

Github：

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

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

特性：

如下图：

Docusaurus

官网网址：

Github：

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

特性：

如下图：

Hexo

官网网址：

Github：

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

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

如下图：

Slate

官网网址：

Github：

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

具有以下特性：

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

如下图：

GitBook

官网网址：

Github：

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

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

如下图：

Astro

官网网址：

Github：

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

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

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

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

特性：

如下图：

Docsify

官网网址：

Github：

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

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

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

特性

如下图：

VuePress

官网网址：

Github：

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

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

特性(features)

如下图：

MkDocs

官网网址：

Github：

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

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

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

如下图：

UmiJS

官网网址：

Github：

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

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

#特性

如下图：

Eleventy

官网网址：

Github：

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

多年来响应式网站静态页面多少钱，Eleventy 越来越受欢迎，尤其是当 web.dev、ESlint、MDN 和 Netlify 等网站都是用它构建的时候。

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

特性：

如下图：

最后

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

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

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

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