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

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

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

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

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

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

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

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

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

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

1. 靈活性

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

2. 更好的性能

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

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

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

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

4. 提高可靠性

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

5. 卓越的安全性

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

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

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

7. 版本控制和測(cè)試

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

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

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

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

靜態(tài)網(wǎng)站生成器提供多種優(yōu)勢(shì)。首先，它們提供增強(qiáng)的安全性，因?yàn)樗鼈儫o(wú)需數(shù)據(jù)庫(kù)，從而降低了攻擊風(fēng)險(xiǎn)。其次，它們提供改進(jìn)的性能。由于站點(diǎn)是預(yù)先構(gòu)建的，因此它們的加載速度更快，從而提供更好的用戶(hù)體驗(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)站生成器通過(guò)預(yù)先構(gòu)建網(wǎng)站的所有頁(yè)面來(lái)提高網(wǎng)站性能。這意味著當(dāng)用戶(hù)請(qǐng)求頁(yè)面時(shí)，可以立即提供服務(wù)，而無(wú)需任何服務(wù)器端處理。這大大減少了網(wǎng)站的加載時(shí)間，從而提供更快、更流暢的用戶(hù)體驗(yàn)。

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

是的，您可以將靜態(tài)網(wǎng)站生成器用于大型網(wǎng)站。但是，隨著站點(diǎn)規(guī)模的增長(zhǎng)，構(gòu)建時(shí)間可能會(huì)增加。這是因?yàn)樯善鞅仨氼A(yù)先構(gòu)建每個(gè)頁(yè)面。盡管如此，性能優(yōu)勢(shì)通常超過(guò)更長(zhǎng)的構(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)樗鼈儾灰蕾?lài)于數(shù)據(jù)庫(kù)或服務(wù)器端處理，而這些是攻擊的常見(jiàn)目標(biāo)。但是，與任何網(wǎng)站一樣，靜態(tài)站點(diǎn)并非不受所有類(lèi)型攻擊的影響，因此務(wù)必遵循 Web 安全性的最佳實(shí)踐。

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

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

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

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

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

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

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

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

一些流行的靜態(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 來(lái)提取動(dòng)態(tài)數(shù)據(jù)，或使用 Disqus 等服務(wù)進(jìn)行評(píng)論或使用 Formspree 等服務(wù)進(jìn)行表單。

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