近年來(lái)，構(gòu)建網(wǎng)站的方式發(fā)生了很大變化，出現(xiàn)了很多新的構(gòu)建網(wǎng)站的方式。靜態(tài)站點(diǎn)生成器 (SSG) 就是一種構(gòu)建網(wǎng)站的現(xiàn)代 Web 開發(fā)技術(shù)，其正在變得越來(lái)越流行！

在本文中，我們將探討什么是靜態(tài)站點(diǎn)生成器以及為項(xiàng)目選擇靜態(tài)站點(diǎn)生成器時(shí)要考慮的因素，最后看看 2023 年值得考慮的靜態(tài)站點(diǎn)生成器！

什么是靜態(tài)站點(diǎn)生成器？

靜態(tài)站點(diǎn)生成器（Static Site Generators，簡(jiǎn)稱 SSG）是一種軟件工具，它采用模板、組件和內(nèi)容源，然后生成網(wǎng)站所需的 HTML、CSS 和 JavaScript 文件。

靜態(tài)站點(diǎn)生成器使網(wǎng)站加載速度更快，因?yàn)樗鼤?huì)在用戶請(qǐng)求之前預(yù)先構(gòu)建網(wǎng)站所需的必要文件。靜態(tài)站點(diǎn)生成器是用于構(gòu)建高性能網(wǎng)站的一組工具。

SSG 有什么好處？

可以使用靜態(tài)站點(diǎn)生成器創(chuàng)建安全、可擴(kuò)展且易于維護(hù)的網(wǎng)站。由于其靈活性和性能，它們變得越來(lái)越受歡迎。對(duì)于想要?jiǎng)?chuàng)建可同時(shí)提供大規(guī)模動(dòng)態(tài)內(nèi)容和性能的網(wǎng)站的開發(fā)人員來(lái)說(shuō)，靜態(tài)站點(diǎn)生成器是一個(gè)不錯(cuò)的選擇。

什么時(shí)候應(yīng)該使用 SSG？

靜態(tài)站點(diǎn)生成器非常適合創(chuàng)建營(yíng)銷、文檔和博客等網(wǎng)站。但不適用于想要顯示經(jīng)常變化的實(shí)時(shí)、動(dòng)態(tài)數(shù)據(jù)的情況。例如，股票交易或內(nèi)容需要不斷更新的 SaaS 儀表板。在這樣的場(chǎng)景下，像 Next.js、Nuxt.js、Remix 這樣支持服務(wù)端渲染的框架更能滿足我們的需求。

選擇靜態(tài)站點(diǎn)生成器時(shí)要考慮的因素

目前，有超過(guò) 350 個(gè)靜態(tài)站點(diǎn)生成器[1]可以供我們選擇：

下面就來(lái)看看在選擇靜態(tài)站點(diǎn)生成器時(shí)要考慮哪些因素。

項(xiàng)目性質(zhì)

我們要構(gòu)建的項(xiàng)目類型將影響選擇的工具，因?yàn)槭褂米钸m合項(xiàng)目要求的技術(shù)非常重要。例如，雖然可以在技術(shù)上使用相同的靜態(tài)站點(diǎn)生成器來(lái)構(gòu)建博客、文檔和營(yíng)銷網(wǎng)站，但其他 SSG 可能更適合特定用例。Hugo 是博客和文檔的絕佳選擇，而 Gatsby、Nuxt.js 和 Next.js 是營(yíng)銷網(wǎng)站的絕佳選擇。

便于使用

并非每個(gè)開發(fā)者或團(tuán)隊(duì)都有時(shí)間和資源從頭開始學(xué)習(xí)新工具。很多情況下，不得不立即進(jìn)入開發(fā)，幾乎沒有時(shí)間進(jìn)行深入學(xué)習(xí)。在選擇靜態(tài)站點(diǎn)生成器時(shí)，以下是一些值得考慮的問題：

