靜態(tài)網(wǎng)站生成器 (SSG) 在過去十年中日益流行。本文探討了靜態(tài)網(wǎng)站提供的開發(fā)者友好型構(gòu)建流程、更輕松的部署、改進(jìn)的性能和更好的安全性如何使您的網(wǎng)站受益。首先，讓我們明確“靜態(tài)網(wǎng)站生成器”一詞的含義……

關(guān)鍵要點(diǎn)

• 靜態(tài)網(wǎng)站生成器 (SSG) 提供增強(qiáng)的靈活性，允許開發(fā)人員直接將小部件或自定義組件插入文件，而無需受內(nèi)容管理系統(tǒng) (CMS) 的限制。
• SSG 通過創(chuàng)建預(yù)緩存頁面來增強(qiáng)網(wǎng)站性能，這些頁面加載速度更快，并且可以通過全球內(nèi)容分發(fā)網(wǎng)絡(luò) (CDN) 輕松部署。
• SSG 減少了服務(wù)器端依賴性并提高了可靠性，因?yàn)樗鼈冎恍枰蛻舳?HTML 文件和相關(guān)資源，因此不太容易崩潰或發(fā)生故障。
• SSG 通過最大限度地減少攻擊媒介并允許內(nèi)容版本控制來提供卓越的安全性，從而可以輕松跟蹤更改并在必要時(shí)恢復(fù)到以前的版本。

什么是靜態(tài)網(wǎng)站？

回想一下您構(gòu)建的第一個(gè)網(wǎng)站。大多數(shù)開發(fā)人員首先創(chuàng)建一系列包含在單個(gè) HTML 文件中的頁面。每個(gè)頁面都會調(diào)用資源，例如圖像、CSS，以及一些 JavaScript 代碼。您可能會直接從文件系統(tǒng)啟動(dòng)這些文件，而無需 Web 服務(wù)器。那時(shí)一切都很簡單。但隨著網(wǎng)站規(guī)模越來越大、越來越復(fù)雜，困難也隨之而來?？紤]一下導(dǎo)航：它在每個(gè)文件中可能都相似，但是添加新頁面需要更新其他所有頁面。甚至對 CSS 和圖像的引用也會隨著文件夾結(jié)構(gòu)的演變而變得笨拙。您可能已經(jīng)考慮過服務(wù)器端包含或 PHP 等選項(xiàng)，但更簡單的選項(xiàng)可能是內(nèi)容管理系統(tǒng) (CMS)……

什么是內(nèi)容管理系統(tǒng)？

CMS 通常提供管理控制面板。這些面板允許作者編寫存儲在后端數(shù)據(jù)庫中的內(nèi)容。當(dāng)訪問者請求 URL 時(shí)，CMS 會：1. 確定需要哪個(gè)頁面；2. 從數(shù)據(jù)庫請求相應(yīng)的內(nèi)容；3. 加載 HTML 模板（通常來自文件系統(tǒng)）；4. 在模板中呈現(xiàn)內(nèi)容；5. 將格式化的 HTML 頁面返回給訪問者的瀏覽器。

這幾乎是瞬間完成的。模板可以包含根據(jù)導(dǎo)航層次結(jié)構(gòu)生成菜單的代碼。一切都很順利，超過十分之四的人選擇使用基于 PHP/MySQL 的開源 WordPress CMS 來管理他們的網(wǎng)站。不幸的是，CMS 帶來了一系列不同的問題：- 您需要遵守 CMS 的工作方式。添加自定義文本或組件可能會很麻煩；- 服務(wù)器的工作量更大，性能可能會受到影響；- 存在其他故障點(diǎn)。軟件升級或數(shù)據(jù)庫故障可能會導(dǎo)致您的網(wǎng)站宕機(jī)。

什么是靜態(tài)網(wǎng)站生成器？

