教程：使用 WordPress 和 Gatsby 構建您的網站

已發表: 2023-02-12

使用 headless WordPress 可以使用 WordPress 創建靜態網站。 這些類型的網站加載速度更快，因為靜態文件保存在您的服務器上。 問題是，如何使用 WordPress 構建無頭網站？

這就是像 Gatsby 這樣的靜態網站生成器的用武之地。這些生成器可以幫助您在 WordPress 中構建功能豐富的靜態網站。 但是，您需要將它們與您的 WordPress 安裝正確集成，以充分利用它們。 此集成包括安裝、生成和配置 WordPress Gatsby。

在本文中，我們將了解什麼是 Gatsby 以及為什麼您可能希望將它與 WordPress 一起使用。 然後我們將詳細說明如何使用 Gatsby 以及您是否應該使用。 讓我們開始吧！

目錄
1.什麼是蓋茨比？
2.為什麼要在 WordPress 中使用 Gatsby？
2.1. 使用蓋茨比的優點
2.2. 使用蓋茨比的缺點
3.如何在 WordPress 中使用 Gatsby？
3.1. 第 1 步：檢查先決條件
3.2. 第二步：安裝蓋茨比
3.3. 第 3 步：創建 Gatsby 站點
3.4. 第 4 步：將 Gatsby 連接到 WordPress
3.5. 第 5 步：配置 Gatsby
3.6. 第 6 步：構建頁面模板
4.我應該為 WordPress 使用 Gatsby 嗎？
5.在 WP Engine 上充分利用您的網站

什麼是蓋茨比？

簡單來說，Gatsby 是一個靜態站點生成器。 這意味著 Gatsby 生成上傳到您網站服務器的靜態 HTML 文件。 當訪問者登陸您的網站時，這些靜態文件將提供給他們的瀏覽器，而不是 WordPress 通常提供的動態內容。

為了生成這些文件，Gatsby 從一系列來源獲取您網站的數據。 這包括現有網站、API 調用和通過 GraphQL 的平面文件。 然後根據您設置的配置構建您的靜態網站。

與其他靜態站點生成器相比，Gatsby 相對較新。 然而，這並沒有阻止許多公司嘗試它。 最大的例子之一是由 Gatsby 提供支持的 Airbnb 工程與數據科學博客。

為什麼在 WordPress 中使用 Gatsby？

由於可以使用 WordPress 創建靜態網站，您可能想知道為什麼要同時使用 WordPress 和 Gatsby。 雖然 WordPress 本身很強大，但 Gatsby 為您的網站提供了一些您可能想要的好處，包括更快的速度和更低的服務器成本。 了解 Gatsby 的優點和缺點可以幫助您做出明智的決定。

使用蓋茨比的優點

Gatsby 提供了一系列任何網站都可以利用的好處，包括：

  • 更快的加載速度。 靜態網站加載速度比動態網站快，這會影響您的搜索引擎優化 (SEO)。 頁面加載速度是搜索引擎使用的一個信號，會影響您網站的跳出率。
  • 降低服務器成本。 動態網站需要兼容的技術堆棧和服務器。 靜態網站則不然，您可以將它們託管在任何服務器上。 這可以降低您的服務器成本。
  • 提高了安全性。 靜態網站提供更高的安全性。 所提供的靜態 HTML 文件並沒有為黑客提供太多可利用的東西。 如果這些文件因任何原因丟失，您也可以使用 Gatsby 重新生成它們。

您的網站可以從所有這些優勢中受益。 但是，您應該權衡它們與使用 Gatsby 的缺點。

使用蓋茨比的缺點

沒有軟件系統是完美的，Gatsby 確實有一些您需要了解的缺點：

  • 需要的技術知識。 Gatsby 建立在 ReactJS 之上並使用 GraphQL。 要使用它，需要對 JavaScript 有所了解。 您還需要具備 GraphQL 的基本知識才能構建網站。
  • 沒有動態內容。 Gatsby 只生成靜態網站。 如果您想要聯繫表單等動態內容，則需要通過第三方提供商進行重定向。

雖然許多開發人員發現 Gatsby 的利大於弊，但提前了解兩者都很重要。

我如何在 WordPress 中使用 Gatsby？

設置 Gatsby 可能需要一些時間，並且您需要執行某些步驟。 您需要先安裝 Gatsby，然後才能開始生成您的站點並對其進行配置。 此外，還有一些初步的考慮需要考慮。

第 1 步：檢查先決條件

在安裝 Gatsby 之前，您需要在您的網站環境中安裝 NodeJS 和 npm。 代碼管理也需要 Git。 安裝先決條件的步驟因您運行的操作系統而異。

