WordPress
Netlify
gatsby
HeadlessCMS

Gatsby + Netlify + WordPressでHeadless CMS化してみた。

WordPressの表示速度を改善するために、フロントエンドで静的サイトジェネレーターを使う事にした。

英語では「Static site generator」。

使用したジェネレーターはReactベースで爆速の表示速度が魅力的な、Gatsby。

ワックスやジェルとかでお世話になった某メーカーではない。

ほぼ自分用メモ。


使用したもの

Gatsby

https://www.gatsbyjs.org/

Best of JavaScript (https://bestofjs.org/tags/ssg/) ではNext.jsに次ぐ人気。

コミュニティも拡大しており、これからを担う主要なSSGとなっていくと思われる。

gatsby-starter-wordpress

https://www.gatsbyjs.org/starters/GatsbyCentral/gatsby-starter-wordpress/

GatsbyのWordPress用のテンプレート。gatsby.configで色々設定するだけ。簡単。

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の設定

https://www.gatsbyjs.org/docs/quick-start

npm install -g gatsby-cliでグローバルにインストール。

あとは、リポジトリ保存してるディレクトリで

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

と叩いて、スターターをインストール。

インストールできたら、gatsby.configを開いて、

baseUrl, protocol, hostingWPCOM, useACF, verboseOutputを入力。

baseUrlにWordPressインストールしてるUrlを入力。

protocolにはhttpかhttpsかを入力。

hostingWPCOMはWP.comにホスティングしているならtrue、

useACFはAdvanced Custom Fieldsを使っているならtrueにする。

verboseOutputはそのままでいい。ちなみにtrueにした。

ここまで出来たら、コミットしてプッシュしておく。


WordPressの設定

上述のJAMstack Deploymentsをローカルに落として、インストール。

インストールしたら右上にメニュー出てくるので、クリックして、先ほど生成したAPIキーを入力。

で、投稿とか固定ページとか、更新したらビルド&デプロイして欲しいページをチェックする。

ちなみに投稿と固定ページにチェック入れた。

あとは投稿増やしたりしたら、自動的にビルドされて、フロントエンドが更新される。

終わり。


最後に

はじめは、Gatsbyでwordpress用のstarterがある!と喜んだが、

それだけでは、毎回毎回、手動でデプロイしなければいけない事に気付き、一気に萎えた。

だが、前述のJAMstack Deploymentsがあったお陰で、自動ビルド&デプロイ出来、

WordPressのHeadlessCMS化を本格的にできるようになった。プラグイン作者に感謝。

以下の記事も似たような事が書かれているので、参考に。

https://qiita.com/yahsan2/items/39eb9e3e19f72257084c