SSG 是使用手動(dòng)編碼的靜態(tài)網(wǎng)站和完整 CMS 之間的折衷方案，同時(shí)保留了這兩者的優(yōu)點(diǎn)。從本質(zhì)上講，您可以使用類似 CMS 的概念（例如模板）生成基于靜態(tài) HTML 頁面的網(wǎng)站。內(nèi)容可以從數(shù)據(jù)庫、Markdown 文件、API 或任何實(shí)用的存儲位置提取。站點(diǎn)生成可以在您的開發(fā)機(jī)器、暫存服務(wù)器上進(jìn)行，或者使用服務(wù)在將更改推送到代碼存儲庫時(shí)進(jìn)行構(gòu)建。然后，生成的 HTML 文件和其他資源將部署到實(shí)時(shí) Web 服務(wù)器。術(shù)語“靜態(tài)”并不意味著“不變”。SSG 構(gòu)建頁面一次，而 CMS 在每次請求時(shí)構(gòu)建頁面。最終結(jié)果是相同的，用戶永遠(yuǎn)不會知道其中的區(qū)別。相關(guān)的概念是“無頭”或“解耦”CMS。這些系統(tǒng)使用 WordPress 等界面來處理內(nèi)容管理，但允許其他系統(tǒng)通過 REST API 或 GraphQL API 訪問數(shù)據(jù)。因此，諸如 Eleventy 之類的 SSG 可以使用從內(nèi)部服務(wù)器提取的 WordPress 頁面內(nèi)容來構(gòu)建靜態(tài)網(wǎng)站。生成的 HTML 文件可以上傳到 Web 服務(wù)器，但 WordPress 安裝永遠(yuǎn)不需要從組織外部公開訪問。術(shù)語 Jamstack（JavaScript、API 和標(biāo)記）也用于與靜態(tài)站點(diǎn)相關(guān)的方面。它指的是框架、無服務(wù)器函數(shù)和相關(guān)工具的興起，這些工具生成靜態(tài)文件，但允許創(chuàng)建更復(fù)雜的交互性。流行的靜態(tài)網(wǎng)站生成器包括 Jekyll、Eleventy、Gatsby、Hugo 和 Metalsmith。大多數(shù)語言都提供 SSG（請參閱 StaticGen 獲取更多信息）。諸如 Next.js 之類的框架會在可能的情況下靜態(tài)呈現(xiàn)頁面，但也允許開發(fā)人員在必要時(shí)運(yùn)行服務(wù)器端代碼。讓我們來研究一下使用 SSG 的好處……

1. 靈活性

CMS 通常會限制您的選項(xiàng)，因?yàn)樗鼈兣c具有特定字段的數(shù)據(jù)庫綁定。如果您想向某些頁面添加 Twitter 小部件，通常需要一個(gè)插件、一個(gè)簡碼或一些自定義功能。在靜態(tài)站點(diǎn)中，小部件可以簡單地直接插入文件或使用部分/片段。限制很少，因?yàn)槟皇?CMS 強(qiáng)加的限制。

2. 更好的性能

大多數(shù) CMS 應(yīng)用程序都提供內(nèi)置的或插件驅(qū)動(dòng)的緩存系統(tǒng)，以確保盡可能生成和重用頁面。這是有效的，盡管管理、驗(yàn)證和重新生成緩存頁面的開銷仍然存在。靜態(tài)站點(diǎn)可以創(chuàng)建永遠(yuǎn)不需要過期的預(yù)緩存頁面。文件也可以在部署之前進(jìn)行縮小，以確保最小的負(fù)載，并可以通過全球內(nèi)容分發(fā)網(wǎng)絡(luò) (CDN) 輕松部署。靜態(tài)站點(diǎn)的性能始終優(yōu)于使用類似模板的 CMS 驅(qū)動(dòng)的版本。

3. 更少的服務(wù)器端依賴性

典型的 WordPress 安裝需要：- 適用的操作系統(tǒng)，例如 Ubuntu 或 CentOS；- Web 服務(wù)器，例如 Apache 或 NGINX；- 帶有相關(guān)擴(kuò)展和 Web 服務(wù)器配置的 PHP；- MySQL；- WordPress 應(yīng)用程序；- 任何必要的插件；- 主題/模板代碼。

必須安裝和管理這些依賴項(xiàng)。WordPress 比其他一些應(yīng)用程序需要更少的精力，但單個(gè)更新仍然可能導(dǎo)致混亂。靜態(tài)網(wǎng)站生成器可能需要同樣多的依賴項(xiàng)，但它們可以在開發(fā)人員的 PC 上運(yùn)行，不會部署到生產(chǎn)服務(wù)器。SSG 生成客戶端 HTML 文件和相關(guān)資源，這些資源可以托管在任何 Web 服務(wù)器上。無需安裝、管理或維護(hù)其他任何內(nèi)容。

4. 提高可靠性

CMS 很復(fù)雜，有很多活動(dòng)部件和故障點(diǎn)。運(yùn)行 WordPress 站點(diǎn)一段時(shí)間后，您幾乎肯定會遇到可怕的“無法建立數(shù)據(jù)庫連接”錯(cuò)誤。意外的 CMS 問題可能源于突然的流量激增，這會使服務(wù)器過載、數(shù)據(jù)庫崩潰或限制活動(dòng)連接。提供靜態(tài)站點(diǎn)的工作量較小。在許多情況下，服務(wù)器只需要返回平面文件，因此根據(jù)流量需求進(jìn)行擴(kuò)展變得很簡單。仍然有可能使 Web 服務(wù)器崩潰或使 API 過載，但這需要相當(dāng)多的并發(fā)請求。

