如何用Gatsby和WordPress建立一个网站（8步）

通过过渡到无头的WordPress设置，你可以对你的在线内容有更多控制。然而，为你的网站建立一个前端也是必须的。要做到这一点，你可以做一个Gatsby WordPress网站。

使用Gatsby，你可以创建一个静态版本的WordPress网站。它可以有效地提高你的内容交付速度和整体网站的安全性。因此，你的网站可以经历更好的搜索排名、用户体验和转换率。

在这篇文章中，我们将解释什么是Gatsby以及将其与WordPress整合的好处。然后，我们将告诉你如何建立一个WordPress Gatsby网站。让我们开始吧

对Gatsby的介绍

当你开始使用WordPress时，你将建立一个动态网站。每当有人访问你的网站时，你的服务器会根据请求生成一个独特的HTML文件。

本质上，像WordPress这样的动态网站使用浏览器端渲染。你的网页可能会根据用户的行为、时区或地点，以不同的方式加载。

另外，你也可以创建一个静态网站。使用预先构建的HTML、CSS和JavaScript编码，静态网页将在每次页面加载时保持不变。

将你的网站转换为静态版本，被称为无服务器或无头的WordPress网站。在这个过程中，你需要为你网站上的每一块内容生成HTML页面。要做到这一点，你可以使用一个静态网站生成器，如Gatsby。

Gatsby是一个开源的静态网站生成器，基于React.JS、GraphQL和Webpack。这个框架使你能够用React和WordPress数据库的源数据创建一个静态网站。

从本质上讲，Gatsby将从许多不同的来源获取数据和渲染内容。这些可以包括来自现有网站的数据、REST等API调用，或通过GraphQL的平面文件。然后，Gatsby将根据配置选项建立你的静态网站。

Gatsby存在的时间并不像其他一些静态网站生成器那样长。然而，它很快就流行起来，现在是许多网站的首选平台。一个受欢迎的盖茨比例子是Airbnb的 工程师和数据科学家的博客。

然而，你可能认为WordPress是一个比其他一些WordPress替代品更有能力和有效的内容管理系统（CMS）。为了认识Gatsby是否适合你，让我们讨论一下静态网站生成器的一些优点、缺点和使用案例。

通过完全管理和WordPress优化的虚拟主机，最大限度地发挥你的WordPress网站。 获取WordPress主机

使用盖茨比的优势

无论你是一个网站所有者还是开发者，页面加载时间可能是你最关心的问题之一。由于页面速度会影响搜索排名和用户体验，你会希望找到不同的方法来加速你的网站。

Gatsby的主要好处之一是它的快速加载速度。静态网站通常可以比动态网站更快地处理请求。有了Gatsby，你可以快速采购、编译和构建内容。

Gatsby提供延迟静态生成、智能页面渲染和静态网站文件。这些性能优化可以提高你的页面速度、SEO流量和转换率。

静态网站也可以更安全。当你有静态生成的文件时，将有更少的漏洞。这种安全水平使黑客难以利用你的网站。

如果你有一个动态网站，你的服务器必须与你的技术栈兼容。然而，Gatsby静态网站可以托管在任何服务器上。由于你不需要专门的服务器，你有可能找到一个更经济的托管解决方案。

Gatsby使用案例

一般来说，Gatsby对任何想建立静态网站的人来说都是一个有用的工具。对于那些不需要经常改变的网站来说，它通常是最好的选择。然而，让我们深入了解一些具体的使用案例，以帮助你了解Gatsby是否是你网站的正确选择。

正如我们前面提到的，静态网站在速度方面更有优势。对于电子商务企业，这是一个需要考虑的基本因素。由于Gatsby可以减少你的页面加载时间，它是优化转换率的一个有效选择。

Gatsby提供超过2500个插件，可以轻松建立一个具有适当功能的网站。无论你的利基是在奢侈品、家居装饰或服装方面，你都可以创建一个具有高质量和互动功能的Gatsby WordPress网站。

Gatsby的架构不需要服务器或数据库。这种设置可以使你的网站处理大量的流量。只要你的内容交付网络（CDN）运行正常，你就不应该经历任何停机时间。

作为一个内容创作者，你很可能希望在你的网站上包含一些照片。幸运的是，Gatsby可以优化图像，以便快速交付。这种优化方法可以避免给你的服务器资源带来太大的压力。

以下是更多可以从使用Gatsby受益的网站龛位。

• 消费金融和保险
• 公共利益组织
• 网络和WordPress开发
• 市场营销
• 软件和SaaS

归根结底，Gatsby是一个灵活的工具，可以生成许多不同类型的静态网站。无论你创建什么样的内容，Gatsby可以有效地优化你的文件交付，以最大限度地提高速度和用户体验。

使用Gatsby的弊端

虽然Gatsby提供了许多好处，但它并不适合所有人。该平台建立在WordPress React上，所以你需要熟悉JavaScript。你还必须使用GraphQL来创建和操作查询。

