##使用WordPress配置開源Gatsby，以帶來更大的用戶體驗和整體性能。讓我們學習如何使用此靜態站點生成器。
概述
Gatsbyjs是一種基於GraphQl驅動的靜態站點生成器的免費開源反應。它使用功能強大的預配置來構建一個網站，該網站僅使用靜態文件來實現令人難以置信的快速頁面加載。 WordPress是一個很棒的開源博客平台。結果，有很多人知道如何弄清楚網站是否是WordPress網站，以便他們可以黑客入侵並竊取信息。一起使用Gatsby WordPress將為您提供WordPress內容管理和Gatsby速度的相同功能。 在本文中，我們將研究蓋茨比是什麼以及為什麼需要將其與CMS軟件一起使用。然後，我們將詳細介紹如何使用WordPress和Gatsby一起建立出色的網站體驗。開始吧！
什麼是蓋茨比
蓋茨比是靜態站點生成器。這意味著Gatsby生成了上傳到網站服務器的靜態HTML文件。當訪問者降落在您的網站上時，這些靜態文件就會將其提供給其瀏覽器，而不是動態內容WordPress通常使用。這是一個基於React的免費開源框架，可幫助開發人員構建熾烈的網站和應用程序。
使用WordPress和Gatsby的優點
根據蓋茨比（Gatsby）的官方文件，他們已經編譯了一張桌子，蓋茨比WordPress的組合很棒，而不是。為了輕鬆，我在這裡列出這些。 {{LINE_23}} {{LINE_24}} {{LINE_25}} WordPress和Gatsby非常適合 {{LINE_27}} {{LINE_28}} {{LINE_29}} 對WordPress內容編輯體驗感到滿意的內容團隊 {{LINE_31}} {{LINE_32}} 使用流行的開源技術重視的開發團隊 {{LINE_34}} {{LINE_35}} 重新設計了已存儲在WordPress中的內容的網站 {{LINE_37}} {{LINE_38}} 想要擁有他們的數據和技術堆棧的團隊 {{LINE_40}} {{LINE_41}} 複雜的訪問控制工作流或內容建模限制 {{LINE_43}} {{LINE_44}} 安全很重要的項目 {{LINE_46}} {{LINE_47}} 高需求項目至關重要 {{LINE_49}} {{LINE_50}} {{LINE_51}} {{LINE_52}} {{LINE_53}} WordPress和Gatsby並不適合 {{LINE_55}} {{LINE_56}} {{LINE_57}} 需要使用WordPress UI主題的團隊 {{LINE_59}} {{LINE_60}} 那些尋找完全管理的雲CMS的人 {{LINE_62}} {{LINE_63}} {{LINE_64}} {{LINE_65}} 除了這些官方觀點，我還想列出一些一起使用蓋茨比WordPress的利弊 {{LINE_67}} {{LINE_68}} {{LINE_69}} 優點 {{LINE_71}} {{LINE_72}} {{LINE_73}} 更快的負載速度 - 靜態網站的加載速度比動態更快。結果，它會影響您的頁面加載速度和SEO排名。 {{LINE_75}} {{LINE_76}} 服務器成本較小 - 由於靜態文件不需要特殊的軟件，因此也可以從便宜的服務器中提供靜態HTML頁面。 {{LINE_78}} {{LINE_79}} 更安全 - 對於靜態站點，沒有零件的移動組件，因此黑客沒有機會利用您的軟件。 {{LINE_81}} {{LINE_82}} {{LINE_83}} {{LINE_84}} {{LINE_85}} {{LINE_86}} {{LINE_87}} 缺點 {{LINE_89}} {{LINE_90}} {{LINE_91}} 學習曲線 - 它需要開發人員的其他技能。像Learning ReactJ和GraphQl {{LINE_93}} {{LINE_94}} 僅靜態內容 - 如果您需要提供任何動態內容。那蓋茨比不適合你。它只能服務器靜態文件。因此，您無法擁有從數據庫中獲取數據的任何評論系統。 {{LINE_96}} {{LINE_97}} {{LINE_98}} {{LINE_99}}
如何將gatsby與WordPress一起使用
在安裝Gatsby之前，您需要在網站環境中安裝Nodejs和NPM。
###步驟1 - 安裝蓋茨比
npm install -g gatsby-cli
此命令自動運行安裝程序。它在安裝Gatsby之前下載並安裝所有依賴關係。完成後，您可以開始創建第一個蓋茨比網站。
gatsby new gatsby-site
這將下載Gatsby的入門模板，並將其放置在目錄/蓋茨比字眼中。安裝完成後，您可以打開網站的開發版本
gatsby develop
現在，在您的Web瀏覽器中，輸入_http：// localhost：8000_，您的默認模板應打開。
###步驟2 - 將Gatsby連接到WordPress 在Gatsby WordPress指南的這一部分中，我們將使用WordPress連接此靜態站點生成器。您有一個基本的靜態網站，但是您需要將其與WordPress集成。這將您的蓋茨比網站指向WordPress博客的地址，使其在運行開發服務器時可以提取最新數據。連接後，蓋茨比將根據您當前的模板構建靜態網站。 從NPM存儲庫安裝gatsby源WordPress插件。
npm install gatsby-source-wordpress
###步驟3 - 配置蓋茨比 將以下代碼放在您的_gatsby-config.js_文件中
module.exports = {
...
plugins: [
...,
{
resolve: `gatsby-source-wordpress`,
options: {
// your WordPress source
baseurl: `wpexample.com`,
aliases: - `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網站。如果您的網站是本地託管的，則可以使用_localhost：8888/wordpress_而不是網站的URL。保存文件後，您需要構建頁面模板。
###步驟4 - 構建頁面模板 構建頁面模板使本網站生成器能夠在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,
},
})
})
}
調用所有數據後，Gatsby將為每個帖子生成一個頁面。使用開發命令，您可以使用生成的URL導航到每個新頁面。
結論
在這個蓋茨比WordPress教程中，我們介紹瞭如何從WordPress生成Gatsby網站。我們了解了這兩個開源軟件的優缺點。我們還介紹瞭如何從Gatsby開發環境開始安裝和開始。 最後，Containerize.com正在撰寫有關進一步開源產品的文章。因此，請與開源Blogging平台類別保持聯繫，以進行常規新聞和更新。