如何從WordPress遷移到靜態站點生成器

本文將指導您如何利用強大的工具，將WordPress網站輕鬆轉換為靜態網站。我們將重點介紹從WordPress遷移到靜態網站生成器的過程，並探討一些替代方案，包括使用無頭CMS。為什麼要進行這種遷移？因為您可以大幅提升網站速度，從而改善搜索引擎排名，降低（甚至消除）託管費用，並顯著增強安全性。

關鍵要點：

• 從WordPress遷移到靜態網站生成器可以顯著提高網站速度、安全性以及SEO性能，同時降低託管成本和維護工作量。
• 靜態網站生成器（如Gatsby.js）可以將您的動態WordPress網站轉換為靜態網站，從而帶來諸多優勢，例如降低頁面加載速度、簡化管理以及提升安全性。
• WordPress遷移過程包括設置靜態網站生成器、將WordPress文章/頁面導出為Markdown以及生成靜態資源。掌握React和GraphQL知識將有助於自定義和數據查詢。
• 靜態網站更安全，因為它們沒有可被黑客攻擊的數據庫，WordPress管理面板中的任何潛在安全威脅都不會影響已部署的靜態頁面。
• 無頭CMS可用於生成靜態文件並將其同步到您的存儲庫，從而實現流程自動化。 WordPress可以用作靜態網站的無頭CMS，但也可以考慮其他現代內容管理方法。

靜態網站的優勢：

顯著的速度提升並非唯一優勢，將動態WordPress (WP)網站轉換為靜態網站還能帶來以下好處：

• 降低頁面加載速度：頁面無需在運行時（用戶請求時）進行預處理，內容無需從數據庫中提取。因此，Web服務器的響應速度將大大加快（快10倍甚至更多）。
• 通過CDN降低延遲：您可以將這些靜態頁面直接部署到分佈式內容交付網絡 (CDN) 上，從而大幅縮短全球各地的響應時間。
• 簡化管理：一旦您設置好工作流程（我們將在本文中介紹），您就會發現實際上無需再花費額外精力進行維護、WP升級或服務器更新。
• 大幅增強安全性：開箱即用的HTTPS，只有靜態頁面，不會運行在任何有問題的PHP版本或過時的WordPress上，甚至可能不會運行在Apache上。
• 提升SEO：Google不僅重視您的內容，還重視訪問內容的便捷性和安全性。這實際上是如今仍然有效的少數搜索引擎優化方法之一：更快、更安全的網站在搜索引擎結果頁面上的表現會更好。
• 安心無憂：無需升級PHP，無需擔心WP未修補的安全漏洞，甚至無需管理Linux服務器。部署完成後，您可以輕鬆自如地享受您的咖啡/啤酒/茶/人參茶。

“WordPress安全嗎？”答案很複雜……

WordPress開發人員遵循良好的標準和安全實踐，儘管長期支持 (LTS) 仍然非常缺乏。但是，由於其架構本身的原因，有些事情是WP安全團隊無法控制的，而直接由您負責：

• 更新您的服務器
• 安裝WP更新
• 安裝PHP更新
• 安裝插件和主題的更新（如果可用）
• 定期管理WP和PHP（兩者都沒有LTS）的主要升級

所有這些都是一個持續的過程，插件並非微不足道的威脅，特別是未維護的插件。這些插件通常存在安全漏洞，攻擊者可利用這些漏洞控制WordPress安裝。這正是Automattic花費數年時間才在WordPress.com（WordPress的商業託管版本）上支持某些插件的原因。通過相當數量的有意識努力，WordPress可以安全。雖然您可以爭辯說，這些是任何優秀的開發人員都應該付出的努力，但也可以肯定的是，您可以通過將WP網站轉換為靜態網站來減輕這些負擔，同時重新定義其架構並永久消除幾乎所有可能變成安全威脅的潛在點。畢竟，攻擊者對普通的HTML、CSS文件和平面圖像能做的不多。但是，您仍然需要注意跨站點腳本和跨站點請求偽造。 ?‍♂️

準備工作：靜態網站生成器登場

來源：Netlify

我們在“100個Jamstack工具、API和服務助力您的網站”一文中簡要回顧了靜態網站生成器(SSG)，並且還有大量未在此處介紹的SSG，因此請務必查看StaticGen以了解更多信息。某些SSG專門針對WordPress，例如WP2Static，但我們將重點介紹一個更通用的SSG，即Gatsby.js——“基於React的免費開源框架，可幫助開發人員構建超高速的網站和應用程序”。

WordPress遷移