5. 卓越的安全性

有人可能想要攻擊您的網(wǎng)站的原因有很多。流量劫持、惡意廣告、鏈接、真實(shí)性欺騙和惡意軟件托管都允許未經(jīng)授權(quán)的用戶獲得金錢和/或贊譽(yù)。CMS 打開了許多攻擊媒介。最明顯的是登錄屏幕：它僅與最弱的用戶密碼一樣安全。請注意，任何運(yùn)行服務(wù)器端代碼的頁面也提供了潛在的漏洞——例如通過您的聯(lián)系表單發(fā)送垃圾郵件?？赡懿⒉幻黠@有人獲得了訪問權(quán)限；最糟糕的罪魁禍?zhǔn)紫胍３蛛[藏。靜態(tài)站點(diǎn)可能幾乎不需要服務(wù)器端功能。一些風(fēng)險(xiǎn)仍然存在，但它們很少像以前那樣成問題：- 某人可以通過 SSH 或 FTP 訪問服務(wù)器并篡改頁面或上傳文件。但是，通常可以輕松檢查更改（可能使用 git status），擦除整個(gè)站點(diǎn)，然后再次重新生成它；- 靜態(tài)站點(diǎn)調(diào)用的 API 在瀏覽器中公開，并且可以像任何服務(wù)器端代碼一樣被利用——例如表單電子郵件程序。良好的安全實(shí)踐、CORS 和 CSP 將有所幫助。

6. 客戶端控制注意事項(xiàng)

您可以花費(fèi)數(shù)周時(shí)間為客戶端構(gòu)建一個(gè)有吸引力的 CMS 主題，讓客戶端在移交后的幾分鐘內(nèi)就破壞他們的網(wǎng)站！使用 CMS 不一定容易，并且它為內(nèi)容編輯器提供了相當(dāng)大的權(quán)力。您可以鎖定諸如插件安裝之類的權(quán)限，但這并不能阻止某人更改字體、引入沖突的顏色、添加劣質(zhì)照片或破壞布局。靜態(tài)站點(diǎn)可以根據(jù)您的選擇而變得有限或靈活。如果您使用 Markdown 或類似的平面文件，編輯器就不太可能犯錯(cuò)或?qū)撁鏄邮疆a(chǎn)生不利影響。有些人會錯(cuò)過 CMS 內(nèi)容管理面板，但是您可以：1. 使用他們現(xiàn)有的 CMS，并在生成之前清理數(shù)據(jù)；或 2. 提供更簡單的流程，例如在 StackEdit 或 Hackmd.io 中編輯基于 Git 的文件。

7. 版本控制和測試

數(shù)據(jù)庫數(shù)據(jù)是易變的。CMS 允許用戶隨時(shí)添加、刪除或更改內(nèi)容。擦除整個(gè)站點(diǎn)只需點(diǎn)擊幾下。您可以備份數(shù)據(jù)庫，但即使定期執(zhí)行此操作，您仍然可能會丟失一些數(shù)據(jù)。靜態(tài)站點(diǎn)通常更安全。內(nèi)容可以存儲在：- 平面文件：然后可以使用 Git 或類似系統(tǒng)對其進(jìn)行版本控制。舊內(nèi)容將被保留，并且可以快速撤消更改；- 私有數(shù)據(jù)庫：僅在生成站點(diǎn)時(shí)才需要數(shù)據(jù)，因此無需將其公開在公共服務(wù)器上。

測試也變得更容易，因?yàn)檎军c(diǎn)可以在任何地方生成和預(yù)覽——甚至在客戶端的 PC 上。付出更多努力，您可以實(shí)施部署系統(tǒng)，以遠(yuǎn)程構(gòu)建站點(diǎn)，并在將新內(nèi)容推送到存儲庫、審查和批準(zhǔn)后更新實(shí)時(shí)服務(wù)器。所以在靜態(tài)站點(diǎn)世界里，一切都很美好。是嗎？請閱讀我的后續(xù)文章《不使用靜態(tài)網(wǎng)站生成器的 7 個(gè)理由》。有關(guān)使用靜態(tài)網(wǎng)站生成器構(gòu)建站點(diǎn)的實(shí)際演示，請參閱：- 如何使用 Metalsmith 創(chuàng)建靜態(tài)站點(diǎn)；- Eleventy 入門；- 如何將 WordPress 用作 Eleventy 的無頭 CMS

靜態(tài)網(wǎng)站生成器的常見問題解答 (FAQ)

使用靜態(tài)網(wǎng)站生成器的主要優(yōu)勢是什么？

