如何使用Gatsby為WordPress生成靜態網站

典型的動態網站（例如基於 WordPress 的網站）如何工作？當訪問者在瀏覽器上輸入URL或通過連結訪問您的網站時，會向您的Web伺服器傳送請求。

伺服器通過必要的資料庫查詢收集所需的資料，並生成一個HTML檔案供您的瀏覽器顯示。另一方面，靜態站點將這些響應儲存到伺服器上的平面檔案中，這些檔案會立即傳遞給訪問者。

靜態站點生成器已經存在了很長時間，但它們最近變得越來越流行。在本分步指南中，我們將瞭解如何將WordPress與靜態網站生成器Gatsby整合。

1. 什麼是Gatsby？
2. 第1步：設定Gatsby
3. 第2步：如何將Gatsby連線到WordPress
4. 第3步：建立基本頁面模板
5. 第4步：高階遷移任務

什麼是Gatsby？

WordPress建立動態網站，需要在伺服器上安裝一堆PHP、MySQL和Apache或Nginx才能執行。可以通過為您網站上的所有內容生成HTML頁面列表來建立WordPress的靜態版本。

這個靜態版本的WordPress稱為無頭WordPress或無伺服器WordPress。此轉換過程只需執行一次，以便可以多次向訪問者提供同一頁面。您如何將您的WordPress網站轉換為靜態版本？這就是Gatsby出現的地方。

Gatsby或GatsbyJS是一個使用ReactJS構建並由GraphQL提供支援的靜態站點生成器。Gatsby允許任何人建立功能豐富、引人入勝的網站和應用程式。Gatsby通過GraphQL從各種來源（包括現有網站、API呼叫和平面檔案）為您的站點獲取資料，並根據您指定的配置設定構建靜態站點。

Gatsby是一年前才開發出來的，但大量使用者都在嘗試Gatsby。Gatsby在各種環境中都得到了認可。Airbnb的資料科學與工程部落格的主頁由Gatsby提供支援，但實際的部落格文章託管在Medium上。

Airbnb的工程與資料科學部落格

BRAUN（博朗）是消費品公司寶潔的品牌。它的加拿大站點由Gatsby託管，而站點上的搜尋功能由React提供支援。

博朗品牌的加拿大網站

此外，Gatsby還激發了自由職業者開發人員對其作品集的興趣。諸如Jacob Castro的作品集主要包含靜態內容，其中包含作品連結和電子郵件聯絡方式，因此靜態網站非常適合他的需求。

Jacob D. Castro的作品展示站

為什麼選擇Gatsby？

快速網站： 使用Gatsby構建靜態網站的主要好處是速度，自從Google宣佈在網路搜尋排名中使用網站速度以來，網站管理員一直在努力優化速度。載入時間也會影響頁面瀏覽量和轉化率。據估計，網站載入時間延遲一秒會導致轉化次數減少7%。

安全性： 您還可以通過靜態站點獲得額外的安全性。由於提供的是一堆靜態檔案，因此沒有什麼可破解的。此外，如果靜態檔案丟失，您始終可以重新生成它們。

伺服器成本：託管動態站點需要您的伺服器與您的技術堆疊相容。如果您使用的是靜態站點，則幾乎可以在任何伺服器上託管它，這也降低了與託管相關的成本。

在每次更改時使用Gatsby生成靜態站點確實需要JavaScript，這也可以在將靜態檔案傳輸到站點之前在本地計算機上完成。

為什麼要避開Gatsby？

沒有內建動態內容： 如果你想使用Gatsby，你需要重新考慮如何控制和提供動態內容，即你需要建立靜態/動態的混合來實現這一點（更多關於這個以下）。

例如，評論需要通過像Disqus這樣的服務在外部託管。

聯絡表格還需要通過Google表格等外部合作伙伴重新傳送。簡而言之，您將失去對此類動態內容的直接控制，因為它們的響應未儲存在您的伺服器上。

頻繁構建不方便： 靜態站點也存在頻繁重新轉換的問題。只有在重新生成頁面並將其重新上傳到伺服器後，您在網站上所做的任何更改才會反映出來。