我必須承認，儘管我希望這個過程非常簡單，但有一些事情可能會使它變得更加繁瑣和耗時，例如您可能已安裝的現有插件（插件越少越好）以及您格式化文章的方式（越簡單越好）。將此視為可能需要根據您的具體情況進行調整的指南。本質上，我們將執行以下操作：

1. 設置Gatsby.js
2. 將WP文章/頁面導出為Markdown
3. 生成靜態資源

步驟1：Fork Gatsby啟動器

我們將首先fork Gatsby高級啟動器或Gatsby Material啟動器，這兩個啟動器都是針對Gatsby.js項目的經過調整的通用入門程序，第二個啟動器使用“有主見的”Material Design模板（演示）。

這些啟動器可以直接為您提供一個功能齊全的React驅動的漸進式Web應用程序 (PWA)，所有功能都已包含：

• 超快的加載時間（預渲染HTML，JS自動塊加載）
• Markdown文章（代碼語法高亮顯示，嵌入YouTube視頻，嵌入推文）
• 分頁、標籤、類別
• Disqus支持
• NetlifyCMS支持
• SEO功能（Google Analytics支持，站點地圖和robots.txt生成，元標籤，用於Google Rich Snippets的Schema.org JSON-LD，用於Facebook/Google /Pinterest的OpenGraph標籤，用於Twitter Cards的Twitter標籤）
• 同步Feed (RSS)
• 社交功能（Twitter、LinkedIn和Telegram分享按鈕；Facebook和Reddit分享/分享計數）
• 開發工具（ESLint、Prettier、Remark-Lint，對GitHub Pages和Netlify的部署支持，CodeClimate配置文件和徽章）
• 等等！

據稱，在成功遷移並部署到CDN後，您的網站性能應該如此出色，以至於使用Google Lighthouse進行審核應報告最佳結果：

安裝和配置

您首先需要安裝Gatsby.js和Node.js，以便您可以使用gatsby CLI和Node.js包管理器npm。對於Node.js，只需下載並安裝即可，對於Gatsby.js，請參閱快速入門或設置您的開發環境。一旦您解決了這個問題，這就是您啟動項目的方式（記住您也可以克隆gatsby-material-starter）：

<code class="language-bash">gatsby new YourProjectName https://github.com/Vagr9K/gatsby-advanced-starter
npm run develop # 或 gatsby develop</code>

高級（示例）和Material（示例）啟動器的配置幾乎相同。

如前所述，開箱即用地支持Netlify CMS，您可以通過編輯static/admin/config.yml來啟用它，如下所示：

<code class="language-yaml">backend:
  name: github
  branch: master
  repo: your-user/your-repo</code>

您還可以將Netlify CMS與GitLab或Bitbucket集成（請參閱後端配置）。

步驟2：導出WordPress文章

在某些情況下，您可以簡單地使用ExitWP將包含所有文章和頁面的已導出XML文件轉換為Markdown文件。但是，根據您的WP設置和調整，此過程可能需要一些技巧；但仍然可行且值得去做。 Tania Rascia在她的文章《一個時代的終結：從WordPress遷移到Gatsby》中很好地概述了她如何處理此過程的一部分。

步驟3：構建頁面

鑑於Gatsby.js是一個React應用程序，成為React開發人員或至少是一位經驗豐富的JavaScript程序員將對您進行Gatsby的緊密自定義大有幫助。了解一些GraphQL在進行查詢和挖掘數據時也將非常方便，尤其是在這些頁面不再由MySQL數據庫提供服務的情況下。幸運的是，Gatsby.js的文檔非常完善。以下是一些有用的資源：

• 通過數據以編程方式創建頁面
• 創建和修改頁面
• 通過數據以編程方式創建頁面

現在您已經完成了頁面生成，您可以安全地將資源（靜態頁面和圖像）幾乎放置在任何地方！查看我們“100個Jamstack工具、API和服務助力您的網站”列表的託管部分以獲取一些想法，並查看我們關於使用自動化管道免費託管靜態網站的文章。

安全性，一次到位！

即使您的WordPress管理員在互聯網上（.htpasswd文件可以為您做很多事情），即使它未修補，即使您的WP備份被篡改，這些都不會影響您已部署的靜態頁面，因為前端已與之“分離”。不要誤解我的意思，即使您在防火牆後面的本地局域網 (LAN) 上運行WordPress，您也應該定期更新它。由於主要且突然的PHP或WP升級，我看到我的網站被篡改或停止工作的次數超過我願意承認的次數。但是，如果您的網站是靜態的，這些安全問題就不復存在了！

失去我的頭：無頭CMS

如果您已經完成了這一步，您可能不再需要使用WordPress了。雖然您可以保留管理員來生成新的文章和頁面，但另一種工作流程是使用另一個無頭CMS為您生成靜態文件並將其同步到您的存儲庫，所有這些都在一步內自動完成。這就是“無頭CMS”——一個內容管理系統，它仍然作為後端實例在某個地方運行，但完全與實際的實時網站分離。 WordPress是靜態網站的常見無頭CMS選擇，實際上可能是大規模SSG部署中最常見的選擇。雖然遷移方法可以涵蓋許多情況，但您可能擁有過多的遺留內容或過多的內容流程內置於WordPress中，因此全面遷移可能無法立即實現。對於大型內容運營和數字媒體企業來說尤其如此。但是，如果您需要管理的歷史較少，那麼最好看看更現代的內容管理方法——遠離動態服務網站的遷移是進行此類更改的好時機。我們已經實現的遷移支持Netlify CMS，儘管我們不會在此處介紹如何使用無頭CMS。這是一個我們將在不久的將來用另一篇文章介紹的主題。

深入挖掘

在這樣的文章中，我們只能介紹這麼多內容，因此以下是一些關於使用SSG遷移WP的額外資源。

Gatsby.js

官方文檔中心和博客非常全面且寫得很好。以下是一些與WP相關的文章：

• 開始使用Gatsby和WordPress
• 從WordPress遷移到Gatsby.js和Jamstack
• 如何使用WordPress和Gatsby.js構建博客：第1部分、第2部分和第3部分

Hugo

Hugo基於Go編程語言，是另一個大型SSG名稱，提供了大量可用的模板，並且是您可能考慮用於Gatsby.js的可靠選擇。有一些工具可以將WordPress遷移到Hugo。如果您查看這些指南，您會發現雖然靈活性較低，但該過程應該比Gatsby.js簡單得多：

• Chris Ferdinandi撰寫的《從WordPress遷移到Hugo》
• Mattias Geniar撰寫的《從WordPress遷移到Hugo的分步指南》
• Christopher Kirk-Nielsen撰寫的《從WordPress切換到Hugo》

Jekyll

如果您設法設置了Ruby環境，Jekyll（可以將您的純文本轉換為靜態網站和博客的SSG）甚至更易於使用，儘管它只會生成靜態頁面，而不是像Gatsby.js這樣的Web應用程序。與Gatsby一樣，您可以使用基於Python的ExitWP從WP生成Markdown。您還可以使用基於Windows的可執行文件wpXml2Jekyll從WP XML導出生成Jekyll就緒的Markdown文件。一些有用的文章：

• Sam Atkinson撰寫的《將博客從WordPress遷移到Jekyll》
• Florian Courgey撰寫的《從WordPress遷移到Jekyll：第1部分和第2部分》
• Mike Neumegen撰寫的《面向WordPress開發人員的Jekyll》

軟件即服務 (SaaS) 解決方案

Gatsby Cloud免費或付費提供對構建和維護Gatsby.js網站的支持，您可以輕鬆地自動化快速構建、訪問預覽、生成每日編輯以及輕鬆部署到Netlify、Cloudflare、AWS CloudFront或Akamai。 HardyPress還會生成靜態WordPress網站，並且付費後，您將擁有一個管理面板，您可以從中輸入憑據以訪問您的在線WP安裝以當場管理所有內容：關閉已導入的實時WP安裝，透明地部署到全球CDN、HTTPS、表單和搜索。其他具有商業支持的與WP相關的SSG包括Shifter、Strattic和Sitesauce。

結論和思考：王者已死？

對我來說，安心無憂非常重要，這也是我多年前停止開發WordPress網站的主要原因之一。我討厭的是，錯誤可能會在任何給定時間出現（零日或其他），並且如果未及時修補，它會危及我的工作。相信我，由於主要且突然的PHP或WP升級，我看到我的網站被篡改或停止工作的次數超過我願意承認的次數。但是，如果您的網站是靜態的，這些安全問題就不復存在了！

在我看來，WordPress在2012年就已經達到了“石油峰值”的情況（請參閱Google趨勢：WordPress 2004-至今）。如果它不非常快速地適應，它只會繼續失去市場份額，而有利於能夠以更好集成的流程完成更快、更安全工作的技術。 WP的創建者兼Automattic首席執行官Matt Mullenweg也承認了這一點，因為他開始鼓勵開發人員“深入學習JavaScript”，並通過引入Calypso大膽地放棄了WP的PHP後端，轉而使用JavaScript（請閱讀他對該過程的反思）。這給社區帶來了衝擊波（甚至恐慌），謠傳WordPress將完全放棄PHP。 Gutenberg只不過是朝著這個方向邁出的又一步。如果它設法重塑自我，那麼國王最終可能會保留其王冠。如果不是，嘿，為近三分之一的互聯網提供動力並非易事——國王萬歲！ ?