如果你有 Windows，你可以通過下載頁面上的安裝程序安裝 NodeJS 和 Git。 Mac 也是如此。 但是，如果您運行 Linux，則需要一個軟件包安裝程序，例如 apt。

第二步：安裝蓋茨比

安裝好NodeJS和Git之後，就可以開始安裝Gatsby了。 最簡單的方法是在您的軟件終端中使用以下命令：

 npm install -g gatsby-cli

此命令自動運行安裝程序。 在安裝 Gatsby 之前，它將首先下載並安裝所有依賴項。 一旦完成，您就可以開始創建您的第一個 Gatsby 網站。

第 3 步：創建 Gatsby 站點

要創建您的 Gatsby 網站，您需要運行以下命令：

 gatsby new gatsby-site

此命令克隆 Gatsby 入門模板，並將其放在目錄/gatsby-wordpress中。 克隆和安裝完成後，您可以打開站點的開發版本。 這是使用以下命令完成的：

 gatsby develop

當開發環境正在運行時，您可以在本地訪問您的新網站。 在您的 Web 瀏覽器中，輸入http://localhost:8000 ，您的默認模板應該會打開。

如果您看到此頁面，則可以開始構建您的網站。 這意味著在這些網站的公共目錄中創建靜態文件。 以下命令會自動開始生成 tohse 靜態文件：

 gatsby build

此命令還會為您的網站生成預路由 JavaScript 代碼包。 然後您可以使用 serve 命令在本地顯示您的新網站：

 gatsby serve

此命令僅在您已經運行構建命令時才有效。

第 4 步：將 Gatsby 連接到 WordPress

您現在有一個基本的靜態網站，但您需要將它與 WordPress 集成。 這會將您的 Gatsby 站點指向您的 WordPress 博客的地址，使其能夠在您運行開發服務器時提取最新數據。 連接後，Gatsby 將基於您當前的 WordPress 模板構建一個靜態網站。

要連接兩者，您需要為 WordPress 安裝 Gatsby 插件。 以下命令將解決這個問題：

 npm install gatsby-source-wordpress

安裝插件後，就可以開始配置 Gatsby 了。

第 5 步：配置 Gatsby

要配置 Gatsby，您需要使用gatsby-config.js文件。 在該文件中，添加以下代碼：

 module.exports = { ... plugins: [ ..., { resolve: `gatsby-source-wordpress`, options: { // your WordPress source baseUrl: `wpexample.com`, protocol: `https`, // is it hosted on wordpress.com, or self-hosted? hostingWPCOM: false, // does your site use the Advanced Custom Fields Plugin? useACF: false } }, ] }

更新此代碼以指向您的 WordPress 網站。 如果您的網站是本地託管的，在 baseUrl 之後您可以使用localhost:8888/wordpress代替您網站的 URL。 保存文件後，您需要構建頁面模板。

第 6 步：構建頁面模板

構建頁面模板使 Gatsby 能夠為您的 WordPress 網站上的每個頁面生成一個帖子。 源插件將從 WordPress 中提取這些頁面所需的數據，但您必須創建設計模板。

在您的gatsby-node.js文件中，添加以下代碼：

 const path = require(`path`) const { slash } = require(`gatsby-core-utils`) exports.createPages = async ({ graphql, actions }) => { const { createPage } = actions // query content for WordPress posts const result = await graphql(` query { allWordpressPost { edges { node { id slug } } } } `) const postTemplate = path.resolve(`./src/templates/post.js`) result.data.allWordpressPost.edges.forEach(edge => { createPage({ // will be the url for the page path: edge.node.slug, // specify the component template of your choice component: slash(postTemplate), // In the ^template's GraphQL query, 'id' will be available // as a GraphQL variable to query for this posts's data. context: { id: edge.node.id, }, }) }) }

從 WordPress 調用所有數據後，Gatsby 將為每個帖子生成一個頁面。 使用 develop 命令，您可以使用生成的 URL 導航到每個新頁面。

我應該為 WordPress 使用 Gatsby 嗎？

雖然 Gatsby 可以提高網站的速度和安全性，但它並不是每個人的正確選擇。 如果您的網站包含不經常更改的靜態內容，Gatsby 可能會有所幫助。 但是，如果您的網站需要動態內容，傳統的 WordPress 可能是更好的選擇。

在 WP Engine 上充分利用您的網站

Gatsby 是一個有效的靜態網站生成器，您可以輕鬆地與 WordPress 集成。 您需要遵循一些步驟來安裝和配置系統。 在開始之前，您還需要了解一些 Gatsby 和 GraphQL 知識。

靜態內容可以提高網站的速度和安全性，但您還需要合適的主機。 WP Engine 為您的網站提供最好的資源，以創造出色的數字體驗。 這讓您有更多時間專注於開發！