前準備

Github、netlifyのアカウントを作成しておく

Github

新しいレポジトリを作成。プライベートでOK。

Gatsby インストール

npm install -g gatsby-cli

cd 任意のディレクトリ

gatsby new レポジトリ名 https://github.com/GatsbyCentral/gatsby-starter-wordpress

gatsby-config.js を編集

baseUrlにWordPressのインストールされているドメインを入力、サブディレクトリにインストールしている場合はディレクトリも含める。

module.exports = {
  siteMetadata: {
    title: 'Gatsby + WordPress Starter',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sass',
    {
      resolve: 'gatsby-source-wordpress',
      options: {
        // The base url to your WP site.
        baseUrl: 'xxx.com',
        // WP.com sites set to true, WP.org set to false
        hostingWPCOM: false,
        // The protocol. This can be http or https.
        protocol: 'https',
        // Use 'Advanced Custom Fields' WordPress plugin
        useACF: false,
        auth: {},
        // Set to true to debug endpoints on 'gatsby build'
        verboseOutput: true,
        includedRoutes: [
          "**/categories",
          "**/posts",
          "**/pages",
          "**/media",
          "**/taxonomies",
          "**/users",
          "**/tags",
        ],
      },
    },
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    {
      // Removes unused css rules
      resolve:'gatsby-plugin-purgecss',
      options: {
        // Activates purging in gatsby develop
        develop: true,
        // Purge only the main css file
        purgeOnly: ['/all.sass'],
      },
    }, // must be after other CSS plugins
    'gatsby-plugin-netlify', // make sure to keep it last in the array
  ],
}
        baseUrl: 'WordPressインストールドメイン',

または

        baseUrl: 'WordPressドメイン/インストールディレクトリ',

開発サーバー

gatsby develop

// IPアドレス・ポートを指定したい場合
gatsby develop -H 192.168.100.x -p 8000

ビルド

gatsby build
// ビルドに失敗する場合
gatsby clean
git remote add origin https://github.com/ユーザー名/リポジトリ.git

// プライベートリポジトリの場合
git remote add origin https://xxx@github.com/ユーザー名/リポジトリ.git

.gitignore から publicをコメントアウト

# public

add, commit して push

netlify

所有ドメインを使う場合はレジストラのDNSにCNAME レコードを追加

New site from Git で新しくGithubと連携。作成したレポジトリを選択。

Build Command「npm run build」

「public」

Build & deploy で Build Hooks > Add Build Hooks

APIをコピーしておく。

Vercel の場合

デプロイ用のフックURLを取得

Setting > Git > Deploy Hooks > Create Hook

Hook name: 任意

Branch: master

WordPressのJAMstack Deployments の 「Build hook URL」に貼り付け

WordPress

すでに構築している状態。

プラグイン「JAMstack Deployments」をインストール

APIにさきほどのAPIを貼り付ける。

記事を投稿・更新すると自動でデプロイされる。

参考

https://qiita.com/theNewWave/items/160ee83e06d008e4bf4d

https://haniwaman.com/gatsby/