典型的动态网站（例如基于 WordPress 的网站）如何工作？当访问者在浏览器上输入URL或通过链接访问您的网站时，会向您的Web服务器发送请求。
服务器通过必要的数据库查询收集所需的数据，并生成一个HTML文件供您的浏览器显示。另一方面，静态站点将这些响应存储到服务器上的平面文件中，这些文件会立即传递给访问者。
静态站点生成器已经存在了很长时间，但它们最近变得越来越流行。在本分步指南中，我们将了解如何将WordPress与静态网站生成器Gatsby集成。
- 什么是Gatsby？
- 第1步：设置Gatsby
- 第2步：如何将Gatsby连接到WordPress
- 第3步：创建基本页面模板
- 第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 (
Posts
{data.allWordpressPost.edges.map(({ node }) => (
{node.title}
