家好，很高興又見面了，我是"高級前端進階"，由我帶著大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發!

今天給大家帶來的主題是2023 年值得考慮的10大靜態站點生成器，話不多說，直接開始！

前言

在不斷發展的 Web 開發環境中，靜態站點生成器 (SSG) 已成為開發人員快速高效地創建網站的流行工具。 它們彌合了傳統靜態網站（使用需要手動更新和修改的 HTML 和 CSS 構建）與依賴數據庫和服務器端腳本語言（如 PHP）的動態網站之間的差距。

本文將探討 2023 年 10 個頂級 React 靜態站點生成器 SSG，通過對每一個靜態站點生成器的初步比較，幫助開發者選擇最適合特定項目需求的靜態站點生成器。

1.什么是 React 靜態站點生成器

React 靜態站點生成器是一種工具，可讓開發者使用 React 組件作為站點的構建塊來生成靜態網站。 首先一起來了解什么是靜態站點和靜態站點生成器。

靜態站點是由預構建的 HTML、CSS 和 JavaScript 文件組成的網站，這些文件完全按照靜態站點生成器生成的方式提供給用戶。 這些文件不會根據用戶交互或輸入而更改，也不需要服務器端處理。

靜態站點生成器是一種自動化構建靜態網站過程的工具。 它接受輸入文件（例如 Markdown 文件、HTML 模板或 React 組件）并生成靜態 HTML、CSS 和 JavaScript 文件，這些文件可以直接提供給用戶，使開發人員可以快速輕松地創建網站，而無需完整的 Web 應用程序堆棧。

2.React 靜態站點生成器用例

在靜態站點生成器出現之前，開發人員必須手動使用 HTML 和 CSS 對每個網站頁面進行編碼。 這種方法既費時又容易出錯，難以維護和更新大型網站。

借助 React 靜態站點生成器，開發人員可以創建可跨多個頁面重復使用的模板或布局，從而更輕松地更新和維護大型網站。 這樣可以節省大量時間和成本并提高網站性能。

使用 React Static Site Generator 的一些優點包括：

• 提高網站性能和速度
• 更容易維護和部署
• 更好的可擴展性和靈活性
• 增強的 SEO 功能

React 靜態站點生成器的典型用例包括：

• 構建文檔網站：可用于創建易于瀏覽和更新的文檔站點。
• 開發博客：可用于創建快速、響應迅速且易于更新、維護和托管的博客。
• 創建電子商務網站：可用于創建快速、可擴展的電子商務網站，提供出色的用戶體驗。因為這些網站是靜態的，它們可以處理大量流量而不會減慢或崩潰。

3.10 個值得考慮的 React 靜態站點生成器

在探索每個 React 靜態站點生成器之前，需要首先了解當使用靜態站點生成器生成靜態站點時，會生成一組靜態文件，這些文件可以直接提供給用戶而無需服務器端處理，但是依然需要平臺來托管這些靜態文件。

下面來一起看看 10 個值得考慮的 React 靜態站點生成器。

3.1 Next.js

Next.js 是一種流行的基于 React 的框架，在過去幾年中在 Web 開發社區中得到廣泛采用，現在普遍被認為是最好的 React 靜態站點生成器之一。

Next.js 具有以下明顯優勢：

• 支持自動代碼拆分和延遲加載，可以通過減少每個頁面需要加載的代碼量來提高網站性能。
• 可以輕松集成流行的 React 庫和框架，例如 Redux、GraphQL、Material UI 等等。 這種靈活性和易于集成有助于開發人員和企業等廣泛采用 Next.js。
• 具有廣泛的使用案例： 比如 Hulu 和 TikTok 等知名網站。

目前 Next.js 在 Github 上有超過 105k 的 star、23.5k 的 fork、1330k 的項目依賴量，代碼貢獻者達到了 2.6k、NPM 周平均下載量達到了 298K，是妥妥的前端頂級開源項目。

3.2 Gatsby

Gatsby 是一個開源框架，它將 React、GraphQL 和 Webpack 的功能組合到一個用于構建靜態網站和應用程序的工具中。 由于其支持的網站性能好、代碼拆分等令人印象深刻的開箱即用功能以及友好的開發人員體驗，Gatsby 正迅速成為現代 Web 開發的主要工具。

Gatsby 是現代網絡的產物，其采用 JAMstack 架構、靜態站點生成器和其他網站優化策略。Gatsby 具有以下明顯特征：

• 提供 Gatsby 框架：使用基于 React 的開源框架構建快速、安全且功能強大的網站。
• Gatsby 數據層：將不同的內容、API 和服務無縫集成到一種 Web 體驗中。
• Gatsby 云服務：在最快的可用網絡上實時構建、預覽和部署 Gatsby 站點。