技術專長：  Gatsby建立在ReactJS和GraphQL之上。因此，需要一些JavaScript知識和GraphQL的基本概念來處理網站並將其移植到Gatsby。

靜態網站非常適合那些正在尋找具有高安全性的低成本解決方案的人。一些用例是自由職業者的投資組合網站和產品演示網站。

如果您認為好處大於缺點，那就太好了！我們現在將嘗試設定Gatsby以與我們的WordPress站點整合。

我們在本教程中構建的Gatsby站點的最新版本在GitHub上可供您使用。

第1步：設定Gatsby

在本節中，我們將瞭解如何安裝Gatsby並使用Gatsby建立一個基本的靜態站點。

先決條件

開始使用Gatsby的第一步是檢查其先決條件。Gatsby通過npm（NodeJS包安裝程式）提供服務。因此，在安裝Gatsby之前，您的環境中需要NodeJS和npm。此外，Gatsby要求您安裝原始碼管理系統Git。

如果您執行的是Windows，您可以通過下載頁面上的安裝程式安裝NodeJS和Git。在Mac上，您可以下載他們的安裝程式或使用自制軟體。

brew install nodejs
brew install git

如果您執行的是Linux作業系統，則可以通過apt之類的包安裝程式安裝NodeJS。

sudo apt update
sudo apt install nodejs git

安裝Gatsby

成功安裝NodeJS和Git後，就可以安裝Gatsby了！最簡單的方法是在終端上執行以下命令（在Windows上使用命令列npm）：

npm install -g gatsby-cli

安裝程式首先安裝依賴項，然後安裝Gatsby。您現在已準備好建立您的第一個Gatsby站點。

構建和部署您的Gatsby站點

執行以下命令以建立Gatsby站點。

gatsby new gatsby-wordpress

Gatsby通過克隆Gatsby入門模板在目錄/gatsby-wordpress中建立一個站點。您可以提供不同的入門模板進行克隆。克隆完成並安裝依賴項後，您可以使用以下命令執行站點的開發版本。

cd gatsby-wordpress
gatsby develop

然後，您可以在http://localhost:8000訪問該站點的開發版本。

Gatsby入門網站

最後一步是構建您的靜態站點。以下命令在公共目錄中建立靜態檔案。要將其上傳到伺服器，您只需將該目錄的內容上傳到伺服器的根目錄即可。您可能希望新增像www.example.com/blog/這樣的路徑字首作為構建的根URL。

gatsby build

要在本地啟動HTML伺服器以顯示您網站的這種靜態形式，您需要使用serve 命令。請注意，它僅在執行build命令後才有效。

gatsby serve

現在您已經從Gatsby成功建立了一個基本的靜態站點，讓我們嘗試將其與WordPress整合。

第2步：如何將Gatsby連線到WordPress

在本節中，您將把您的WordPress網站與Gatsby整合。您可以將Gatsby指向您的WordPress部落格的地址，以使其在您執行開發伺服器或生成靜態頁面時能夠提取最新資料。

將Gatsby連線到WordPress的過程是獲取由構建觸發的WordPress資料。Gatsby獲取WordPress資料後，它會根據當前模板建立靜態站點。

該過程使用WordPress站點，該站點具有Gatsby上的文章的來源。為了方便這種交流，您需要通過以下命令安裝Gatsby的WordPress外掛：

npm install gatsby-source-wordpress

配置Gatsby

接下來，將此外掛新增到Gatsby的配置檔案gatsby-config.js中。

然後，將以下程式碼新增到檔案中以將Gatsby連線到您的WordPress源。在此示例中，我們在MAMP上使用本地託管的WordPress站點。在旁註中，您可能希望在siteMetadata中編輯站點的標題和描述。