• SSG 是用熟悉的技術(shù)構(gòu)建的，還是需要學(xué)習(xí)一種新的編程語(yǔ)言才能正確使用它？
• 文檔是否詳細(xì)？
• 是否提供初學(xué)者教程和其他學(xué)習(xí)材料來(lái)幫助學(xué)習(xí)過(guò)程？
• 是否可以使用模板和主題來(lái)加快構(gòu)建過(guò)程？

技術(shù)棧

SSG 與團(tuán)隊(duì)技術(shù)棧的兼容性至關(guān)重要。使用與我們的技術(shù)棧對(duì)應(yīng)的 SSG 不僅會(huì)提高開發(fā)者的生產(chǎn)力和效率，還會(huì)縮短開發(fā)時(shí)間。

以下是一些 SSG 及其對(duì)應(yīng)的語(yǔ)言：

• Eleventy 是原生 JavaScript 的絕佳選擇
• Next.js 和 Gatsby 非常適合 React 開發(fā)者
• Nuxt.js 非常適合 Vue.js 開發(fā)者
• SvelteKit 非常適合 Svelte 開發(fā)者
• Hugo 非常適合 Go 開發(fā)者

開發(fā)者社區(qū)

確定 SSG 是否是一個(gè)好的選擇的一個(gè)好方法就是去研究它的開發(fā)者社區(qū)。開發(fā)者往往會(huì)聚集在好的工具和軟件周圍，因此如果它經(jīng)過(guò)充分審查，可能值得考慮。開發(fā)者社區(qū)對(duì)于獲得支持和幫助也很重要，遇到問題時(shí)，可以更快的得到解決。

成熟度和采用率

決定使用哪種 SSG 的一個(gè)好方法是查看業(yè)內(nèi)其他人使用的工具以及這些工具的成熟程度。Next.js 被廣泛采用的一個(gè)原因是它是一個(gè)成熟的框架，具有很多強(qiáng)大的功能并且有 Vercel 的支持。這些因素促成了它在開發(fā)中被廣泛采用。

2023年值得考慮的靜態(tài)站點(diǎn)生成器

為了正確審查值得考慮的靜態(tài)站點(diǎn)生成器，我們將把它們分為以下兩類：

• 提供多種渲染方法（包括靜態(tài)站點(diǎn)生成）的框架：Gatsby、Next.js、Astro、Nuxt.js 和 SvelteKit。
• 僅提供靜態(tài)渲染功能的 SSG：Eleventy 和 Hugo。

具有多種渲染方法的框架

Next.js

Next.js 不僅是一個(gè)靜態(tài)站點(diǎn)生成器，而且是使用最廣泛的開源、基于 React 的框架之一，用于構(gòu)建網(wǎng)站和 Web 應(yīng)用。它支持服務(wù)端渲染 (SSR)、靜態(tài)站點(diǎn)生成 (SSG)、增量靜態(tài)渲染和客戶端渲染 (CSR)。

Next.js 的一大優(yōu)點(diǎn)是它允許我們決定如何為每個(gè)頁(yè)面使用 SSR 或 SSG。這使其成為需要多種渲染方法的更復(fù)雜項(xiàng)目的不錯(cuò)選擇。

Next.js 由 Vercel 創(chuàng)建，目前擁有 101k GitHub Star。Next.js 還具有結(jié)構(gòu)良好且易于瀏覽的文檔，可提供無(wú)縫的學(xué)習(xí)體驗(yàn)。

特性：

• 基于文件的路由系統(tǒng)
• 默認(rèn)為 SSG，不同于默認(rèn)為 SSR 的其他工具
• 通過(guò)其自定義圖像組件優(yōu)化圖像

Gatsby

Gatsby 也是最流行和使用最廣泛的框架之一。它是一個(gè)基于 React.js 的開源框架，是創(chuàng)建網(wǎng)站和應(yīng)用的絕佳選擇。除了延遲靜態(tài)生成 (DSG) 和服務(wù)端呈現(xiàn) (SSR) 之外，它還提供了靜態(tài)站點(diǎn)生成。使用 Gatsby 的一個(gè)好處是它提供了大量的主題、入門模板和插件。