Gatsby 已經不只是一個靜態站點生成工具，而是一整套的靜態站點解決方案。目前 Gatsby 在 Github 上有超過 54.4k 的 star、10.5k 的 fork、478k 的項目依賴量，代碼貢獻者達到了 3.9k、NPM 周平均下載量達到了 3487K，是妥妥的前端頂級開源項目。

3.3 Docusaurus

Docusaurus 是一個基于 React 的靜態站點生成器，專為構建文檔網站而設計。它是一個開源工具，由 Meta 創建并由與 React 社區密切合作的開發人員團隊維護。

Docusaurus 為構建文檔站點的開發人員提供了諸多優勢，包括：

• 易于設置和使用：具有簡單直 觀的設置過程。
• 可定制且靈活：高度可定制，并為開發人員提供廣泛的選擇，例如主題、插件和樣式。
• 適用于大型項目：非常適合大型項目，因為開發人員可以輕松地將他們的文檔組織成多個部分和頁面。
• 適合協作：帶有內置版本控制系統，允許多個用戶在同一個文檔站點上進行協作。
• 有利于 SEO：生成針對搜索引擎優化 (SEO) 進行優化的靜態網站。
• 響應式設計：具有針對在不同設備和屏幕尺寸上查看而優化的響應式設計功能。

將 Docusaurus 與 React 結合使用的主要優勢之一是它允許開發人員利用 React 的強大功能，包括創建可重用組件的能力，從而節省時間。目前使用 Docusaurus 構建的一些流行網站包括： React Native、Algolia DocSearch 和 Ionic 等等。

目前 Docusaurus 在 Github 上有超過 43.9k 的 star、6.8k 的 fork、9.5k 的項目依賴量，代碼貢獻者達到了 1.1k、NPM 周平均下載量達到了 5K，是妥妥的前端優質開源項目。

3.5 Astro

Astro 是一種流行的 Web 框架，用于構建以內容為中心的高性能網站。Astro 代表下一代前端架構，可以優化網站，允許開發者選擇已有的 UI 框架（如 React、Svelte 和 Vue），使用 Astro 構建的站點加載速度提高 33%，JavaScript 大小減少 90%。

隨著 Astro 2.0 的發布，其通過混合渲染實現了 SSG、SSR 的完美結合。

Astro 2.0 是第一個為 Markdown 和 MDX 提供完整類型安全的 Web 框架。 Astro 可以通過內置的解析、驗證和自動 TypeScript 類型生成來組織 Markdown。 對于在站點上使用 Markdown 來說，Astro 2.0 的發布是一個很好的消息。

Astro 2.0 的新特性還包括：Markdown 和 MDX 的自動類型安全檢測、混合渲染（靜態&動態結合）、重新設計錯誤（引入錯誤疊加層（Error Overlay））、開發服務器優化、集成 Vite 4.0 等等。

Astro 在 2 年前開源，在 Github 上有超過 28.4K 的 star，1.4k 的 fork，有超過 29.2k 的項目使用它，NPM 周平均下載量超過 84K。

3.5 Qwik

Qwik 是一種快速、輕量級的 React 靜態站點生成器，對于尋求快速簡便的方法來構建高性能網站的開發人員來說值得一試。

Qwik 構建的站點能夠快速加載，因為在構建時生成靜態 HTML 和 JavaScript 頁面。 不需要在運行時進行服務器端渲染或 JavaScript 執行。 同時， Qwik 還對其他 Web 技術提供可靠的支持，包括 ：Webpack、Babel 和 TypeScript。

Qwik 使用預渲染和緩存來最大限度地減少服務器請求并加快頁面加載速度，使 Qwik 構建的站點即使在緩慢或不可靠的網絡上也能提供閃電般的性能。

總的來說，Qwik 具有以下獨特優勢：

• 快速高效
• 開發工作流程簡單直觀
• 高度的靈活性和可定制性，具有廣泛的插件和選項
• SEO 友好，內置了對元數據標簽和結構化數據的支持。

目前 Qwik 在 Github 上有超過 16.5k 的 star、0.83k 的 fork、2.2k 的項目依賴量，代碼貢獻者達到了 0.31k、NPM 周平均下載量 8K，是妥妥的前端優秀開源項目。

3.6 其他 SSG 方案

當然除了上面介紹的 5 個靜態站點生成器外，還有一些優秀的方案也值得考慮，比如：

Cuttlebelle

Cuttlebelle 是一個相對不太知名的 SSG，但它是一個很棒的框架，可以將編輯和代碼問題分開。 開發者可以通過將 Cuttlebelle 與 React 組件結合使用來擴展可能性。使用此框架，可以創建 Javascript XML、編寫布局、從外部 API 獲取數據、進行 Jest 測試并輕快的進行部署。

