2023 年靜態(tài)站點生成器 SSG 大全（靜態(tài)網(wǎng)站生成工具）
大家好，我是Echa。
最近有不少的粉絲私信小編問道：怎么實現(xiàn)靜態(tài)站點頁面？用什么技術(shù)實現(xiàn)？有部分懂技術(shù)的粉絲也會問SSG 和SSR有啥區(qū)別，是一樣的東西么？SSG有哪些優(yōu)點和缺點呢？
小編帶著這些疑問繼續(xù)為大家一一講解，今天重點講靜態(tài)站點生成器SSG 大全，但是首先要徹底搞明白SSG用來做什么的：
- SSG：Static Site Generation，靜態(tài)頁面生成；
- SSR：Server Side Rendering，服務(wù)端渲染；
什么是SSG（static site generator）？
SSG是一種基于原始數(shù)據(jù)和一組模板生成完整靜態(tài) HTML 網(wǎng)站的工具。本質(zhì)上，SSG會自動完成對單個 HTML 頁面進(jìn)行編碼的任務(wù)，并使這些頁面提前準(zhǔn)備好為用戶提供服務(wù)。因為這些 HTML 頁面是預(yù)先構(gòu)建的，所以它們可以非?？焖俚丶虞d到用戶的瀏覽器中。
SSG是內(nèi)容管理系統(tǒng) (CMS) 的替代品——另一種用于管理 Web 內(nèi)容、生成網(wǎng)頁和實施模板的工具。
SSG優(yōu)點
- 加載速度快 -由于靜態(tài)站點生成器是提前創(chuàng)建網(wǎng)頁而不是按需創(chuàng)建網(wǎng)頁（如使用 CMS），因此網(wǎng)頁在用戶瀏覽器中的加載速度略快。將HTML發(fā)送給客戶端，所以幾乎會立即看到頁面內(nèi)容。
- 無需獲取其他客戶端 -理想情況下，服務(wù)器呈現(xiàn)過程將進(jìn)行所有必需的調(diào)用以獲取數(shù)據(jù)，因此不會從客戶端進(jìn)行任何其他服務(wù)調(diào)用。
- 非常適合SEO
- 更輕量的后端 -靜態(tài)網(wǎng)站是輕量級的，不需要在服務(wù)器端運行那么多代碼，而基于 CMS 的網(wǎng)站不斷向服務(wù)器端查詢內(nèi)容。
- 定制-開發(fā)人員可以創(chuàng)建他們想要的任何模板。它們不受 CMS 提供的字段的限制，也不受 CMS 內(nèi)置模板的限制。
SSG缺點
- 大型頁面可能會很慢 -如果路由很多，速度可能會變慢。
- 與某些UI庫不兼容 -如果你用的某些庫使用了window，那你就要想辦法來解決了。 因為 Node 中沒有window或者 document。
- 很少或沒有預(yù)先構(gòu)建的模板-定制的缺點是可能需要更長的時間。許多靜態(tài)站點生成器不附帶模板，開發(fā)人員首先必須花費大量時間從頭開始構(gòu)建它們。
- 沒有用戶友好的界面-非開發(fā)者用戶更難使用靜態(tài)站點生成器發(fā)布內(nèi)容。沒有 CMS 界面，使用原始的未格式化數(shù)據(jù)可能會讓用戶感到害怕。此外，進(jìn)行網(wǎng)站更新通常需要開發(fā)人員支持。
近年來，構(gòu)建網(wǎng)站的方式發(fā)生了很大變化，出現(xiàn)了很多新的構(gòu)建網(wǎng)站的方式。靜態(tài)站點生成器 (SSG) 就是一種構(gòu)建網(wǎng)站的現(xiàn)代 Web 開發(fā)技術(shù)，其正在變得越來越流行！
2023年值得考慮的靜態(tài)站點生成器大綱
- Next.js
- Hugo
- Gatsby
- Jekyll
- Nuxt
- Docusaurus
- Hexo
- Slate
- GitBook
- Astro
- Docsify
- VuePress
- MkDocs
- UmiJS
- Eleventy
為了正確審查值得考慮的靜態(tài)站點生成器，我們將把它們分為以下兩類：
- 提供多種渲染方法（包括靜態(tài)站點生成）的框架：Gatsby、Next.js、Astro、Nuxt.js和 SvelteKit等等。
- 僅提供靜態(tài)渲染功能的 SSG：Eleventy 和 Hugo。
目前，不分語言的話有超過 350 個靜態(tài)站點生成器可以供我們選擇：
詳細(xì)請見：https://jamstack.org/generators/
Next.js
官網(wǎng)網(wǎng)址：https://nextjs.org/
Github：https://github.com/vercel
Next.js 不僅是一個靜態(tài)站點生成器，而且是使用最廣泛的開源、基于 React 的框架之一，用于構(gòu)建網(wǎng)站和 Web 應(yīng)用。它支持服務(wù)端渲染 (SSR)、靜態(tài)站點生成 (SSG)、增量靜態(tài)渲染和客戶端渲染 (CSR)。
Next.js 的一大優(yōu)點是它允許我們決定如何為每個頁面使用 SSR 或 SSG。這使其成為需要多種渲染方法的更復(fù)雜項目的不錯選擇。
Next.js 由 Vercel 創(chuàng)建，目前擁有 101k GitHub Star。Next.js 還具有結(jié)構(gòu)良好且易于瀏覽的文檔，可提供無縫的學(xué)習(xí)體驗。
特性：
- 基于文件的路由系統(tǒng)
- 默認(rèn)為 SSG，不同于默認(rèn)為 SSR 的其他工具
- 通過其自定義圖像組件優(yōu)化圖像
圖下圖：
Hugo
官網(wǎng)網(wǎng)址：https://gohugo.io/
Github：https://github.com/gohugoio/hugo
Hugo 是一個用 Go 編寫的靜態(tài)站點生成器，針對快速構(gòu)建時間進(jìn)行了優(yōu)化。
Hugo 提供了內(nèi)容管理功能，使其成為擁有許多帖子的網(wǎng)站或博客的絕佳選擇。首先，它處理存儲在 /content 目錄中的 markdown 文件中的所有內(nèi)容，使得從單個文件夾發(fā)布和管理大量內(nèi)容變得容易。其次，Hugo 內(nèi)置了對分頁的支持，生成目錄，并支持將內(nèi)容分組到類別和標(biāo)簽中，稱為分類法。最后，Hugo 提供字?jǐn)?shù)統(tǒng)計和閱讀分鐘數(shù)功能。Hugo 還將 Markdown 用于元數(shù)據(jù)、布局模板和 i18n 配置。
特性：
- 跨平臺支持 Windows、macOS、Linux 等
- 集成的谷歌分析支持
- 使用 markdown 來創(chuàng)建內(nèi)容
- 內(nèi)置分頁支持
- 支持生成目錄
- 提供分頁功能
- 支持國際化（i18n），開發(fā)者可以快速搭建多語言網(wǎng)站
- 一個很棒的主題系統(tǒng)，它提供了 300 多個主題
- 除了 HTML 輸出，Hugo 還支持 AMP 和 JSON 等其他格式
如下圖：
Gatsby
官網(wǎng)網(wǎng)址：http://gatsbyjs.org/
Github： https://github.com/gatsbyjs/gatsby
Gatsby 也是最流行和使用最廣泛的框架之一。它是一個基于 React.js 的開源框架，是創(chuàng)建網(wǎng)站和應(yīng)用的絕佳選擇。除了延遲靜態(tài)生成 (DSG) 和服務(wù)端呈現(xiàn) (SSR) 之外，它還提供了靜態(tài)站點生成。使用 Gatsby 的一個好處是它提供了大量的主題、入門模板和插件。
除了其框架功能之外，Gatsby 還提供一種名為 Gatsby Cloud 的產(chǎn)品，這是一種用于構(gòu)建和托管 Gatsby 網(wǎng)站的云基礎(chǔ)設(shè)施。Gatsby Cloud 之于 Gatsby 就像 Vercel 之于 Next.js。
Gatsby 框架擁有一個活躍的開發(fā)者社區(qū)，并提供了豐富的文檔。
特性：
- 支持基于 GraphQL 的數(shù)據(jù)獲取
- 擁有龐大的插件生態(tài)系統(tǒng)，其中包含適用于不同用例的插件，包括樣式、圖像、分析和搜索
- 支持與多個 CMS 集成，包括 Prismic
- 提供多個主題和入門模板
- 可以通過 Gatsby 的云平臺訪問全球 CDN、云功能等
- 通過 gatsby-image 插件提供開箱即用的圖像處理、壓縮和優(yōu)化
如下圖：
Jekyll
官網(wǎng)網(wǎng)址： https://jekyllrb.com/
Github： https://github.com/jekyll/jekyll
Jekyll是一個簡單的、支持博客的靜態(tài)站點生成器，非常適合個人、項目或組織站點。把它想象成一個基于文件的CMS，沒有所有的復(fù)雜性。Jekyll獲取您的內(nèi)容，呈現(xiàn)Markdown和Liquid模板，并吐出一個完整的靜態(tài)網(wǎng)站，可供Apache、Nginx或其他web服務(wù)器使用。Jekyll是GitHubPages背后的引擎，您可以使用它直接從GitHub存儲庫托管站點。
如下圖：
Nuxt
官網(wǎng)網(wǎng)址： https://nuxtjs.org/
Github：https://github.com/nuxt/nuxt.js
Nuxt.js 是一個基于 Vue 的框架，并不是純粹的靜態(tài)站點生成器。但是，它可以用作構(gòu)建 SPA 的 SSR 框架或用作 SSG。它有一個全靜態(tài)模式，可以用它來開發(fā)靜態(tài)站點。
Nuxt.js 的最新版本默認(rèn)使用 Vite，使其速度更快、性能更高。Nuxt.js 在 Vue.js 開發(fā)者中非常流行。
特性：
- 基于文件的路由
- 全靜態(tài)模式
- 支持 TypeScript
- 零配置啟動
- 自動導(dǎo)入組件
- 提供超過 160 個模塊
如下圖：
Docusaurus
官網(wǎng)網(wǎng)址： https://v2.docusaurus.io/
Github：https://github.com/nuxt/nuxt.js
節(jié)省時間，專注于項目文檔。只需使用Markdown編寫文檔和博客文章，Docusaurus就可以發(fā)布一組靜態(tài)html文件。
特性：
- 讓您節(jié)省時間、專注于文檔編寫。您只需采用 MDX 格式編寫文檔和博文， Docusaurus 就會將它們構(gòu)建成靜態(tài)的 HTML 文件供用戶訪問。 您甚至可以在 Markdown 中嵌入 React 組件，這一切都得益于 MDX。
- 利用 React 組件可以為您的項目擴(kuò)展或自定義頁面布局。 得益于 Docusaurus 的插件架構(gòu)，再設(shè)計您自己的 網(wǎng)站的同時，仍然能夠重用由 Docusaurus 插件所創(chuàng)建的數(shù)據(jù)。
- 內(nèi)置支持本地化翻譯功能?？梢酝ㄟ^ git、Crowdin 或任何 翻譯管理工具來翻譯您的文檔并能夠獨立部署。
- 讓用戶可以查看您的項目的所有版本的文檔。文檔版本化功能可以幫 您保持文檔與項目版本的同步。
- 讓您的用戶能夠輕松地查找他們所需要的內(nèi)容。 我們自豪地支持 Algolia 文檔搜索產(chǎn)品。
如下圖：
Hexo
官網(wǎng)網(wǎng)址： https://hexo.io/
Github： https://github.com/hexojs/hexo
Hexo是一款基于Nodejs的，快速、簡潔且高效的博客框架。具有豐富的插件和主題，具有超快的速度。支持Makedown語法，可以方便快捷的編寫博客文檔。同時支持node命令，可以一鍵部署到GitHub Pages, Heroku 或其他平臺。
總之，是個寫博客的利器。
如下圖：
Slate
官網(wǎng)網(wǎng)址： https://slatedocs.github.io/slate/
Github： https://github.com/slatedocs/slate
Slate 可幫助您創(chuàng)建美觀，智能，響應(yīng)式的 API 文檔。
具有以下特性：
- 干凈、直觀的設(shè)計
- 支持 Markdown 語法
- 有多種編程語言的代碼示例
- 開箱即用的語法高亮功能，支持超過 100 種語言，無需配置
目前僅支持 Linux 以及 OS X，在 Windows 上可能可以運行，但官方不支持。
如下圖：
Gitbook
官網(wǎng)網(wǎng)址： https://www.gitbook.com/
Github： https://github.com/GitbookIO/gitbook
GitBook 是一個基于 Node.js 的命令行工具，可使用 Github/Git 和 Markdown 來制作精美的電子書或制作開源軟件幫助文檔等。
從前我們用筆墨紙硯寫書，后來我們在電腦上敲擊 Word 文檔，再后來，我們似乎不滿足于這樣的使用工具，Gitbook 為我們提供了新的思路。它不同于備忘錄、Word 文檔這類書寫工具，而是能直接在線實現(xiàn)添加目錄、排版等功能。除此之外，Gitbook 還有一個最大的優(yōu)點——能多人同時在線編輯。著作完成之后，你可以將圖書輸出成靜態(tài) HTML 或 PDF 等格式分享給其他小伙伴。
如下圖：
Astro
官網(wǎng)網(wǎng)址： https://astro.build/
Github： https://github.com/withastro/astro
Astro 在技術(shù)上是一個開源框架，而不是靜態(tài)站點生成器。這意味著即使 Astro 支持靜態(tài)站點生成，它也提供 SSR 并具有其他功能。例如，它支持與 Tailwind CSS、React、Vue 和 Svelte 等技術(shù)集成，并允許我們在同一應(yīng)用中混合混合它們。
Astro 的 Island 架構(gòu)允許我們在靜態(tài)頁面上擁有交互式內(nèi)容。Astro islands 為我們打開了將 SSG 與動態(tài)內(nèi)容相結(jié)合的新方式的大門。一個示例就是將銷售活動所需的倒數(shù)計時器組件注入到博客頁面。
Astro 將 UI 提取到頁面上的較小組件中，并用輕量級 HTML 替換未使用的 javaScript。這使得網(wǎng)站加載速度更快并縮短了可交互時間 (Time to Interactive，TTI)，因為發(fā)送到客戶端的 JavaScript 非常少。
盡管 Astro 是一個相對較新的解決方案，但其令人興奮的功能已經(jīng)引起了開發(fā)者的廣泛關(guān)注。Astro 提供了多種集成和主題，開發(fā)者可以使用它們來豐富應(yīng)用。
特性：
- 提供多個主題
- 提供多種集成
- 基于文件的路由
- 為 Markdown 和 MDX 提供原生支持
- 支持混合多個框架
- Island 架構(gòu)允許將交互式內(nèi)容注入到靜態(tài)頁面
如下圖：
Docsify
官網(wǎng)網(wǎng)址： https://docsify.js.org/
Github： https://github.com/docsifyjs/docsify
我們在做完項目的時候經(jīng)常會寫一些項目手冊，來記錄我們在項目開發(fā)過程中的一些開發(fā)流程、使用方式以及注意事項，分享給將會使用到這個項目的人，方便大家快速上手，讓程序順利運行。
目前比較好的方式就是寫成Markdown格式的技術(shù)文檔，方便我們發(fā)布在github上，同時也可以發(fā)布到博客分享平臺。除此之外我們還可以借助docsify這個工具，來幫助我們快速的搭建一個小型的文檔網(wǎng)站，它可以自動將我們寫在Markdown中的標(biāo)題生成目錄，整個頁面的配色和布局也十分舒適易讀，讓整個閱讀體驗提升了好幾個level，有了docsify這個神器，再也不害怕看長長的技術(shù)文檔了。
docsify 是一個動態(tài)生成文檔網(wǎng)站的工具。不同于 GitBook、Hexo 的地方是它不會將 .md 轉(zhuǎn)成 .html 文件，所有轉(zhuǎn)換工作都是在運行時進(jìn)行。這將非常實用，如果只是需要快速的搭建一個小型的文檔網(wǎng)站，或者不想因為生成的一堆 .html 文件“污染” commit 記錄，只需要創(chuàng)建一個 index.html 就可以開始寫文檔而且直接部署在GitHub Pages。
特性
- 無需構(gòu)建，寫完文檔直接發(fā)布
- 容易使用并且輕量 (~19kB gzipped)
- 智能的全文搜索
- 提供多套主題
- 豐富的 API
- 支持 Emoji
- 兼容 IE10
- 支持 SSR (example)
如下圖：
VuePress
官網(wǎng)網(wǎng)址： https://vuepress.vuejs.org/
Github： https://github.com/vuejs/vuepress
VuePress 由兩部分組成：第一部分是一個極簡靜態(tài)網(wǎng)站生成器 (opens new window)，它包含由 Vue 驅(qū)動的主題系統(tǒng)和插件 API，另一個部分是為書寫技術(shù)文檔而優(yōu)化的默認(rèn)主題，它的誕生初衷是為了支持 Vue 及其子項目的文檔需求。
每一個由 VuePress 生成的頁面都帶有預(yù)渲染好的 HTML，也因此具有非常好的加載性能和搜索引擎優(yōu)化（SEO）。同時，一旦頁面被加載，Vue 將接管這些靜態(tài)內(nèi)容，并將其轉(zhuǎn)換成一個完整的單頁應(yīng)用（SPA），其他的頁面則會只在用戶瀏覽到的時候才按需加載。
特性(features)
- 內(nèi)置 markdown 擴(kuò)展，針對技術(shù)文檔進(jìn)行了優(yōu)化
- 能夠利用內(nèi)嵌在 markdown 文件中的 Vue 代碼
- 以 Vue 驅(qū)動的自定義主題系統(tǒng)
- PWA 支持
- Google Analytics 集成
- 一個默認(rèn)主題：響應(yīng)式布局可選的主頁簡單、開箱即用、基于標(biāo)題的搜索功能可定制的導(dǎo)航欄和側(cè)邊欄自動生成的 GitHub 鏈接和頁面編輯鏈接
如下圖：
MkDocs
官網(wǎng)網(wǎng)址： http://www.mkdocs.org/
Github： https://github.com/mkdocs/mkdocs
MkDocs是一個快速、簡單、華麗的靜態(tài)網(wǎng)站生成器，適用于構(gòu)建項目文檔。文檔源文件以Markdown編寫，并使用一個YAML文件來進(jìn)行配置。 MkDocs生成完全靜態(tài)的HTML網(wǎng)站，你可以將其部署到GitHub pages、Amzzon S3或你自己選擇的其它任意地方。
MkDocs有一堆很好看的主題。 官方內(nèi)置了兩個主題： mkdocs 和readthedocs， 也可以從MkDocs wiki中選擇第三方主題， 或者自定義主題。
支持實時預(yù)覽你的網(wǎng)站: 當(dāng)你編輯Md文件時，內(nèi)置的開發(fā)服務(wù)可以幫助你預(yù)覽顯示效果。當(dāng)文檔有改動時，甚至還可以自動載入并刷新你的瀏覽器。
如下圖：
UmiJS
官網(wǎng)網(wǎng)址： https://umijs.org/
Github： https://github.com/umijs/umi
umi，中文可發(fā)音為烏米，是一個可插拔的企業(yè)級 react 應(yīng)用框架。umi 以路由為基礎(chǔ)的，支持類 next.js 的約定式路由，以及各種進(jìn)階的路由功能，并以此進(jìn)行功能擴(kuò)展，比如支持路由級的按需加載。然后配以完善的插件體系，覆蓋從源碼到構(gòu)建產(chǎn)物的每個生命周期，支持各種功能擴(kuò)展和業(yè)務(wù)需求，目前內(nèi)外部加起來已有 50 的插件。
umi 是螞蟻金服的底層前端框架，已直接或間接地服務(wù)了 600 應(yīng)用，包括 java、node、H5 無線、離線（Hybrid）應(yīng)用、純前端 assets 應(yīng)用、CMS 應(yīng)用等。他已經(jīng)很好地服務(wù)了我們的內(nèi)部用戶，同時希望他也能服務(wù)好外部用戶。
#特性
- 開箱即用，內(nèi)置 react、react-router 等
- 類 next.js 且功能完備的路由約定，同時支持配置的路由方式
- 完善的插件體系，覆蓋從源碼到構(gòu)建產(chǎn)物的每個生命周期
- 高性能，通過插件支持 PWA、以路由為單元的 code splitting 等
- 支持靜態(tài)頁面導(dǎo)出，適配各種環(huán)境，比如中臺業(yè)務(wù)、無線業(yè)務(wù)、egg、支付寶錢包、云鳳蝶等
- 開發(fā)啟動快，支持一鍵開啟 dll 等
- 一鍵兼容到 IE9，基于 umi-plugin-polyfills
- 完善的 TypeScript 支持，包括 d.ts 定義和 umi test
- 與 dva 數(shù)據(jù)流的深入融合，支持 duck directory、model 的自動加載、code splitting 等等
如下圖：
Eleventy
官網(wǎng)網(wǎng)址： https://11ty.dev/
Github： https://github.com/11ty/eleventy
Eleventy，簡稱 11ty，是一個用 JavaScript 編寫的開源靜態(tài)站點生成器。但是，它不依賴于特定的框架來生成或提供內(nèi)容。對于熟悉并習(xí)慣使用 JavaScript 和 Node.js 的開發(fā)者來說，這是一個很好的選擇。
多年來，Eleventy 越來越受歡迎，尤其是當(dāng) web.dev、ESlint、MDN 和 Netlify 等網(wǎng)站都是用它構(gòu)建的時候。
Eleventy 默認(rèn)是零配置的，具有靈活的配置選項，并且適用于任何項目的結(jié)構(gòu)。它支持多種模板語言，包括 Liquid、Handlebars、Markdown 和 JavaScript。
特性：
- 靈活的模板系統(tǒng)
- 支持 11 種模板語言
- 無需客戶端 JavaScript
- 快速構(gòu)建時間
- JavaScript 友好
- 配置靈活
如下圖：
最后
一臺電腦,一個鍵盤,盡情揮灑智慧的人生;
幾行數(shù)字,幾個字母,認(rèn)真編寫生活的美好;
一 個靈感,一段程序,推動科技進(jìn)步,促進(jìn)社會發(fā)展。
創(chuàng)作不易，喜歡的老鐵們加個關(guān)注，點個贊，打個賞，后面會不定期更新干貨和技術(shù)相關(guān)的資訊，速速收藏，謝謝！你們的一個小小舉動就是對小編的認(rèn)可，更是創(chuàng)作的動力。
