使用 Hexo 和 WordPress 的靜態站點生成器指南

已發表: 2022-03-11

靜態站點生成器是將模板編譯成靜態 HTML 頁面的系統。 如果這聽起來很有效——是的，確實如此。 沒有服務器處理或渲染，因此靜態網站往往非常快速和輕量級，為您和您的用戶節省寶貴的時間和帶寬。 這種效率的提高體現在成本的降低和潛在的收入增加上。

從優化 WordPress 到靜態化

說到高效的收入來源，我想到了 WordPress。 它為 28% 的互聯網提供動力，是一個強大的平台，具有許多強大的功能，包括由一系列插件、主題、API 等支持的廣泛的用戶和內容管理。

即使是我們行業的大玩家也使用 WordPress。 像Smashing Magazine和CSS-Tricks這樣的網站使用 WordPress，儘管在這兩種情況下都使用了顯著的自定義實例。 但是，使用 WordPress 可能是一項乏味的任務，尤其是在自定義和優化性能時。

我在 2015 年創辦了一個小型博客。我的第一直覺是使用 WordPress。 它給了我一個快速啟動，因為我已經在使用 WordPress。 我在 DigitalOcean 上創建了一個新的 droplet 作為服務器，將 Vesta 設置為託管控制面板，並將 WordPress 安裝為博客平台。 最終，我設計並開發了一個全新的 WordPress 主題。 唯一缺少的是內容。

我知道我想分享一些關於 Atom 的技巧，因為當時我正在使用這個很棒的編輯器。 我發表了一些關於它的文章並與社區分享。

起初，我並沒有太關注性能，因為我太專注於內容。 過了一會兒，我注意到了一些性能問題。 Google PageSpeed Insights 的分數很差，所以我努力修復和優化我的網站，獲得了幾乎完美的 99/100 分：

  • 我從 Nginx+Apache 切換到 Nginx+PHP-FPM。

  • 我使用 CloudFlare 來提高速度和保護。

  • 我使用 Cloudinary 來託管圖像。

  • 我調整了我的主題並使用了關鍵 CSS。

唯一的警告是針對 Google Analytics 緩存問題，我當時不知道如何解決。

但是，如果 99/100 或 100/100 仍然無法獲得您想要的性能怎麼辦？ 這就是靜態頁面生成器參與競爭的地方。

進入靜態頁面生成器和 Hexo

那麼什麼是靜態站點生成器？

顧名思義，靜態網站生成器是一個生成靜態 HTML 文件的系統。 提供靜態 HTML 文件比動態創建頁面要快得多。 沒有服務器渲染或編譯，這通常會導致頁面加載延遲。

在談論性能時，必須考慮緩存。 儘管緩存 WordPress 有多種技術，但與緩存靜態文件不同，這通常不是一項簡單的任務。 提供緩存文件比從服務器提供實際文件性能更高，並且可以在加載網站時節省時間。

今年 6 月，Smashing Magazine 的 Vitaly Friedman 在我所在城市的一個研討會上介紹了 JAMstack。 我從來沒有聽說過它，我很感興趣。 研討會結束後，我研究了一下這個新概念，我意識到它是多麼的棒。 我意識到我的網站不需要 WordPress。

第一步是決定使用哪個靜態頁面生成器。 我不知道有多少。 我決定嘗試一下 Hexo 博客框架。 它可以部署到 Netlify，有一個從 WordPress 遷移的插件，並且使用我熟悉的 Node.js，這與分別基於 Ruby 和 Go 的 Jekyll 和 Hugo 不同。 而且，正如我後來發現的那樣，它的速度非常快。

將 WordPress 博客遷移到 Hexo 博客以獲得更好性能的抽像圖

將 WordPress 遷移到 Hexo

Hexo 安裝非常簡單。 使用 npm 全局安裝hexo-cli ，運行hexo init命令，安裝 npm 依賴項，然後瞧：

 npm i -g hexo-cli hexo init <blog-name> cd <blog-name> npm install

要進行遷移，請安裝 hexo-migrator-wordpress 插件。 此插件需要 XML 文件作為源。 XML 文件可以通過 WordPress 導出工具導出，該工具可以在管理面板的Tools -> Export -> Wordpress下找到。 最後，輸入hexo migrate命令完成導入。

 hexo migrate wordpress <source>

剩下要做的就是檢查結果。 運行hexo server命令啟動服務器並在給定地址打開瀏覽器。

 hexo server

Markdown 及其局限性

Hexo 開箱即用地支持 Markdown。 Markdown 是一種標記語言，許多人使用它來格式化 README 文件、評論和帖子。 但它也可以用來寫你的文章。 它的語法直觀且易於學習。

Markdown 的另一個優點是它可以生成乾淨且有效的 HTML。 這允許開發人員創建乾淨且可維護的 CSS 規則來設置博客文章和頁面的樣式。

開發人員的生活絕非易事。 我們經常遇到可能導致我們花時間在意想不到的事情上的問題。 如果我們在此過程中學到了一些東西，那麼我們就不會浪費這個時間，這是一件好事。 同樣的事情發生在我身上。 我以為一切都很順利，因為沒有編譯錯誤，但後來我注意到有些事情沒有按預期工作。

例如，Codepen 演示沒有加載。 我搜索了一個 Hexo 插件，找到了一個。 不幸的是，這個插件不是官方的，它會產生不可接受的 HTML 錯誤。 我想貢獻並解決問題，但最新的拉取請求已經有一年半多沒有解決了。 我決定更容易分叉存儲庫，解決問題，並在 Hexo 頁面上發布插件，以便任何人都可以使用它。 該插件被接受，我更新了內容，Codepen 演示就像一個魅力。

