在Gatsby.js和WordPress的结合下，能够轻松愉快地进行网站开发，并对运营十分友好

8 月 ago

1 minute

Jamstack的Web开发非常有趣！！我永远感激那些开发库和框架的人。

源代码通过在本地完成，它的紧凑性使得它易于理解。同时，可以边制作边通过热重载进行确认。此外，最重要的是成果物的性能很高。快速就是最好的！

虽然如此，如果别人认为我们所做的东西很难使用，那将是令人伤心的…。借助Jamstack技术，如果即使对技术不熟悉的管理人员也能愉快地使用，那就是最好的选择了吧。

WordPress是一种对管理方便的后台系统。

比如说，WordPress真不错。我自己刚开始学习的时候就在虚拟主机上轻松安装并使用了。选择WordPress，可以很大程度上减少网站管理方面的学习成本。

开发方面的好处包括“日语输入无问题，CMS定期备份和恢复现实可行，服务器放置位置无限制，不易受带宽限制束缚，GraphQL插件出色等。”

如果要选择的话，我会选择Gatsby.js。它由充满热情的开发者们打造，与WordPress的整合变得更加顺畅。虽然不是必需的，但如果环境选择顺利的话，您也可以进行增量构建和预览。

使用React和GraphQL进行开发非常方便，因为它使得在构建期间之外不需要进行API请求，这样就可以放心使用WordPress服务器，即使它性能不强。此外，还可以包含媒体库中的图像，这一点也非常令人感激。

在WordPress上安装两个插件（WPGraphQL和WPGatsby）。只需通知运营人员按照常规进行文章和固定页面的创建即可。

WPGatsby – WordPress プラグイン

如果您正在使用ACF或CPT UI，您将需要安装额外的插件。

WPGraphQL for Custom Post Type UI | WPGraphQL

启用WPGraphQL后，WordPress内部会启动一个GraphQL服务器，并且可以在管理界面中预览数据。在上面的屏幕截图中，我们可以看到已经拉取了发布的数据。

只有启用WPGatsby，后续设置的构建才能成功。它包含了许多方便的功能，如对GraphQL进行专用转换、差分检查、Build Hook设置等。

在本地环境中安装Node.js和gatsby-cli，并使用starter会更加方便。

$ gatsby new my-wordpress-gatsby-site https://github.com/gatsbyjs/gatsby-starter-wordpress-blog
$ cd ./my-wordpress-gatsby-site
$ gatsby develop

Gatsby.js的网站已经启动了。如果启动器的设置处于默认状态，它将从示范WordPress中获取数据，成功时不会出现错误。

数据的获取位置写在 gatsby-config.js 中。您可以直接进行编辑修正，但由于Gatsby.js中包含了dotenv，您也可以创建一个 .env 文件进行覆盖。

WPGRAPHQL_URL="[プロジェクトWordPressのURL]/graphql"

// dotenvの利用を上部に追加
require("dotenv").config()

重新启动Gatsby.js网站时，将替换项目的发布数据。起始程序只提供了发布列表和发布页面，因此您需要复制它们并创建静态页面和自定义发布。

将GitHub仓库与Netlify或Vercel关联并绑定域名是一种简单的方法，但如果部署目标已确定，可以使用CircleCI等工具进行构建和部署。

现在，我们使用大家熟悉的WordPress来创建内容，同时通过Jamstack进行Web开发基础的构建。让我们一起享受创建出快速网站的成果！

GraphQL API for WordPress | WPGraphQL