module.exports = {
siteMetadata: {
...
},
plugins: [
...
{
resolve: `gatsby-source-wordpress`,
options: {
// Specify the URL of the WordPress source
baseUrl: `localhost:8888/wordpress`,
protocol: `http`,
// Indicates if a site is hosted on WordPress.com
hostingWPCOM: false,
// Specify which URL structures to fetch
includedRoutes: [
'**/posts',
'**/tags',
'**/categories'
]
}
}

使用GraphQL獲取文章

在配置檔案中指定WordPress站點的來源後，您需要指定需要從WordPress站點提取哪些資料。Gatsby使用GraphQL（一種用於API的開源查詢語言）來批量獲取WordPress文章。

在最終確定要選擇的查詢之前，您可以互動地選擇需要從WordPress獲取的內容。執行開發伺服器並轉到URL：http://localhost:8000/___graphql以開啟GraphQL編輯器。

使用GraphQL查詢資料

完成要拉取的內容後，可以將GraphQL查詢新增到檔案index.js。

現在讓我們只從每個文章中提取標題和摘錄。我們可以稍後新增更多欄位。

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
export default ({ data }) => {
return (
<Layout>
<SEO title="home" />
<h4>Posts</h4>
{data.allWordpressPost.edges.map(({ node }) => (
<div>
<p>{node.title}</p>
<div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
</div>
))}
</Layout>
)
}
export const pageQuery = graphql`
query {
allWordpressPost(sort: { fields: [date] }) {
edges {
node {
title
excerpt
}
}
}
}

當您檢查開發站點時，您會注意到所有來自WordPress的文章都已被拉取，並顯示了它們的標題和摘錄：

帶有WordPress文章的Gatsby主頁

雖然這看起來不太漂亮，但您已經成功地從WordPress中提取了相關資料。下一步是為每個文章建立一個新頁面。

第3步：建立基本頁面模板

在本節中，您將觸發Gatsby為您的WordPress站點的每個頁面建立一個文章，並通過slug包含指向這些文章的連結。

為每個文章建立一個頁面

從WordPress源中提取所有文章後的第一步是指示Gatsby為每個文章建立一個頁面。這是使用動作完成的createPage 動作。

將以下程式碼新增到gatsby-node.js。請注意，我們還獲取了每個文章的內容、作者、日期和slug：

const path = require(`path`)
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions
return graphql(`
{
allWordpressPost(sort: {fields: [date]}) {
edges {
node {
title
excerpt
slug
date(formatString: "MM-DD-YYYY")
author {
name
}
}
}
}
}
`).then(result => {
result.data.allWordpressPost.edges.forEach(({ node }) => {
createPage({
// Decide URL structure
path: node.slug,
// path to template
component: path.resolve(`./src/templates/blog-post.js`),
context: {
// This is the $slug variable
// passed to blog-post.js
slug: node.slug,
},
})
})
})

從GraphQL提取資料後，程式碼為每個文章建立一個頁面。在文章中，您可以使用路徑基於slug指定頁面的URL結構。

或者，您可以獲取文章的ID並在URL中指定。元件變數指向需要渲染文章的模板。最後，我們將slug作為模板的上下文傳遞。這是模板從獲取的文章列表中查詢正確文章所必需的。

理想情況下，您需要傳遞一個將文章唯一標識為上下文的變數。

更改gatsby-node.js檔案後重新啟動開發伺服器以使更改生效。

建立模板以顯示文章

在src目錄中建立目錄模板。在模板目錄中建立一個新檔案blog-post.js並輸入以下程式碼：

import React from "react"
import Layout from "../components/layout"
import { graphql } from "gatsby"
export default ({ data }) => {
const post = data.allWordpressPost.edges[0].node
console.log(post)
return (
<Layout>
<div>
<h1>{post.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.content }} />
<p> By: {post.author.name} </p>
<p> On: {post.date} </p>
</div>
</Layout>
)
}
export const query = graphql`
query($slug: String!) {
allWordpressPost(filter: { slug: { eq: $slug } }) {
edges {
node {
title
content
slug
date(formatString: "MM-DD-YYYY")
author {
name
}
}
}
}
}

GraphQL查詢獲取日期和作者姓名，它們顯示在文章的末尾。您可以使用GraphQL編輯器獲取其他欄位並將它們顯示在文章頁面上。

連結到索引中的頁面

您為每個文章建立了一個新頁面。但是，您需要從索引頁面新增指向這些文章的連結。前往index.js並修改程式碼以將連結新增到每個文章：

import React from "react"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
export default ({ data }) => {
return (
<Layout>
<SEO title="home" />
<h1>My WordPress Blog</h1>
<h4>Posts</h4>
{data.allWordpressPost.edges.map(({ node }) => (
<div>
<Link to={node.slug}>
<p>{node.title}</p>
</Link>
<div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
</div>
))}
</Layout>
)
}
export const pageQuery = graphql`
query {
allWordpressPost(sort: { fields: [date] }) {
edges {
node {
title
excerpt
slug
}
}
}
}

以下是索引頁面的狀態：

新增文章連結後的索引頁面

單擊文章連結時，這裡是部落格文章頁面，由blog-post.js呈現：

帶有標題、內容、建立日期和作者的部落格文章

第4步：高階遷移任務

雖然您可能已成功匯入每個WordPress文章，但讓我們執行一些高階任務以確保您將來不會遇到問題。在本節中，您可以有效地處理影象並將上次修改日期時間戳新增到您的資料中。

影象路徑轉換

我們的原始文章之一，“Post with Image！” 裡面有一張圖片。如果你在Gatsby上移動到相應的頁面，你會注意到圖片顯示出來了，但是圖片的來源和WordPress的一樣。在此示例中，它指向本地託管的WordPress影象。

Gatsby釋出圖片及其來源

如果您在外部託管影象，這不會造成問題，因為您將繼續指向您的影象伺服器。但是，如果您將影象儲存在WordPress安裝中，您也需要獲取帶有文章的影象！

這是由inline images外掛解決的。首先，安裝外掛gatsby-image，然後安裝。gatsby-wordpress-inline-images

npm install gatsby-image
npm install gatsby-wordpress-inline-images

接下來，將以下行新增到您的gatsby-config.js 檔案中。

module.exports = {
siteMetadata: {
...
},
plugins: [
...
{
resolve: `gatsby-source-wordpress`,
options: {
...
// If useACF is true, then the source plugin will try to import the WordPress ACF Plugin contents.
// This feature is untested for sites hosted on WordPress.com
useACF: true,
plugins: [
{
resolve: `gatsby-wordpress-inline-images`,
options:
{
baseUrl: `localhost:8888/wordpress`,
protocol: `http`
}
}
]
}
}
],
}

進行這些更改後重新啟動開發伺服器將從WordPress站點下載影象並將其儲存在本地。您可以從同一影象的路徑中驗證這一點。

顯示上次修改日期

如果您管理一個定期更新文章的部落格，您可能希望在最後一次更新文章時通知讀者。雖然您之前在GraphQL查詢中提取了“created date”，但本節也將告訴您如何提取“last modified”時間戳。

要將WordPress的最後修改時間戳新增到您的Gatsby文章中，您需要將修改後的欄位新增到GraphQL查詢中的專案列表中。它是一個時間戳date，所以你還需要新增引數formatString。這是修改後的blog-post.js檔案：

...
<Layout>
<div>
...
<p> On: {post.date} </p>
<p> Last modified: {post.modified} </p>
</div>
</Layout>
...
export const query = graphql`
query($slug: String!) {
{
allWordpressPost {
edges {
node {
...
modified(formatString: "MM-DD-YYYY")
}
}
}
}

新增後，您將能夠在Gatsby的部落格文章頁面上看到上次修改的時間戳：

使用最後修改的時間戳釋出

小結

決定利用Gatsby將您的WordPress網站轉換為靜態網站可能是一項具有挑戰性的任務。為此，您應該執行以下步驟：

• 安裝Gatsby以構建起始站點
• 通過GraphQL將Gatsby連線到WordPress源
• 為部落格文章建立模板
• 從WordPress匯入所有影象
• 顯示來自WordPress的最後修改時間戳