同样重要的是要记住，Gatsby只提供静态文件。这意味着你将不得不重新考虑如何使用动态内容。

通常情况下，动态内容是你的网站的一个必要部分。例如，你可能想显示带有自定义字段的联系表格。另外，你可能想在评论区鼓励用户参与。

你将需要找到一个第三方服务来提供这些动态元素。例如，一个外部平台，如谷歌表格，可以处理任何联系表格，或者你可以用Discuz托管评论。然而，无论是哪种选择，你都无法直接控制你的动态内容。

最后，每当你在静态网站上编辑一个元素时，你会面临一个延迟。对于像WordPress这样的内容管理系统，你可以立即看到任何变化。然而，由于Gatsby预先渲染内容的方式，你将不得不等待至少一分钟。

盖茨比的学习难度如何？

当你作为一个初学者第一次使用Gatsby时，你可能会面临一个陡峭的学习曲线。如果你是WordPress开发的新手，管理HTML、CSS、JavaScript和命令行可能是一个挑战。

然而，如果你熟悉这些基本的WordPress开发技能，你可以轻松地学习Gatsby。这将涉及管理React.js，它是一个JavaScript库。如果你已经会写JavaScript，在这个过程中你会更容易。

此外，你可以用HTML和CSS为你的盖茨比WordPress网站设计风格。由于这些编码语言相对容易学习和使用，Gatsby不应该让你气馁。

Gatsby还提供了大量的文档和操作教程。即使你是一个初学者，你也可以很快学会用WordPress和Gatsby创建一个静态网站所需的一切。

此外，Gatsby是一个开源项目，所以开发人员不断地改进这些资源。

如何用WordPress和Gatsby建立一个网站（8步走）

现在是时候学习如何用WordPress和Gatsby制作一个网站了。然后，你可以将你的网站作为静态文件提供，并在丰富用户体验的同时，轻松提高加载时间。我们不使用WordPress Gatsby主题，而是告诉你如何从头开始做这个过程。

第一步 - 创建一个WordPress网站

使用Gatsby，你可以把你的WordPress网站作为静态内容提供。要开始这个过程，你需要安装WordPress，它将作为Gatsby的数据源。这可以是一个现有的网站，一个新的安装，或一个本地环境。

你首先需要找到一个兼容的虚拟主机服务，因为主机提供商将为你的新网站提供服务器空间。在这个过程中，你应该能够在一个地方创建一个域名和安装WordPress。

在Hostinger，我们提供一些最具成本效益的托管计划。如果你正在寻找一个高品质的WordPress优化的服务器，你不能去错我们的WordPress托管。我们的计划从低至1.99美元/月开始。

购买计划后，你需要选择一个域名并安装WordPress。通过登录你的hPanel账户，你可以查看你的计划的细节。

点击 "仪表板"按钮。这将打开你的WordPress管理仪表板，你将用它来管理你的网站的后端。

第2步 - 安装Gatsby插件

下一步，你需要安装和激活几个WordPress插件。首先，WPGraphQL是一个免费和开源的工具，将在WordPress中启用GraphQL API。这个插件将把WordPress设置为一个数据源，并允许这些数据被GraphQL查询。

在你的WordPress仪表板上进入插件->添加新的插件来安装这个插件。然后，搜索**"WPGraphQL"。**一旦你找到这个插件，安装并激活它。

你要下载的第二个插件是WPGatsby。这个工具将保持你的WordPress网站与Gatsby同步。它还可以让你覆盖WordPress的预览，并用Gatsby的前端来取代它。

激活这两个插件后，进入GraphQL->设置。在这里，找到GraphQL端点。

你应该在你的网站上看到一个GraphQL API的端点路径。因为你以后会需要这个信息，所以一定要复制这个URL。

在你开始使用Gatsby之前，你可能会考虑改变你的WordPress永久链接。为了达到WPGraphQL的最佳效果，你需要避免使用 "普通 "的固定链接结构。

您可以通过选择 "设置"->"许可链接"来更新您的固定链接结构。在普通设置下，选择除普通以外的任何选项。

一定要保存你的更改。在这之后，打开命令行，用这个命令测试WordPress和GraphQL之间的连接。

curl --location --request POST 'https://your_domain/graphql' \
--header 'Content-Type: application/json' \
--data-raw '{
    "query": "query { posts { nodes { title } } }"
}'

这将向你的网站的GraphQL端点发送一个请求。如果功能正常，你会收到一个JSON响应，列出你网站的文章标题。

第3步 - 安装Gatsby

在安装Gatsby之前，你需要确保你满足其先决条件。由于Gatsby是通过node包管理器（npm）提供的，你需要同时安装NodeJS和npm。此外，Git将是管理代码所必需的。

要下载Git和NodeJS，你可以使用一个软件包安装程序。对于Mac用户来说，首先要安装Homebrew，一个macOS缺失的软件包管理器。

在命令终端，输入以下命令来安装和配置Homebrew。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 

一旦Homebrew安装完毕，你可以使用这些命令来安装NodeJS和Git。