目前 Cuttlebelle 還處于起步階段，目前 Github 上有接近 0.5k 的 star，是一個值得關注的 SSG 前端項目。

Hugo

這個靜態站點生成器是用 Golang 編程語言編寫的，開發者可以在 ReactJS 應用程序中使用。 Hugo 也是一個免費的開源框架，擁有 300 多個主題。

Hugo 最好的地方在于頁面加載時間不到一毫秒，讓用戶在一秒內獲得整個網站。 Hugo 支持 Windows、Linux、FreeBSD、macOS 等操作系統。 Hugo 還有助于菜單、分類法、各種內容類型、動態 API 和其他用于構建有趣的 React 網站的插件。

目前 Hugo 在 Github 上有超過 66.6k 的 star、7.1k 的 fork、0.4k 的項目依賴量，代碼貢獻者達到了 0.76k、是一個值得嘗試的 React 生態前端 SSG 優秀開源項目。

React Static

React 團隊創建了這個靜態站點生成器來克服其他 SSG 的缺點，以便開發人員獲得更好的體驗。 使用 React Static，網站可以實現從源到路由的更快數據流。

React Static 的學習曲線更短，因此開發人員會非常樂意使用它。 它結合了屬性映射功能（Prop Mapping Functionalities）以及數據攝取（Data Ingestion）和查詢。

目前 React Static 在 Github 上有超過 10.2k 的 star、0.8k 的 fork、0.4k 的項目依賴量，代碼貢獻者 0.24k、是一個值得嘗試的 React 生態前端 SSG 優秀開源項目。

Jekyll

Jekyll 是一個簡單的、博客感知的靜態站點生成器，非常適合個人、項目或組織站點。 把它想象成一個基于文件的 CMS，沒有那么復雜。 Jekyll 獲取內容，渲染 Markdown 和 Liquid 模板，并吐出一個完整的靜態網站，最后由 Apache、Nginx 或其他網絡服務器提供服務。 Jekyll 是 GitHub Pages 背后的引擎，開發者可以使用它直接從 GitHub 存儲庫托管站點。

目前 Jekyll 在 Github 上有超過 46.5k 的 star、10.1k 的 fork、代碼貢獻者達到了 1k、是一個值得嘗試的 React 生態前端 SSG 優秀開源項目。

Phenomic

Phenomic 是一個模塊化的網站編譯器，可以在其中將 React 用作渲染器，將 Webpack 用作打包器。 開發人員可以擁有使用此靜態網站生成器 React 構建成熟網站或應用程序的經驗。

Phenomic 有一些資源和一個文檔來構建 React 博客應用程序。 借助此 SSG，可以構建具有極佳和快速用戶體驗的高性能 SEO 網站。

目前，Phenomic 在 Github 上有超過 3.2k 的 star、0.3k 的 fork、不過值得一提的是目前該項目已經廢棄，官方推薦使用 Next.js 進行替換。

4.本文總結

本文主要給大家帶來的主題是2023 年值得考慮的10大靜態站點生成器。因為篇幅有限，文章并沒有過多展開，如果有興趣，文末的參考資料提供了優秀文檔以供學習。最后，歡迎大家點贊、評論、轉發、收藏！

參考資料

https://github.com/vercel/next.js/

https://github.com/gatsbyjs/gatsby

https://www.mparticle.com/blog/what-is-gatsby/

https://qwik.builder.io/docs/

https://github.com/gohugoio/hugo

https://kinsta.com/blog/react-static-site-generator/

https://github.com/react-static/react-static

https://github.com/jekyll/jekyll

https://github.com/cuttlebelle/cuttlebelle

https://github.com/MoOx/phenomic

https://www.bacancytechnology.com/blog/react-static-site-generators

https://aglowiditsolutions.com/blog/top-react-static-site-generators/

TML

HTML 可以從以下幾個方面進行了解：

索引文件

文件 public/index.html 是一個模板，將使用 html webpack 插件進行處理，在構建期間，將自動注入資產鏈接，除此之外，Vue CLI 還可以自動注入資源提示（預加載/預取）、清單/圖標鏈接（使用PWA插件時）以及生成期間生成的JavaScript和CSS 文件的資產鏈接。

插值

由于索引文件用作模板，因此可以使用lodash模板語法在其中插入值：

• <%=VALUE%> 用于非縮放插值；
• <%-VALUE%> 用于HTML轉義插值；
• <%expression%> 用于JavaScript控制流。

除了html webpack插件公開的默認值之外，所有客戶端env變量也可以直接使用。

<link rel="icon" href="<%=BASE_URL %>favicon.ico">

預載

<link rel="preload"> 是一種資源提示，用于指定頁面加載后很快將需要的資源，因此如果我們希望在頁面加載生命周期的早期，在瀏覽器的主要呈現機制啟動之前就開始預加載。