除了其框架功能之外，Gatsby 還提供一種名為 Gatsby Cloud 的產(chǎn)品，這是一種用于構(gòu)建和托管 Gatsby 網(wǎng)站的云基礎(chǔ)設(shè)施。Gatsby Cloud 之于 Gatsby 就像 Vercel 之于 Next.js。

Gatsby 框架擁有一個(gè)活躍的開發(fā)者社區(qū)，并提供了豐富的文檔。

特性：

• 支持基于 GraphQL 的數(shù)據(jù)獲取
• 擁有龐大的插件生態(tài)系統(tǒng)，其中包含適用于不同用例的插件，包括樣式、圖像、分析和搜索
• 支持與多個(gè) CMS 集成，包括 Prismic
• 提供多個(gè)主題和入門模板
• 可以通過(guò) Gatsby 的云平臺(tái)訪問全球 CDN、云功能等
• 通過(guò) gatsby-image 插件提供開箱即用的圖像處理、壓縮和優(yōu)化

Astro

Astro 在技術(shù)上是一個(gè)開源框架，而不是靜態(tài)站點(diǎn)生成器。這意味著即使 Astro 支持靜態(tài)站點(diǎn)生成，它也提供 SSR 并具有其他功能。例如，它支持與 Tailwind CSS、React、Vue 和 Svelte 等技術(shù)集成，并允許我們?cè)谕粦?yīng)用中混合混合它們。

Astro 的 Island 架構(gòu)允許我們?cè)陟o態(tài)頁(yè)面上擁有交互式內(nèi)容。Astro islands 為我們打開了將 SSG 與動(dòng)態(tài)內(nèi)容相結(jié)合的新方式的大門。一個(gè)示例就是將銷售活動(dòng)所需的倒數(shù)計(jì)時(shí)器組件注入到博客頁(yè)面。

Astro 將 UI 提取到頁(yè)面上的較小組件中，并用輕量級(jí) HTML 替換未使用的 JavaScript。這使得網(wǎng)站加載速度更快并縮短了可交互時(shí)間 (Time to Interactive，TTI)，因?yàn)榘l(fā)送到客戶端的 JavaScript 非常少。

盡管 Astro 是一個(gè)相對(duì)較新的解決方案，但其令人興奮的功能已經(jīng)引起了開發(fā)者的廣泛關(guān)注。Astro 提供了多種集成和主題，開發(fā)者可以使用它們來(lái)豐富應(yīng)用。

特性：

• 提供多個(gè)主題
• 提供多種集成
• 基于文件的路由
• 為 Markdown 和 MDX 提供原生支持
• 支持混合多個(gè)框架
• Island 架構(gòu)允許將交互式內(nèi)容注入到靜態(tài)頁(yè)面

Nuxt.js

Nuxt.js 是一個(gè)基于 Vue 的框架，并不是純粹的靜態(tài)站點(diǎn)生成器。但是，它可以用作構(gòu)建 SPA 的 SSR 框架或用作 SSG。它有一個(gè)全靜態(tài)模式，可以用它來(lái)開發(fā)靜態(tài)站點(diǎn)。

Nuxt.js 的最新版本默認(rèn)使用 Vite，使其速度更快、性能更高。Nuxt.js 在 Vue.js 開發(fā)者中非常流行。

特性：

• 基于文件的路由
• 全靜態(tài)模式
• 支持 Typescript
• 零配置啟動(dòng)
• 自動(dòng)導(dǎo)入組件
• 提供超過(guò) 160 個(gè)模塊

SvelteKit

SvelteKit 是由 Rich Harris 構(gòu)建的基于 Svelte 的框架。它是 Sapper 的繼任者，后者是 Svelte 的第一個(gè)框架。由 Svelte 提供支持，SvelteKit 也沒有虛擬 DOM，因此速度非?？烨倚阅芎芨?。與上面的其他選項(xiàng)類似，可以從多種渲染方法中進(jìn)行選擇，其中包括 SSG。

