使用HeadlessCMS(WordPress)和Gatsby.js制作的网站，在Netlify上发布的步骤

我整理了在静态网页托管服务“Netlify”上发布使用Gatsby.js制作的网站的步骤。

[WordPress]头无主CMS和Gatsby.js制作网站的备忘录已整理为另一篇文章《Headless CMS(WordPress)和Gatsby.js制作网站的备忘录》。

将本地的WordPress数据迁移到托管的WordPress。

使用WordPress插件”All-in-One WP Migration”。

• localではexport機能でファイルをダウンロード

hostingされたWordPressでそのファイルをimport

为了增大文件大小，需要编辑.httaccess和wp-config.php文件。

部署准备

• netlifyのアカウント作成

• Production branchをmasterにする

• GithubのRepositoryを指定(Gitlab、Bitbucketも可)

• Build commandを設定(例: gatsby build)

Publish directoryを指定(例: public/)

设定环境变量

• netlifyのEnvironment variablesでhostingされているWordPressのAPI_PROTOCOLとAPI_URLを指定

• .envファイルにlocal環境のAPI_PROTOCOLとAPI_URLを指定

gatsby-config.jsで下記設定

require("dotenv").config({
  path: '.env',
});
{
  resolve: "gatsby-source-wordpress",
  options: {
    baseUrl: process.env.API_URL,
    protocol: process.env.API_PROTOCOL,
  }
}

自动在 public 文件夹中生成 _headers 文件和 _redirects 文件。

• npmのpackagegatsby-plugin-netlifyをinstall

gatby-config.jsのpluginに追加

通过WordPress的发布保存来触发构建。

add_action('save_post', 'netlify_build');

function netlify_build() {
    wp_remote_post({netlifyのsetting/Build hooksに設定したURL});
}

迷上了这个点。

按照上述的步骤进行构建，可以成功，但是部署时会出现以下错误。

Path: /wp-json
The server response was "403 Forbidden"
error "gatsby-source-wordpress" threw an error while running the sourceNodes lifecycle:
Cannot read property 'data' of undefined

TypeError: Cannot read property 'data' of undefined

這是因為這個網站使用了租借伺服器的「X Server」，所以發生了這個錯誤，因為它不允許從海外IP訪問到wp-json。
因此需要允許來自國外IP地址的訪問。
關於伺服器 ＞ WordPress安全設定 ＞ 國外IP訪問限制設定

参考网站
由于我将博客从WordPress迁移到Gatsby，所以在此解释迁移的步骤和遇到的问题。