1. theNewWave

    No comment

    theNewWave
Changes in body
Source | HTML | Preview
@@ -1,77 +1,77 @@
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を入力。
+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