閱讀有關SitePoint如何在2020年將其前端遷移到由WordPress無頭CMS支持的Gatsby的文章。

Jamstack基礎知識

了解Jamstack。我們的Jamstack基礎知識集合可幫助您邁出Jamstack的第一步，並且我們正在不斷地向其中添加內容。我們將為您提供成為專業人士所需的教程。您始終可以參考我們的索引，因為它會在我們的Jamstack簡介結尾處更新：➤

關於將WordPress遷移到靜態網站生成器的常見問題解答 (FAQ)

將WordPress遷移到靜態網站生成器有哪些好處？

將WordPress遷移到靜態網站生成器具有多種好處。首先，靜態網站通常比WordPress網站更快，因為它們不需要處理PHP或從數據庫中提取數據。這可以顯著提高網站的加載速度，這對SEO和用戶體驗至關重要。其次，靜態網站更安全，因為它們沒有可被黑客攻擊的數據庫。最後，靜態網站的託管成本更低，維護也更容易，因此非常適合小型企業和個人博客。

如何確保從WordPress到靜態網站生成器的順利遷移？

為了確保順利遷移，提前做好計劃至關重要。首先備份您的WordPress網站，以便在出現任何問題時可以進行回退。然後，選擇適合您需求的靜態網站生成器。一些流行的選擇包括Jekyll、Hugo和Gatsby。選擇生成器後，您可以使用Simply Static或WP2Static等插件導出WordPress內容。導出後，您需要設置新的靜態網站並導入您的內容。最後，徹底測試您的新網站，以確保一切正常運行。

遷移到靜態網站生成器時，我可以保留我的WordPress主題嗎？

不幸的是，您無法直接在靜態網站生成器中使用您的WordPress主題。但是，您可以使用靜態網站生成器的模板系統重新創建您的主題。這需要一些HTML、CSS和可能JavaScript的知識。或者，您可以選擇一個與您的WordPress主題非常相似的預製主題。

遷移到靜態網站生成器時，我的WordPress插件會發生什麼情況？

遷移到靜態網站生成器時，您將失去WordPress插件提供的功能。但是，許多靜態網站生成器都有自己的插件或擴展程序，可以提供類似的功能。您需要在遷移後手動研究和安裝這些插件。

我仍然可以在靜態網站生成器中使用內容管理系統 (CMS) 嗎？

是的，您仍然可以在靜態網站生成器中使用CMS。一些流行的選擇包括Netlify CMS、Forestry和Contentful。這些CMS允許您在一個用戶友好的界面中管理您的內容，類似於WordPress。但是，它們會生成靜態文件，這些文件可以由您的靜態網站生成器提供服務。

如何在靜態網站上處理表單？

在靜態網站上處理表單可能有點棘手，因為靜態網站沒有後端來處理表單提交。但是，您可以使用Formspree或Netlify Forms等第三方服務來處理表單提交。這些服務提供一個URL，您可以將其用作表單中的action屬性，它們將處理表單提交並將數據發送給您。

如何在靜態網站上處理評論？

與表單一樣，評論在靜態網站上也可能是一個挑戰，因為它們沒有後端來存儲和檢索評論。但是，您可以使用Disqus或Commento等第三方服務來處理評論。這些服務提供一個JavaScript代碼段，您可以將其添加到您的網站中，它們將處理評論功能。

我可以在不丟失SEO的情況下將WordPress網站遷移到靜態網站生成器嗎？

是的，您可以在不丟失SEO的情況下將WordPress網站遷移到靜態網站生成器。關鍵是確保您的新靜態網站保持與WordPress網站相同的URL結構。這樣，搜索引擎仍然可以識別您的頁面並保持其排名。此外，靜態網站通常比WordPress網站更快，這實際上可以提高您的SEO。

我可以在發布靜態網站之前預覽它嗎？

是的，大多數靜態網站生成器都有一個內置的開發服務器，允許您在發佈網站之前預覽它。這是一種在網站上線之前測試網站並確保一切正常運行的好方法。

發布靜態網站後，如何更新它？

更新靜態網站與更新WordPress網站略有不同。您無需登錄後端進行更改，而是需要更新網站的源文件，然後重建網站。可以使用Netlify或Vercel等持續集成/持續部署 (CI/CD) 服務來自動化此過程。

以上是如何從WordPress遷移到靜態站點生成器的詳細內容。更多資訊請關注PHP中文網其他相關文章！