WordPressの表示速度を改善するために、フロントエンドで静的サイトジェネレーターを使う事にした。
英語では「Static site generator」。
使用したジェネレーターはReactベースで爆速の表示速度が魅力的な、Gatsby。
ワックスやジェルとかでお世話になった整髪料ブランドではない。
ほぼ自分用メモ。
使用技術
Gatsby
https://www.gatsbyjs.org/
Best of JavaScript (https://bestofjs.org/tags/ssg/) ではNext.jsに次ぐ人気。
コミュニティも拡大しており、これからを担う主要な静的サイトジェネレーターになっていくと思われる。
gatsby-starter-wordpress
https://www.gatsbyjs.org/starters/GatsbyCentral/gatsby-starter-wordpress/
GatsbyのWordPress用のテンプレート。
gatsby-source-wordpress（https://www.gatsbyjs.org/packages/gatsby-source-wordpress/）
をベースに作られている。
gatsby.configで色々設定するだけ。簡単。
テンプレートからではなく、一からサイトを作りたい場合は、gatsby-source-wordpressを既存のプロジェクトにnpm installして色々設定した方が良い。
Netlify
https://www.netlify.com/
クライアント側はNetlifyでホスティング。
Webhookを使って、後述のJAMstack Deploymentsで自動デプロイ。
JAMstack Deployments
https://github.com/crgeary/wp-jamstack-deployments
WordPressのプラグイン。これを入れて、NetlifyのBuildhooksで出たAPIキーを管理画面に入力するだけ。
あとはNetlify側で自動ビルド。
環境構築
Netlifyと連携取るために、まずはGithubアカウントを作成する。
アカウントを作れたら、Netlifyに行き、Netlifyのアカウントを作成。
あとは適当にGithubでリポジトリ作って、Netlifyでリポジトリ選ぶだけ。
Settings->Built & deployで Build hooksがあるので、そこでAPIキー生成しておく。
WordPressサイトも用意しておく。
Gatsbyの設定
npm install -g gatsby-cli
でグローバルにインストール。
あとは、リポジトリ保存してるディレクトリで
gatsby new リポジトリ名 https://github.com/gatsbyjs/gatsby-starter-wordpress
と叩いて、スターターをインストール。
グローバルにgatsby-cliをインストールしたくない（グローバル環境汚染したくない）場合は、
npxを使うと良い。私は基本npxを使っている。
npx gatsby new リポジトリ名 https://github.com/gatsbyjs/gatsby-starter-wordpress
インストールできたら、gatsby.configを開いて、
baseUrl, protocol, hostingWPCOM, useACF, verboseOutputを入力。
baseUrlにWordPressをインストールしてるUrlを入力。※http://〜以降の部分。
protocolにはhttpかhttpsかを入力。
hostingWPCOMはWP.comにホスティングしているならtrue、
useACFはAdvanced Custom Fieldsを使っているならtrueにする。
verboseOutputはビルドするときのメッセージを表示するかの設定。
エラーメッセージとかを細かく表示して確認したいなら、true。
別に何も表示しなくて良いのなら、falseで構わない。
ここまで出来たら、コミットしてプッシュしておく。
WordPressの設定
上述のJAMstack Deploymentsをローカルに落として、インストール。
インストールしたら右上にメニュー出てくるので、クリックして、先ほど生成したAPIキーを入力。
で、投稿とか固定ページとか、更新したらビルド＆デプロイして欲しいページをチェックする。
ちなみに投稿と固定ページにチェック入れた。
あとは投稿増やしたりしたら、自動的にビルドされて、フロントエンドが更新される。
終わり。
最後に
はじめは、Gatsbyでwordpress用のstarterがある！と喜んだが、
それだけでは、毎回毎回、手動でデプロイしなければいけない事に気付き、一気に萎えた。
だが、前述のJAMstack Deploymentsがあったお陰で、自動ビルド＆デプロイ出来、
WordPressのHeadlessCMS化を本格的にできるようになった。プラグイン作者に感謝。
以下の記事も似たような事が書かれているので、参考に。
https://qiita.com/yahsan2/items/39eb9e3e19f72257084c