典型的動態(tài)網(wǎng)站（例如基于 wordpress 的網(wǎng)站）如何工作？當訪問者在瀏覽器上輸入URL或通過鏈接訪問您的網(wǎng)站時，會向您的Web服務器發(fā)送請求。

雄縣網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、響應式網(wǎng)站等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)建站于2013年創(chuàng)立到現(xiàn)在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選創(chuàng)新互聯(lián)建站。

服務器通過必要的數(shù)據(jù)庫查詢收集所需的數(shù)據(jù)，并生成一個HTML文件供您的瀏覽器顯示。另一方面，靜態(tài)站點將這些響應存儲到服務器上的平面文件中，這些文件會立即傳遞給訪問者。

靜態(tài)站點生成器已經存在了很長時間，但它們最近變得越來越流行。在本分步指南中，我們將了解如何將WordPress與靜態(tài)網(wǎng)站生成器Gatsby集成。

什么是Gatsby？

WordPress創(chuàng)建動態(tài)網(wǎng)站，需要在服務器上安裝一堆PHP、MySQL和Apache或Nginx才能運行。可以通過為您網(wǎng)站上的所有內容生成HTML頁面列表來創(chuàng)建WordPress的靜態(tài)版本。

這個靜態(tài)版本的WordPress稱為無頭WordPress或無服務器WordPress。此轉換過程只需執(zhí)行一次，以便可以多次向訪問者提供同一頁面。您如何將您的WordPress網(wǎng)站轉換為靜態(tài)版本？這就是Gatsby出現(xiàn)的地方。

Gatsby或GatsbyJS是一個使用ReactJS構建并由GraphQL提供支持的靜態(tài)站點生成器。Gatsby允許任何人創(chuàng)建功能豐富、引人入勝的網(wǎng)站和應用程序。Gatsby通過GraphQL從各種來源（包括現(xiàn)有網(wǎng)站、API調用和平面文件）為您的站點獲取數(shù)據(jù)，并根據(jù)您指定的配置設置構建靜態(tài)站點。

Gatsby是一年前才開發(fā)出來的，但大量用戶都在嘗試Gatsby。Gatsby在各種環(huán)境中都得到了認可。Airbnb的數(shù)據(jù)科學與工程博客的主頁由Gatsby提供支持，但實際的博客文章托管在Medium上。

Airbnb的工程與數(shù)據(jù)科學博客

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

博朗品牌的加拿大網(wǎng)站

此外，Gatsby還激發(fā)了自由職業(yè)者開發(fā)人員對其作品集的興趣。諸如Jacob Castro的作品集主要包含靜態(tài)內容，其中包含作品鏈接和電子郵件聯(lián)系方式，因此靜態(tài)網(wǎng)站非常適合他的需求。

Jacob D. Castro的作品展示站

為什么選擇Gatsby？

快速網(wǎng)站： 使用Gatsby構建靜態(tài)網(wǎng)站的主要好處是速度，自從Google宣布在網(wǎng)絡搜索排名中使用網(wǎng)站速度以來，網(wǎng)站管理員一直在努力優(yōu)化速度。加載時間也會影響頁面瀏覽量和轉化率。據(jù)估計，網(wǎng)站加載時間延遲一秒會導致轉化次數(shù)減少7%。

安全性： 您還可以通過靜態(tài)站點獲得額外的安全性。由于提供的是一堆靜態(tài)文件，因此沒有什么可破解的。此外，如果靜態(tài)文件丟失，您始終可以重新生成它們。

服務器成本：托管動態(tài)站點需要您的服務器與您的技術堆棧兼容。如果您使用的是靜態(tài)站點，則幾乎可以在任何服務器上托管它，這也降低了與托管相關的成本。

在每次更改時使用Gatsby生成靜態(tài)站點確實需要JavaScript，這也可以在將靜態(tài)文件傳輸?shù)秸军c之前在本地計算機上完成。

為什么要避開Gatsby？

