Help us understand the problem. What is going on with this article?

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に次ぐ人気。
コミュニティも拡大しており、これからを担う主要な静的サイトジェネレーターになっていくと思われる。

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

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

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

theNewWave
Front End Developer working in Osaka, Japan. JavaScript / TypeScript / React / Gatsby / Vue / Nuxt
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした