什麼是靜態網站生成器？

什麼是靜態網站生成器？

靜態網站產生器是一種基於未經處理資料和一組範本產生完整靜態 HTML 網站的工具。從本質上講，靜態網站產生器自動完成對單個 HTML 頁面進行編碼的任務，並讓這些頁面提前準備好為使用者提供服務。因為這些 HTML 頁面是預先構建的，所以它們可以在使用者的瀏覽器中非常快速地載入。

靜態網站產生器是內容管理系統 (CMS) 的替代品，後者是另一種用於管理 Web 內容、產生網頁和實作範本的工具。（範本是 Web 內容的可重用格式；開發人員使用範本來避免一遍又一遍地編寫相同的格式。）靜態網站產生器通常是 JAMstack Web 開發方法的一部分。

什麼是靜態網站？

靜態網站由一個或多個 HTML 網頁組成，這些網頁每次都以相同的方式載入。靜態網站與動態網站形成對比，動態網站根據一些不斷變化的資料輸入（例如使用者的位置、一天中的時間或使用者動作）進行不同的載入。靜態網頁是可以快速載入的簡單 HTML 檔案，而動態網頁需要在瀏覽器中執行 JavaScript 程式碼才能呈現。

靜態網站產生器和 CMS 之間有什麼區別？

在網際網路的早期，網站被儲存為靜態 HTML 網站，所有網頁都預先配置和硬編碼。這是低效的，因為它需要開發人員手動編碼每個網頁。

內容管理系統 (CMS) 的出現讓開發人員能夠避免所有這些手動設定。內容儲存在 CMS 資料庫中，而不是提前對頁面進行編碼，當使用者請求頁面時，伺服器會執行以下操作：

1. 查詢資料庫，尋找正確的內容
2. 識別該內容將適合的範本
3. 產生頁面
4. 將頁面提供給使用者

CMS 中的內容必須適合 CMS 資料庫提供的欄位之一，但只要符合要求，它就應該每次都出現在網站上的適當位置。

靜態網站產生器是這兩種方法的折衷方案。與 CMS 一樣，它允許開發人員使用範本並自動產生網頁——但它會提前完成後者，而不是回應使用者的請求。這可以提高網站效能，因為網頁可以立即交付給終端使用者。它還為開發人員提供了更大的自訂能力，因為他們不受 CMS 提供的資料庫欄位的限制。

使用靜態網站產生器有哪些優缺點？

優點

• 效能：由於靜態網站產生器會預先建立網頁，而不是隨選建立網頁（比如使用 CMS），因此網頁在使用者的瀏覽器中載入速度會稍快。
• 自訂：開發人員可以建立他們想要的任何範本。它們不受 CMS 提供的欄位限制，也不受 CMS 內建範本的限制。
• 更輕的後端：靜態網站是輕量型，不需要在伺服器端執行那麼多代碼，而基於 CMS 的網站會不斷地向伺服器端查詢內容。

缺點

• 很少或沒有預先構建的範本：無限自訂的缺點是可能需要更長的時間才能開始。許多靜態網站產生器不附帶範本，開發人員一開始要花很多時間從頭開始建立範本。
• 沒有方便使用的介面：非開發人員使用者更難使用靜態網站產生器發佈內容。沒有 CMS 介面，處理未格式化的原始資料可能會讓使用者望而生畏。此外，進行網站更新通常需要開發人員支援。

JAMstack 與靜態網站產生器有何關係？

JAMstack（JAM 代表「JavaScript、APIs、Markup」）是一種有效建立輕量型、快速執行的 Web 應用程式的方法。JAMstack 應用程式是靜態的，採用 API 用於任何後端功能。靜態網站產生器使開發人員能夠快速構建 JAMstack 應用程式前端。

前端框架如何與靜態網站產生器搭配使用？

前端框架是預先構建程式碼的檔案和資料夾集合，用於協助設計和格式化網站。常見的前端框架包括 Bootstrap、React 和 Vue.js，但還有很多其他框架。

當開發人員最初構建網站時，前端框架非常有用。但是，除非開發人員使用其他工具，否則前端框架本身不會產生 HTML 網頁。靜態網站產生器可以與開發人員的框架一起使用，以快速獲得完全設計好的網站或應用程式以供使用。大多數靜態網站產生器允許開發人員使用他們想要的任何框架。

什麼是 Markdown？

Markdown 是一種廣泛使用的簡單標記語言，用於格式化文字。如今，許多開發人員在編寫內容時更喜歡使用 Markdown 而非傳統的 HTML，且許多靜態網站產生器都支援 Markdown。

有哪些常用的靜態網站產生器？

如今有許多靜態網站產生器可供使用，需要瞭解的一些重要產生器包括：

• Jekyll
• Gatsby
• Hugo
• Next.js
• Eleventy

Cloudflare Pages 託管在 Cloudflare 全球網路上，該網路可以在 100 毫秒內連接到全球 99% 的網際網路，可以近乎即時地將內容交付給終端使用者。Cloudflare Pages 建立在 Cloudflare Workers 無伺服器功能的基礎之上，使開發人員能夠構建輕量型、可擴展的 Web 應用程式。

瞭解如何使用 Cloudflare Pages 部署 Jekyll 網站、Gatsby 網站、Hugo 網站等等。