默認情況下，Vue CLI應用程序將自動為應用程序初始呈現所需的所有文件生成預加載提示。提示是使用 @vue/preload webpack plugin 注入的，可以通過 chainWebpack as config.plugin（'preload'） 進行修改/刪除。

預取

<link rel="prefetch"> 是一種資源提示，告訴瀏覽器在頁面加載完成后，在瀏覽器空閑時間內預取用戶近期可能訪問的內容。

默認情況下，Vue CLI應用程序將自動為為異步塊生成的所有JavaScript文件生成預取提示（這是通過dynamic import（）按需拆分代碼的結果）。

提示是使用 @vue/preload webpack plugin 注入的，同樣是可以通過chainWebpack as config.plugin（'prefetch'） 進行修改/刪除。

注意：在使用多頁設置時，應更改上面的插件名稱以匹配結構 “prefetch-{pagename}”，例如“prefetch app”。

禁用預取插件后，您可以使用webpack的嵌入式注釋手動選擇要預取的特定塊：

import(/* webpackPrefetch: true */ './someAsyncComponent.vue')

加載父塊時，webpack的運行時將注入預取鏈接。

禁用索引的生成

當使用具有現有后端的VUE CLI時，可能需要禁用 index.html 的生成，以便生成的資產可以在服務器呈現的頁面中使用，因此我們可以將以下內容添加到vue.config.js：

但是上面的代碼是存在一些問題的：

• 硬編碼的文件名使得實現高效的緩存控制變得更加困難；
• 硬編碼的文件名也不能很好地處理代碼拆分，因為代碼拆分會生成具有不同文件名的附加JavaScript文件；
• 硬編碼文件名不適用于現代模式。

相反，我們可以應該考慮使用indexPath選項將生成的HTML用作服務器端框架中的視圖模板。

靜態資產

靜態資產可以從以下幾個方面進行了解：

靜態資產處理可以有兩種不同的方式：

• 在JavaScript中導入或通過相對路徑在templates/CSS中引用。此類引用將由webpack處理。
• 放置在 public 中并通過絕對路徑引用。這些資產只會被復制而不會通過webpack

相對路徑導入

在 .JavaScript、CSS或 *.vue 文件中使用相對路徑（必須以開頭）引用靜態資源時，該資源將包含在webpack的依賴關系圖中。在此編譯過程中，所有資產URL，例如 <img src="…">、background:url(...) 和CSS @import，都被解析為模塊依賴項。

<img src="./image.png">
// 將被編譯為
h('img', { attrs: { src: require('./image.png') }})

在內部，我們使用 file-loader 通過版本散列和正確的公共基路徑確定最終文件位置，并使用 url-loader 有條件地內聯小于4kb的資產，從而減少HTTP請求的數量；我們還可以通過chainWebpack調整內聯文件大小限制。

URL轉換規則

• 如果URL是一個絕對路徑（例如： /images/jtzc_1.png），它將保持原樣；
• 如果URL以 . 開頭，它將被解釋為一個相對的模塊請求，并根據文件系統上的文件夾結構進行解析；
• 如果URL以~ 開頭，則將其解釋為模塊請求之后的任何內容，也就意味著我們甚至可以引用節點模塊中的資源；（例如：<img src="~some-npm-package/jtzc_1.png">）
• 如果URL以 @ 開頭，則它也被解釋為模塊請求。

公用文件夾

放置在公用文件夾中的任何靜態資產都將被復制，而不會通過webpack。我們需要使用絕對路徑引用它們。

注意：我們盡可能將資產作為模塊依賴關系圖的一部分導入，以便它們通過webpack時具有以下好處：

• 腳本和樣式表被縮小并捆綁在一起，以避免額外的網絡請求；
• 丟失的文件會導致編譯錯誤，而不是用戶的404個錯誤；
• 結果文件名包含內容散列，因此我們無需擔心瀏覽器緩存其舊版本。

公共目錄是作為一個轉義填充提供的，當通過絕對路徑引用它時，我們需要考慮到自身的應用程序將部署在哪里，如果應用未部署在域的根目錄下，則需要在URL前面加上publicPath：

• 在public/index.html或html webpack plugin用作模板的其他html文件中，需要用<%=BASE_URL%>作為鏈接的前綴：<link rel="icon" href="<%=BASE_URL %>favicon.ico">
• 在模板中，您需要首先將基本URL傳遞給組件data () { return { publicPath: process.env.BASE_URL } } 然后：<img :src="`${publicPath}my-image.png`">

怎么使用公共文件夾：

• 在生成輸出中需要具有特定名稱的文件；
• 成千上萬的圖像，我們需要動態地引用它們的路徑；
• 某些庫可能與Webpack不兼容，沒有其他選項時，只能將其作為 <script>標記包含。

鏈接：https://www.9xkd.com/