沒有內置動態(tài)內容： 如果你想使用Gatsby，你需要重新考慮如何控制和提供動態(tài)內容，即你需要創(chuàng)建靜態(tài)/動態(tài)的混合來實現(xiàn)這一點（更多關于這個以下）。

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

聯(lián)系表格還需要通過Google表格等外部合作伙伴重新發(fā)送。簡而言之，您將失去對此類動態(tài)內容的直接控制，因為它們的響應未存儲在您的服務器上。

頻繁構建不方便： 靜態(tài)站點也存在頻繁重新轉換的問題。只有在重新生成頁面并將其重新上傳到服務器后，您在網(wǎng)站上所做的任何更改才會反映出來。

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

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

如果您認為好處大于缺點，那就太好了！我們現(xiàn)在將嘗試設置Gatsby以與我們的WordPress站點集成。

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

第1步：設置Gatsby

在本節(jié)中，我們將了解如何安裝Gatsby并使用Gatsby創(chuàng)建一個基本的靜態(tài)站點。

先決條件

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

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

brew install nodejs
brew install git

如果您運行的是Linux操作系統(tǒng)，則可以通過apt之類的包安裝程序安裝NodeJS。

sudo apt update
sudo apt install nodejs git

安裝Gatsby

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

npm install -g gatsby-cli

安裝程序首先安裝依賴項，然后安裝Gatsby。您現(xiàn)在已準備好創(chuàng)建您的第一個Gatsby站點。

構建和部署您的Gatsby站點

運行以下命令以創(chuàng)建Gatsby站點。

gatsby new gatsby-wordpress

Gatsby通過克隆Gatsby入門模板在目錄/gatsby-wordpress中創(chuàng)建一個站點。您可以提供不同的入門模板進行克隆?？寺⊥瓿刹惭b依賴項后，您可以使用以下命令運行站點的開發(fā)版本。

cd gatsby-wordpress
gatsby develop

然后，您可以在http://localhost:8000訪問該站點的開發(fā)版本。

Gatsby入門網(wǎng)站

最后一步是構建您的靜態(tài)站點。以下命令在公共目錄中創(chuàng)建靜態(tài)文件。要將其上傳到服務器，您只需將該目錄的內容上傳到服務器的根目錄即可。您可能希望添加像www.example.com/blog/這樣的路徑前綴作為構建的根URL。

gatsby build

要在本地啟動HTML服務器以顯示您網(wǎng)站的這種靜態(tài)形式，您需要使用serve 命令。請注意，它僅在運行build命令后才有效。

gatsby serve

現(xiàn)在您已經從Gatsby成功創(chuàng)建了一個基本的靜態(tài)站點，讓我們嘗試將其與WordPress集成。

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

在本節(jié)中，您將把您的WordPress網(wǎng)站與Gatsby集成。您可以將Gatsby指向您的WordPress博客的地址，以使其在您運行開發(fā)服務器或生成靜態(tài)頁面時能夠提取最新數(shù)據(jù)。

將Gatsby連接到WordPress的過程是獲取由構建觸發(fā)的WordPress數(shù)據(jù)。Gatsby獲取WordPress數(shù)據(jù)后，它會根據(jù)當前模板創(chuàng)建靜態(tài)站點。

該過程使用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站點提取哪些數(shù)據(jù)。Gatsby使用GraphQL（一種用于API的開源查詢語言）來批量獲取WordPress文章。

在最終確定要選擇的查詢之前，您可以交互地選擇需要從WordPress獲取的內容。運行開發(fā)服務器并轉到URL：http://localhost:8000/___graphql以打開GraphQL編輯器。

使用GraphQL查詢數(shù)據(jù)

完成要拉取的內容后，可以將GraphQL查詢添加到文件index.js。

