前準備
Github、netlifyのアカウントを作成しておく
Github
新しいレポジトリを作成。プライベートでOK。
Gatsby インストール
npm install -g gatsby-cli
cd 任意のディレクトリ
gatsby new レポジトリ名 https://github.com/GatsbyCentral/gatsby-starter-wordpressgatsby-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をコメントアウト
# publicadd, 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を貼り付ける。
記事を投稿・更新すると自動でデプロイされる。