龙空技术网

2023 年静态站点生成器 SSG 大全

Echa攻城狮 2552

前言:

现时同学们对“帝国cms伪静态nginx”大概比较看重,兄弟们都想要学习一些“帝国cms伪静态nginx”的相关知识。那么小编也在网上汇集了一些对于“帝国cms伪静态nginx””的相关文章,希望看官们能喜欢,小伙伴们快快来了解一下吧!

大家好,我是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年值得考虑的静态站点生成器大纲Next.jsHugoGatsbyJekyllNuxtDocusaurusHexoSlateGitBookAstroDocsifyVuePressMkDocsUmiJSEleventy

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

提供多种渲染方法(包括静态站点生成)的框架:GatsbyNext.jsAstroNuxt.jsSvelteKit等等。仅提供静态渲染功能的 SSG:EleventyHugo

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

详细请见:

Next.js

官网网址:

Github:

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

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

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

特性:

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

图下图:

Hugo

官网网址:

Github:

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

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

特性:

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

如下图:

Gatsby

官网网址:

Github:

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

官网网址:

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 开发者中非常流行。

特性:

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

如下图:

Docusaurus

官网网址:

Github:

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

特性:

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

如下图:

Hexo

官网网址:

Github:

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

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

如下图:

Slate

官网网址:

Github:

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

具有以下特性:

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

目前仅支持 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 提供了多种集成和主题,开发者可以使用它们来丰富应用。

特性:

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

如下图:

Docsify

官网网址:

Github:

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

目前比较好的方式就是写成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

官网网址:

Github:

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

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

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

如下图:

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 应用等。他已经很好地服务了我们的内部用户,同时希望他也能服务好外部用户。

#特性开箱即用,内置 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

官网网址:

Github:

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

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

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

特性:

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

如下图:

最后

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

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

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

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

标签: #帝国cms伪静态nginx