現(xiàn)在讓我們只從每個文章中提取標題和摘錄。我們可以稍后添加更多字段。

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
export default ({ data }) => {
return (


Posts
{data.allWordpressPost.edges.map(({ node }) => (

{node.title}


))}

)
}
export const pageQuery = graphql`
query {
allWordpressPost(sort: { fields: [date] }) {
edges {
node {
title
excerpt
}
}
}
}

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

帶有WordPress文章的Gatsby主頁

雖然這看起來不太漂亮，但您已經成功地從WordPress中提取了相關數(shù)據(jù)。下一步是為每個文章創(chuàng)建一個新頁面。

第3步：創(chuàng)建基本頁面模板

在本節(jié)中，您將觸發(fā)Gatsby為您的WordPress站點的每個頁面創(chuàng)建一個文章，并通過slug包含指向這些文章的鏈接。

為每個文章創(chuàng)建一個頁面

從WordPress源中提取所有文章后的第一步是指示Gatsby為每個文章創(chuàng)建一個頁面。這是使用動作完成的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提取數(shù)據(jù)后，代碼為每個文章創(chuàng)建一個頁面。在文章中，您可以使用路徑基于slug指定頁面的URL結構。

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

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

更改gatsby-node.js文件后重新啟動開發(fā)服務器以使更改生效。

創(chuàng)建模板以顯示文章

在src目錄中創(chuàng)建目錄模板。在模板目錄中創(chuàng)建一個新文件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 (


{post.title}

 By: {post.author.name} 
 On: {post.date} 


)
}
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編輯器獲取其他字段并將它們顯示在文章頁面上。

鏈接到索引中的頁面

您為每個文章創(chuàng)建了一個新頁面。但是，您需要從索引頁面添加指向這些文章的鏈接。前往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 (


My WordPress Blog
Posts
{data.allWordpressPost.edges.map(({ node }) => (


{node.title}



))}

)
}
export const pageQuery = graphql`
query {
allWordpressPost(sort: { fields: [date] }) {
edges {
node {
title
excerpt
slug
}
}
}
}

以下是索引頁面的狀態(tài)：

添加文章鏈接后的索引頁面

單擊文章鏈接時，這里是博客文章頁面，由blog-post.js呈現(xiàn)：

帶有標題、內容、創(chuàng)建日期和作者的博客文章

第4步：高級遷移任務

雖然您可能已成功導入每個WordPress文章，但讓我們執(zhí)行一些高級任務以確保您將來不會遇到問題。在本節(jié)中，您可以有效地處理圖像并將上次修改日期時間戳添加到您的數(shù)據(jù)中。

圖像路徑轉換

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

Gatsby發(fā)布圖片及其來源

如果您在外部托管圖像，這不會造成問題，因為您將繼續(xù)指向您的圖像服務器。但是，如果您將圖像存儲在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`
}
}
]
}
}
],
}

進行這些更改后重新啟動開發(fā)服務器將從WordPress站點下載圖像并將其存儲在本地。您可以從同一圖像的路徑中驗證這一點。

顯示上次修改日期

如果您管理一個定期更新文章的博客，您可能希望在最后一次更新文章時通知讀者。雖然您之前在GraphQL查詢中提取了“created date”，但本節(jié)也將告訴您如何提取“l(fā)ast modified”時間戳。

要將WordPress的最后修改時間戳添加到您的Gatsby文章中，您需要將修改后的字段添加到GraphQL查詢中的項目列表中。它是一個時間戳date，所以你還需要添加參數(shù)formatString。這是修改后的blog-post.js文件：

...


...
 On: {post.date} 
 Last modified: {post.modified} 


...
export const query = graphql`
query($slug: String!) {
{
allWordpressPost {
edges {
node {
...
modified(formatString: "MM-DD-YYYY")
}
}
}
}

添加后，您將能夠在Gatsby的博客文章頁面上看到上次修改的時間戳：

使用最后修改的時間戳發(fā)布

小結

決定利用Gatsby將您的WordPress網(wǎng)站轉換為靜態(tài)網(wǎng)站可能是一項具有挑戰(zhàn)性的任務。為此，您應該執(zhí)行以下步驟：

• 安裝Gatsby以構建起始站點
• 通過GraphQL將Gatsby連接到WordPress源
• 為博客文章創(chuàng)建模板
• 從WordPress導入所有圖像
• 顯示來自WordPress的最后修改時間戳