靜態(tài)網(wǎng)站生成器提供多種優(yōu)勢。首先，它們提供增強(qiáng)的安全性，因?yàn)樗鼈儫o需數(shù)據(jù)庫，從而降低了攻擊風(fēng)險(xiǎn)。其次，它們提供改進(jìn)的性能。由于站點(diǎn)是預(yù)先構(gòu)建的，因此它們的加載速度更快，從而提供更好的用戶體驗(yàn)。第三，它們具有成本效益。托管靜態(tài)站點(diǎn)的成本通常低于動(dòng)態(tài)站點(diǎn)。最后，它們?yōu)閮?nèi)容提供版本控制，允許您跟蹤更改并在需要時(shí)恢復(fù)到以前的版本。

靜態(tài)網(wǎng)站生成器如何提高網(wǎng)站性能？

靜態(tài)網(wǎng)站生成器通過預(yù)先構(gòu)建網(wǎng)站的所有頁面來提高網(wǎng)站性能。這意味著當(dāng)用戶請求頁面時(shí)，可以立即提供服務(wù)，而無需任何服務(wù)器端處理。這大大減少了網(wǎng)站的加載時(shí)間，從而提供更快、更流暢的用戶體驗(yàn)。

我可以將靜態(tài)網(wǎng)站生成器用于大型網(wǎng)站嗎？

是的，您可以將靜態(tài)網(wǎng)站生成器用于大型網(wǎng)站。但是，隨著站點(diǎn)規(guī)模的增長，構(gòu)建時(shí)間可能會增加。這是因?yàn)樯善鞅仨氼A(yù)先構(gòu)建每個(gè)頁面。盡管如此，性能優(yōu)勢通常超過更長的構(gòu)建時(shí)間，尤其是在內(nèi)容不經(jīng)常更改的站點(diǎn)中。

靜態(tài)站點(diǎn)的安全性如何？

靜態(tài)站點(diǎn)通常比動(dòng)態(tài)站點(diǎn)更安全。這是因?yàn)樗鼈儾灰蕾囉跀?shù)據(jù)庫或服務(wù)器端處理，而這些是攻擊的常見目標(biāo)。但是，與任何網(wǎng)站一樣，靜態(tài)站點(diǎn)并非不受所有類型攻擊的影響，因此務(wù)必遵循 Web 安全性的最佳實(shí)踐。

使用靜態(tài)網(wǎng)站生成器需要哪些技能？

要使用靜態(tài)網(wǎng)站生成器，您通常需要具備一些 HTML、CSS 和 JavaScript 知識。某些生成器還需要了解特定編程語言，例如 Ruby 或 Python。此外，您可能需要熟悉使用命令行和版本控制系統(tǒng)，例如 Git。

我可以將靜態(tài)網(wǎng)站生成器與無頭 CMS 一起使用嗎？

是的，您可以將靜態(tài)網(wǎng)站生成器與無頭 CMS 一起使用。這允許您在 CMS 中管理內(nèi)容，然后使用生成器構(gòu)建您的站點(diǎn)。這可能是一個(gè)強(qiáng)大的組合，提供 CMS 的優(yōu)勢以及靜態(tài)站點(diǎn)的性能和安全優(yōu)勢。

如何選擇合適的靜態(tài)網(wǎng)站生成器？

選擇合適的靜態(tài)網(wǎng)站生成器取決于您的特定需求和技能。請考慮諸如其構(gòu)建的語言、其使用的模板系統(tǒng)、其構(gòu)建速度、社區(qū)支持及其與您正在使用的其他工具的兼容性等因素。

我可以將靜態(tài)網(wǎng)站生成器用于電子商務(wù)嗎？

是的，您可以將靜態(tài)網(wǎng)站生成器用于電子商務(wù)。但是，由于靜態(tài)站點(diǎn)沒有內(nèi)置后端，因此您需要使用第三方服務(wù)來處理購物車功能和支付處理等方面。

一些流行的靜態(tài)網(wǎng)站生成器有哪些？

一些流行的靜態(tài)網(wǎng)站生成器包括 Jekyll、Hugo、Next.js、Gatsby 和 Hexo。每個(gè)都有其自身的優(yōu)缺點(diǎn)，因此選擇最適合您需求的生成器非常重要。

靜態(tài)網(wǎng)站生成器如何處理動(dòng)態(tài)內(nèi)容？

雖然靜態(tài)網(wǎng)站生成器最適合靜態(tài)內(nèi)容，但它們可以在第三方服務(wù)的幫助下處理動(dòng)態(tài)內(nèi)容。例如，您可以使用 API 來提取動(dòng)態(tài)數(shù)據(jù)，或使用 Disqus 等服務(wù)進(jìn)行評論或使用 Formspree 等服務(wù)進(jìn)行表單。

以上是使用靜態(tài)站點(diǎn)生成器的7個(gè)理由的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！