由于 Rich Harris 轉(zhuǎn)向了 Vercel，SvelteKit 最近獲得了更多關(guān)注。此舉意味著 Svelte 和 SvelteKit 現(xiàn)在得到了 Vercel 的支持。

特性：

• 沒有虛擬 DOM
• 零配置
• 靜態(tài)站點(diǎn)生成
• 基于文件的路由
• 代碼拆分
• 熱模塊重載

專用靜態(tài)站點(diǎn)生成器

Eleventy

Eleventy，簡(jiǎn)稱 11ty，是一個(gè)用 JavaScript 編寫的開源靜態(tài)站點(diǎn)生成器。但是，它不依賴于特定的框架來(lái)生成或提供內(nèi)容。對(duì)于熟悉并習(xí)慣使用 JavaScript 和 Node.js 的開發(fā)者來(lái)說(shuō)，這是一個(gè)很好的選擇。

多年來(lái)，Eleventy 越來(lái)越受歡迎，尤其是當(dāng) web.dev、ESlint、MDN 和 Netlify 等網(wǎng)站都是用它構(gòu)建的時(shí)候。

Eleventy 默認(rèn)是零配置的，具有靈活的配置選項(xiàng)，并且適用于任何項(xiàng)目的結(jié)構(gòu)。它支持多種模板語(yǔ)言，包括 Liquid、Handlebars、Markdown 和 JavaScript。

特性：

• 靈活的模板系統(tǒng)
• 支持 11 種模板語(yǔ)言
• 無(wú)需客戶端 JavaScript
• 快速構(gòu)建時(shí)間
• JavaScript 友好
• 配置靈活

Hugo

Hugo 是一個(gè)用 Go 編寫的靜態(tài)站點(diǎn)生成器，針對(duì)快速構(gòu)建時(shí)間進(jìn)行了優(yōu)化。

Hugo 提供了內(nèi)容管理功能，使其成為擁有許多帖子的網(wǎng)站或博客的絕佳選擇。首先，它處理存儲(chǔ)在 /content 目錄中的 markdown 文件中的所有內(nèi)容，使得從單個(gè)文件夾發(fā)布和管理大量?jī)?nèi)容變得容易。其次，Hugo 內(nèi)置了對(duì)分頁(yè)的支持，生成目錄，并支持將內(nèi)容分組到類別和標(biāo)簽中，稱為分類法。最后，Hugo 提供字?jǐn)?shù)統(tǒng)計(jì)和閱讀分鐘數(shù)功能。Hugo 還將 markdown 用于元數(shù)據(jù)、布局模板和 i18n 配置。

特性：

• 跨平臺(tái)支持 Windows、macOS、Linux 等
• 集成的谷歌分析支持
• 使用 markdown 來(lái)創(chuàng)建內(nèi)容
• 內(nèi)置分頁(yè)支持
• 支持生成目錄
• 提供分頁(yè)功能
• 支持國(guó)際化（i18n），開發(fā)者可以快速搭建多語(yǔ)言網(wǎng)站
• 一個(gè)很棒的主題系統(tǒng)，它提供了 300 多個(gè)主題
• 除了 HTML 輸出，Hugo 還支持 AMP 和 JSON 等其他格式

小結(jié)

靜態(tài)站點(diǎn)生成器可以快速輕松地生成靜態(tài)站點(diǎn)。它已經(jīng)改變或正在改變我們構(gòu)建網(wǎng)站的方式。除了在本文中提到的靜態(tài)站點(diǎn)生成器之外，還有很多優(yōu)秀的靜態(tài)站點(diǎn)生成器值得探索。

參考：https://prismic.io/blog/static-site-generators-2023??

相關(guān)鏈接

[1]

靜態(tài)站點(diǎn)生成器列表: https://jamstack.org/generators/