brew install nodejs
brew install git

如果你有一台Windows电脑，前往Git和NodeJS的下载页面。选择Windows版本并下载这两个软件包。

对于Linux操作系统，你可以使用像apt这样的软件包安装程序。要安装必要的软件，请使用这些命令。

sudo apt update
sudo apt install nodejs git

现在你应该满足安装Gatsby所需的要求。要做到这一点，在你的软件终端运行以下命令。

npm install -g gatsby-cli

这将自动运行Gatsby安装程序。你会注意到，它将下载并安装所有必要的依赖项，然后是Gatsby本身。

第4步 - 创建一个Gatsby网站

一旦Gatsby的安装过程完成，你就可以准备建立你的第一个Gatsby WordPress网站。要开始，只需输入以下命令。

gatsby new gatsby-site

这将克隆默认的启动模板，并把它放在**/gatsby-site**目录下。一旦完成，你的Gatsby网站将被启动。然后，你可以用这个命令打开开发版本。

cd gatsby-site
gatsby develop

之后，命令终端会告诉你，你可以访问你新的本地网站。打开一个网络浏览器并访问http://localhost:8000/。这将允许你查看你的网站的Gatsby前端。

如果你没有看到任何错误，你可以开始建立你的静态网站。这个过程涉及在公共目录中创建文件。要自动做到这一点，请输入以下命令。

gatsby build

最后，你可以启动一个本地HTML服务器来显示你的新网站。需要注意的是，这只有在构建命令运行后才会成功。

gatsby serve

这将成功建立一个基本的静态Gatsby网站。

第5步 - 连接WordPress和配置Gatsby

现在你有了一个默认的静态网站，是时候把它与WordPress整合起来了。对于这一步，你将引导Gatsby到你的WordPress网站的地址。当你运行这个开发服务器时，这将从你的网站上提取最新的数据。

首先，安装Gatsby WordPress插件。你可以通过运行以下命令来做到这一点。

npm install gatsby-source-wordpress

然后，使用你喜欢的文本编辑器，打开gatsby-config.js文件，这是Gatsby的默认配置文件。要将Gatsby连接到一个WordPress源，添加这段代码。

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

记得把**"example.com "替换成你之前复制的GraphQL端点。如果你使用的是本地托管的网站，你可以使用"localhost:8888/wordpress "**来替换你的网站URL。

第6步 - 自定义默认模板文件

当你安装Gatsby时，它将包括一个基本的启动模板。这包含一些基本的源文件，具有默认功能。要定制你的网站，了解这些基本的模板文件很重要。

• ./gasby-node.js- 包含查询WordPress的代码，以提取你的内容，然后生成静态输出。通过编辑这个文件，你可以修改你网站上显示的内容。如果你熟悉WordPress的开发，这个过程类似于编辑Loop。
• ./src/templates- 包含并输出一个React组件的单个模板文件。由于它们负责渲染内容，这些文件在改变你的网站外观方面起着至关重要的作用。它们类似于WordPress的模板文件。
• ./src/components- 这个文件夹中的每个文件都包含一个React组件，执行一个特定的UI任务。与其说是模板，不如说是UI构建块。如果你想在多个模板文件中共享一个UI元素，你可以把代码粘贴到这个文件夹中。在WordPress中，这些将是模板的组成部分。
• ./src/css- 由整个网站共享的CSS文件组成，类似于WordPress中的style.css文件。

现在你了解了这些文件的工作方式，是时候添加你的定制了。

显示文章摘录

在你的WordPress网站上，你的博客文章会有摘录，这是每篇文章的摘要。然而，盖茨比会拉出一个摘录，主要是为了**搜索引擎优化（SEO）**的目的。它将把摘录放在元描述中。

你可能想自定义你的博客文章在静态网站上的显示方式。要做到这一点，你可以打开**./src/templates/blog-post.js** 文件。

要开始显示博文摘录，将突出显示的代码添加到你的模板文件中。

const BlogPostTemplate = ({ data: { previous, next, post } }) => {
	...
	return (
		<Layout>
			...
			<h1 itemProp="headline">{parse(post.title)}</h1>
      
			<p>{post.date}</p>

			{/* Checking for and adding the post excerpt if the current post has one*/}
			

Gatsby现在会自动检查文章是否有摘录。如果有，它将作为文本内容显示在**

.post-list-item header {
  margin-bottom: var(--spacing-4);
}

/* CSS targeting your new post excerpt element */
.post-excerpt {
  box-shadow: 0px 1px 9px 1px rgb(0 0 0 / 50%);
  padding: 6px;
  border-radius: 8px;
  margin-bottom: 14px;
}

.post-excerpt p {
  margin-bottom: 0px;
}

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 post's data.
      context: {
        id: edge.node.id,
      },
    })
  })
} 

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
          }
        }
      }
    }
  }

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
        }
      }
    }
  }

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

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`
            }
          }
        ]
      }
    }
  ],
}

...
<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")
        }
      }
    }
  }