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

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

CMS 通常提供管理控制面板。這些面板允許作者編寫存儲(chǔ)在後端數(shù)據(jù)庫中的內(nèi)容。當(dāng)訪問者請求URL 時(shí)，CMS 會(huì)：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 的工作方式。添加自定義文本或組件可能會(huì)很麻煩；- 服務(wù)器的工作量更大，性能可能會(huì)受到影響；- 存在其他故障點(diǎn)。軟件升級或數(shù)據(jù)庫故障可能會(huì)導(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í)用的存儲(chǔ)位置提取。站點(diǎn)生成可以在您的開發(fā)機(jī)器、暫存服務(wù)器上進(jìn)行，或者使用服務(wù)在將更改推送到代碼存儲(chǔ)庫時(shí)進(jìn)行構(gòu)建。然後，生成的 HTML 文件和其他資源將部署到實(shí)時(shí) Web 服務(wù)器。術(shù)語“靜態(tài)”並不意味著“不變”。 SSG 構(gòu)建頁面一次，而 CMS 在每次請求時(shí)構(gòu)建頁面。最終結(jié)果是相同的，用戶永遠(yuǎn)不會(huì)知道其中的區(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)建更複雜的交互性。流行的靜態(tài)網(wǎng)站生成器包括 Jekyll、Eleventy、Gatsby、Hugo 和 Metalsmith。大多數(shù)語言都提供 SSG（請參閱 StaticGen 獲取更多信息）。諸如 Next.js 之類的框架會(huì)在可能的情況下靜態(tài)呈現(xiàn)頁面，但也允許開發(fā)人員在必要時(shí)運(yùn)行服務(wù)器端代碼。讓我們來研究一下使用 SSG 的好處……

1. 靈活性

CMS 通常會(huì)限制您的選項(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)行，不會(huì)部署到生產(chǎn)服務(wù)器。 SSG 生成客戶端 HTML 文件和相關(guān)資源，這些資源可以託管在任何 Web 服務(wù)器上。無需安裝、管理或維護(hù)其他任何內(nèi)容。

4. 提高可靠性

CMS 很複雜，有很多活動(dòng)部件和故障點(diǎn)。運(yùn)行 WordPress 站點(diǎn)一段時(shí)間後，您幾乎肯定會(huì)遇到可怕的“無法建立數(shù)據(jù)庫連接”錯(cuò)誤。意外的 CMS 問題可能源於突然的流量激增，這會(huì)使服務(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ā)送垃圾郵件?？赡軄K不明顯有人獲得了訪問權(quán)限；最糟糕的罪魁禍?zhǔn)紫胍３蛛[藏。靜態(tài)站點(diǎn)可能幾乎不需要服務(wù)器端功能。一些風(fēng)險(xiǎn)仍然存在，但它們很少像以前那樣成問題：- 某人可以通過 SSH 或 FTP 訪問服務(wù)器並篡改頁面或上傳文件。但是，通?？梢暂p鬆檢查更改（可能使用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)生不利影響。有些人會(huì)錯(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í)行此操作，您仍然可能會(huì)丟失一些數(shù)據(jù)。靜態(tài)站點(diǎn)通常更安全。內(nèi)容可以存儲(chǔ)在：- 平面文件：然後可以使用 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)容推送到存儲(chǔ)庫、審查和批準(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í)間可能會(huì)增加。這是因?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 知識(shí)。某些生成器還需要了解特定編程語言，例如 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)文章！