1. theNewWave

    Posted

    theNewWave
Changes in title
+Gatsby + Netlify + WordPressでHeadless CMS化してみた。
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,64 @@
+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