CanIUse 嵌入也出現了類似的問題。 既然我知道如何創建一個 Hexo 插件，就沒有理由不這樣做了。 我的 hexo-caniuse 插件也發布了，我的 hexo-cloudinary 插件也發布了，用於從 Cloudinary CDN 加載的響應式圖像。

重新設計和優化

網站的設計是相當基礎的。 Hexo 在官方網站上免費提供了一些主題，但我想為我的 Hexo 網站提供一個獨特的主題。 在閱讀了文檔並學習瞭如何自定義 Hexo 之後，我開始從頭開始開發一個原創主題。

為了創建新模板，我決定使用 EJS 進行模板化。 由於從未使用過 EJS，我將其視為學習新模板語法的機會。 如果你不喜歡 EJS，Hexo 通過插件為你提供 Swig、Haml 或 pug 支持。

在重新設計過程中，我密切關注性能。 通過遵循最佳實踐，我們可以進一步加快我們的靜態網站。 將 JavaScript 文件放在文檔底部並使用關鍵 CSS 技術為您的受眾創造最佳體驗。

SEO 優化對於谷歌等搜索引擎上的博客可見性至關重要。 Hexo 有一個用於插入 Open Graph 數據的內置助手。 Hexo 使用 YAML 文件來存儲站點和主題配置。 我使用主題配置文件來配置站點名稱、描述和各種社交 ID。

將 Gulp 或 Webpack 添加到您的構建過程中總是很有幫助和推薦的。 我使用 Gulp 壓縮和壓縮 CSS 和 JavaScript 文件，一切就緒。 我可以部署它。

網絡化

Netlify 是一個為網站和應用程序提供託管的平台，具有極快的性能。 它將自己推銷為一個統一的平台，可以自動化代碼以創建高性能且易於維護的網站。

只需推送您的代碼，剩下的交給我們。

如您所料，配置網站很簡單：

  1. 設置域。

  2. 更改 DNS 記錄。

  3. 設置構建和部署。

  4. 打開 SSL。

一切準備就緒後，我運行了一些基本測試來查看分數，包括 Pingdom 網站速度測試、網頁測試和 Testmysite.io。 結果非常好，因為該網站在每個工具上都獲得了最高分。

CloudFlare

儘管分數很高，我還是想試試 CloudFlare，看看它還能在多大程度上加快網站速度。 CloudFlare 一開始可能會讓人不知所措，但學習如何使用它是基礎。 配置 CloudFlare 後，我重新運行了測試，結果甚至更好。

最後的測試是 Google PageSpeed Insights。 移動版和桌面版的得分幾乎為 100%。 問題是谷歌分析瀏覽器緩存。 我設法通過使用 CloudFlare App for Google Analytics 解決了這個問題。

它要多少錢？

在帶有 CloudFlare 的 Netlify 上使用 Hexo 無需任何費用。

Hexo 是一個開源平台，因此無論您決定如何使用它都是免費的。 它擁有一個龐大的社區，並且是根據 StaticGen 排名第三的最流行的開源靜態頁面生成器。

Netlify 有一個開放的計劃，它為我們的託管提供了很好的選擇。 圖像也託管在 Cloudinary 的開放式計劃中。 CloudFlare 的免費計劃允許我們配置大量規則，可以加快您已經快速的網站。 它還允許我們修復 Google Analytics（分析）瀏覽器緩存問題。 我也沒有為域名付費，因為我使用了政府提供的免費個人域名。

這個項目設置將我的預算減少到最低限度。 如果您的項目需要更高級的功能，靜態頁面生成器仍然可以為您節省幾塊錢。

提供緩存文件意味著 CPU 和帶寬的使用會減少，這反過來意味著您可以使用更便宜的託管計劃和不太強大的硬件。 不僅如此，您的網站將更快，這意味著您的用戶將喜歡在移動和桌面設備上瀏覽。 而且，由於頁面加載速度會影響 Google 搜索排名，因此您的網站排名會更高，從而獲得更多訪問者。

所有這一切意味著您可以將部分預算花在其他地方——例如，宣傳您的網站或創建額外的內容，這將有助於獲得更多收入。

靜態站點生成器的案例

從 WordPress 遷移到靜態頁面生成器並非易事，而且絕對不是每個 WordPress 用戶都應該做的事情。 然而，由於它的插件、優秀的文檔和簡單的 API，Hexo 使這種轉變相對輕鬆。

在決定是否要將產品遷移到靜態解決方案之前，您需要了解靜態頁面生成器帶來的限制，例如內容限制、Markdown 學習曲線和版本控制。

您還應該知道 Hexo 是一個博客框架。 它非常適合知道如何使用文本編輯器和終端的開發人員和技術人員。 如果您喜歡使用 Web 界面來管理您的內容，那麼還有一個插件可以提供該功能。 它被稱為 hexo-admin，非常流行。

如果您已經在使用 WordPress，那麼您應該停下來思考一下您現在正在使用 WordPress 的哪些功能，以及哪些功能是必不可少的。 你有復雜的內容結構嗎？ 你在使用用戶管理嗎？ 您是否在 WordPress 實例上使用了很多插件，它們都是必需的嗎？ 您對網站的性能滿意嗎？

如果大多數或所有這些問題的答案是否定的，那麼您已經準備好使用靜態頁面生成器來增強您的網站。 根據用例和您的要求，靜態頁面可以幫助最大限度地提高效率，同時最大限度地降低成本。 另一方面，如果您需要 WordPress 的靈活性，您可能甚至不會考慮採取這樣的舉措。