教程：使用 WordPress 和 Gatsby 构建您的网站

已发表: 2023-02-12

使用 headless WordPress 可以使用 WordPress 创建静态网站。 这些类型的网站加载速度更快，因为静态文件保存在您的服务器上。 问题是，如何使用 WordPress 构建无头网站？

这就是像 Gatsby 这样的静态网站生成器的用武之地。这些生成器可以帮助您在 WordPress 中构建功能丰富的静态网站。 但是，您需要将它们与您的 WordPress 安装正确集成，以充分利用它们。 此集成包括安装、生成和配置 WordPress Gatsby。

在本文中，我们将了解什么是 Gatsby 以及为什么您可能希望将它与 WordPress 一起使用。 然后我们将详细说明如何使用 Gatsby 以及您是否应该使用。 让我们开始吧！

目录
1.什么是盖茨比？
2.为什么要在 WordPress 中使用 Gatsby？
2.1. 使用盖茨比的优点
2.2. 使用盖茨比的缺点
3.如何在 WordPress 中使用 Gatsby？
3.1. 第 1 步：检查先决条件
3.2. 第二步：安装盖茨比
3.3. 第 3 步：创建 Gatsby 站点
3.4. 第 4 步：将 Gatsby 连接到 WordPress
3.5. 第 5 步：配置 Gatsby
3.6. 第 6 步：构建页面模板
4.我应该为 WordPress 使用 Gatsby 吗？
5.在 WP Engine 上充分利用您的网站

什么是盖茨比？

简单来说，Gatsby 是一个静态站点生成器。 这意味着 Gatsby 生成上传到您网站服务器的静态 HTML 文件。 当访问者登陆您的网站时，这些静态文件将提供给他们的浏览器，而不是 WordPress 通常提供的动态内容。

为了生成这些文件，Gatsby 从一系列来源获取您网站的数据。 这包括现有网站、API 调用和通过 GraphQL 的平面文件。 然后根据您设置的配置构建您的静态网站。

与其他静态站点生成器相比，Gatsby 相对较新。 然而，这并没有阻止许多公司尝试它。 最大的例子之一是由 Gatsby 提供支持的 Airbnb 工程与数据科学博客。

为什么在 WordPress 中使用 Gatsby？

由于可以使用 WordPress 创建静态网站，您可能想知道为什么要同时使用 WordPress 和 Gatsby。 虽然 WordPress 本身很强大，但 Gatsby 为您的网站提供了一些您可能想要的好处，包括更快的速度和更低的服务器成本。 了解 Gatsby 的优点和缺点可以帮助您做出明智的决定。

使用盖茨比的优点

Gatsby 提供了一系列任何网站都可以利用的好处，包括：

  • 更快的加载速度。 静态网站加载速度比动态网站快，这会影响您的搜索引擎优化 (SEO)。 页面加载速度是搜索引擎使用的一个信号，会影响您网站的跳出率。
  • 降低服务器成本。 动态网站需要兼容的技术堆栈和服务器。 静态网站则不然，您可以将它们托管在任何服务器上。 这可以降低您的服务器成本。
  • 提高了安全性。 静态网站提供更高的安全性。 所提供的静态 HTML 文件并没有为黑客提供太多可利用的东西。 如果这些文件因任何原因丢失，您也可以使用 Gatsby 重新生成它们。

您的网站可以从所有这些优势中受益。 但是，您应该权衡它们与使用 Gatsby 的缺点。

使用盖茨比的缺点

没有软件系统是完美的，Gatsby 确实有一些您需要了解的缺点：

  • 需要的技术知识。 Gatsby 建立在 ReactJS 之上并使用 GraphQL。 要使用它，需要对 JavaScript 有所了解。 您还需要具备 GraphQL 的基本知识才能构建网站。
  • 没有动态内容。 Gatsby 只生成静态网站。 如果您想要联系表单等动态内容，则需要通过第三方提供商进行重定向。

虽然许多开发人员发现 Gatsby 的利大于弊，但提前了解两者都很重要。

我如何在 WordPress 中使用 Gatsby？

