GatsbyでヘッドレスWordPress

Over40WebClub主催の勉強会でとりあげたテーマです。

管理者のピータンさんの提案で講師をさせていただいたので、その過程を残そうと思います。その時にできたブログがこれー＞ぼちぼちブログ＠Gatsby。

ここに至るまでにはpitangさんにメンターのごとく伴奏していただきました。ありがとうございました！今後、勉強会で作ったブログをカスタマイズして、いずれ、このWordPressをヘッドレスにして、GatsbyJSのブログをメインにしていきたいと思います。

なぜ、今、WordPress　×　Gatsbyか
ヘッドレスWordPressとは？
Gatsby+WPによるヘッドレスWPサイト構築の概要
１　WPプラグインのインストール
２　公式スターターを使用してGatsbyサイトの生成・設定
Netlifyへデプロイ
ビルドウェブフックの設定
まとめ

なぜ、今、WordPress　×　Gatsbyか

新しいプラグインの発表。

ヘッドレスWordPressとは？

WordPressは「このページ表示して」という要求に応じて、サーバー側でデータベースから必要なデータをとってきます。これが首から下の部分です。

それを表示できるデータにしてブラウザに渡して表示します。これ頭（ヘッド）

今回は、WordPressから事前にデータだけをもらって（ヘッドレスWordPress）、ヘッドの部分を別の技術を用いて（今回は静的サイトジェネレーターGatsby）つくるということです。

今回はこの「ヘッドレスWordPress」に対して、WordPressだけで運用しているサイトのことを「バニラWordPress」と呼ぶことにします。

WordPressとGatsbyをつなぐのが、REST API　や　GraphQLでデータを取得することができます。

今回は最近注目されているクエリ言語であるGraphQLを使います。

クエリ言語：問い合わせ言語。データに対して問い合わせて必要なデータを抽出したり、並べ替えたりするための言語。SQLとか。

Gatsby+WPによるヘッドレスWPサイト構築の概要

WPプラグインのインストール
公式スターターを使用してGatsbyサイトの生成・設定
WPサイトへの接続
Netlify にデプロイする
GraphQLを使ってコンポーネントを構築する

１　WPプラグインのインストール

検索してインストールします。

WPGraphQL

WordPressサイトにGraphQLのスキーマ及びAPIを提供す

WPGatsby

WordPressサイトをGatsbyへのデータ源として最適化する。

２　公式スターターを使用してGatsbyサイトの生成・設定

gatsby-starter-wordpress-blog を使って、新規gatsbyプロジェクトを生成 → gatsby-source-wordpress v4 チュートリアルより
```
$ gatsby new bochibochi-blog <https://github.com/gatsbyjs/gatsby-starter-wordpress-blog>
```
プロジェクトフォルダへ移動　→ VScodeでプロジェクトを開く
```
cd bochibochi
code .  
```
- code .コマンドはMacの場合、事前の設定が必要な場合があります。
  1. command + Shift + P でコマンドパレットを開く
  2. shell で検索
  3. シェルコマンド:PATH内に’code’コマンドをインストールします。 Shell command : Install ‘code’ commnad in PATH
- VSCode内でターミナルを開いておきましょう。
  ターミナル → 新しいターミナル　または　control + Shift + ^

環境変数WPGRAPHQL＿URLの設定

gatsby-config.jsを開きます。

環境変数 WPGRAPHQL_URLの初期値を設定する。

resolve: `gatsby-source-wordpress`,
      options: {
     // the only required plugin option for WordPress is the GraphQL url.
        url:
          process.env.WPGRAPHQL_URL ||
          `https://wpgatsbydemo.wpengine.com/graphql`,
      },

以下のように変更

resolve: `gatsby-source-wordpress`,
      options: {
     // the only required plugin option for WordPress is the GraphQL url.
        url:
	　　　process.env.WPGRAPHQL_URL ||
          `https://horumont.info/graphql`
      },

開発環境で表示してみましょう
```
gatsby develop
```
Git操作
1. git add .
2. git commit -m "first initial"
GitHubにリポジトリ作成してPush　ー＞　GitHubCLIを使ってみます。
1. gh repo create bochibochi
2. git branch -M main
3. git push -u origin main

Netlifyへデプロイ

Netlifyへログイン
New site from Git → サービス選択（ぼくはGitHub）
リポジトリ選択
各種設定
Gatbyサイトならビルドするブランチやディレクトの設定はおおむね自動でやってくれます。
Deploy Site→Site settings→Change site name
なんやかやとしているうちにデプロイ終了します。アドレスをクリックして確認してみましょう！

ビルドウェブフックの設定

Site overviewからSite settingsへ
Build & Deploy → Build hooks
1. Add build hooksをクリック
2. Build hook name　はどのサイトのフックか分かる名前を設定します。
3. Branch to build は基本的にmainでOK
4. Saveをクリック
WordPress管理画面での設定
1. 設定→GatsbyJS
2. Build Webhookのところに、Netlifyで生成されたURLを貼り付けます
3. 更新
設定終了。WordPressでかんたんな記事を投稿するか、更新すれば、ウェブフックがきいて自動でデプロイされます。NetlifyのDeployタブを開いておくと、その様子が見て取れます！

まとめ

先日参加した勉強会

【静的サイトジェネレーター】Gatsby.js に一緒に入門しよう vol.2

では、アメリカではGatsby人気で、これから日本でも徐々に浸透し始めてる、いや、すでに火が付き始めているといました。

ぼくもそう思います。WordPress一択の今の日本のウェブ業界の課題にこたえるGatsbyJSは、今まさに勉強する価値のあるテーマです。一度、自分のWordPressからGatsbyサイトをつくってみてはいかがでしょうか！