大家好，我是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.js
- Hugo
- Gatsby
- Jekyll
- Nuxt
- Docusaurus
- Hexo
- Slate
- GitBook
- Astro
- Docsify
- VuePress
- MkDocs
- UmiJS
- 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 友好
- 配置靈活
如下圖：
最後
一台電腦,一個鍵盤,盡情揮灑智慧的人生;
幾行數字,幾個字母,認真編寫生活的美好;
一 個靈感,一段程式,推動科技進步,促進社會發展。
創作不易，喜歡的老鐵們加個關注，點個贊，打個賞，後面會不定期更新幹貨和技術相關的資訊，速速收藏，謝謝！你們的一個小小舉動就是對小編的認可，更是創作的動力。