设置 Gatsby 可能需要一些时间，并且您需要执行某些步骤。 您需要先安装 Gatsby，然后才能开始生成您的站点并对其进行配置。 此外，还有一些初步的考虑需要考虑。

第 1 步：检查先决条件

在安装 Gatsby 之前，您需要在您的网站环境中安装 NodeJS 和 npm。 代码管理也需要 Git。 安装先决条件的步骤因您运行的操作系统而异。

如果你有 Windows，你可以通过下载页面上的安装程序安装 NodeJS 和 Git。 Mac 也是如此。 但是，如果您运行 Linux，则需要一个软件包安装程序，例如 apt。

第二步：安装盖茨比

安装好NodeJS和Git之后，就可以开始安装Gatsby了。 最简单的方法是在您的软件终端中使用以下命令：

 npm install -g gatsby-cli

此命令自动运行安装程序。 在安装 Gatsby 之前，它将首先下载并安装所有依赖项。 一旦完成，您就可以开始创建您的第一个 Gatsby 网站。

第 3 步：创建 Gatsby 站点

要创建您的 Gatsby 网站，您需要运行以下命令：

 gatsby new gatsby-site

此命令克隆 Gatsby 入门模板，并将其放在目录/gatsby-wordpress中。 克隆和安装完成后，您可以打开站点的开发版本。 这是使用以下命令完成的：

 gatsby develop

当开发环境正在运行时，您可以在本地访问您的新网站。 在您的 Web 浏览器中，输入http://localhost:8000 ，您的默认模板应该会打开。

如果您看到此页面，则可以开始构建您的网站。 这意味着在这些网站的公共目录中创建静态文件。 以下命令会自动开始生成 tohse 静态文件：

 gatsby build

此命令还会为您的网站生成预路由 JavaScript 代码包。 然后您可以使用 serve 命令在本地显示您的新网站：

 gatsby serve

此命令仅在您已经运行构建命令时才有效。

第 4 步：将 Gatsby 连接到 WordPress

您现在有一个基本的静态网站，但您需要将它与 WordPress 集成。 这会将您的 Gatsby 站点指向您的 WordPress 博客的地址，使其能够在您运行开发服务器时提取最新数据。 连接后，Gatsby 将基于您当前的 WordPress 模板构建一个静态网站。

要连接两者，您需要为 WordPress 安装 Gatsby 插件。 以下命令将解决这个问题：

 npm install gatsby-source-wordpress

安装插件后，就可以开始配置 Gatsby 了。

第 5 步：配置 Gatsby

要配置 Gatsby，您需要使用gatsby-config.js文件。 在该文件中，添加以下代码：

 module.exports = { ... plugins: [ ..., { resolve: `gatsby-source-wordpress`, options: { // your WordPress source baseUrl: `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 网站。 如果您的网站是本地托管的，在 baseUrl 之后您可以使用localhost:8888/wordpress代替您网站的 URL。 保存文件后，您需要构建页面模板。

第 6 步：构建页面模板

构建页面模板使 Gatsby 能够为您的 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, }, }) }) }

从 WordPress 调用所有数据后，Gatsby 将为每个帖子生成一个页面。 使用 develop 命令，您可以使用生成的 URL 导航到每个新页面。

我应该为 WordPress 使用 Gatsby 吗？

虽然 Gatsby 可以提高网站的速度和安全性，但它并不是每个人的正确选择。 如果您的网站包含不经常更改的静态内容，Gatsby 可能会有所帮助。 但是，如果您的网站需要动态内容，传统的 WordPress 可能是更好的选择。

在 WP Engine 上充分利用您的网站

Gatsby 是一个有效的静态网站生成器，您可以轻松地与 WordPress 集成。 您需要遵循一些步骤来安装和配置系统。 在开始之前，您还需要了解一些 Gatsby 和 GraphQL 知识。

静态内容可以提高网站的速度和安全性，但您还需要合适的主机。 WP Engine 为您的网站提供最好的资源，以创造出色的数字体验。 这让您有更多时间专注于开发！