はじめに

Webサイト構築の手段として、WordPressのようなCMSが定番ですが、最近は静的サイトジェネレーターを利用したサイトも増えて来ています。
開発者やデザイナが運営するサイトを除けば、まだまだ一般に普及しているとは言い難いですが、静的サイトジェネレーター単独の記事やWordPressとの比較はよく見かけるようになりました。

今回は静的サイトジェネレーターの１つである Gatsby.js を調査していたところ、プラグインに gatsby-source-wordpress というものがあり、WordPress JSON REST API をデータ取得元とできることを知り、公式のサンプルをベースにGithubPageへの公開まで試してみることにしました。

あくまでAPIによる連携程度でWordPressの置き換えには至らないとは思いますが、比較ではなく連携という点で興味深く、まだ日本語記事もほとんど見つからなかったのでQiitaで記事にしてみました。

また、WordPressではReactを利用したテーマがあまりないですが、Gatsbyは標準でReactを利用してページ作成するのでReactユーザーがWordPressを使ったシステムを構築しようとする際の選択肢になるかもしれません。

なお Gatsby.js 自体についての詳細は本記事では省きますが、静的サイトジェネレーターとしては比較的シェアがあり、Node.js、Reactを利用している点などが特徴で、興味がある方は公式サイトなど参考にしていただければと思います。

1. Gatsby.jsのインストール

公式Get startedの通り

npm install -g gatsby

ここでGet startedを進めチュートリアルまで読んでおくとより理解しやすいと思います。

2. ローカル環境でGatsby.js の example の using-wordpress を起動してみる

using-wordpressをダウンロードしてまずはサンプルをそのまま利用してみます。

cd /path/to/using-wordpress
npm install
npm run develop

でサンプルが確認できます。
ただしデータ取得元はサンプルとして用意された他人のWordPressなのでこれを自分のWordPressに置き換える必要があります。

3. 自前のWordPress(wordpress.com)と連携させる

接続先のWordPress変更

gatsby-config.js の以下を編集します。
URLは新規作成した直後のWordPressのURLを指定してみます。

gatsby-config.js

baseUrl: 'gatsbyjsexamplewordpress.wordpress.com',

変更後gatsbyを起動します。

npm run develop

するとブラウザに下記のようなエラーが表示されます。

TypeError: this.props.data is undefined

render
webpack:///src/pages/index.js:14

(以下略)

コンソールにも色々メッセージが出ていますが、下記に注目します。

Unknown field tags on type wordpress__POST

これですがサンプルコードが必要としているレスポンスが取得出来ないことが原因でした。
接続先に指定したWordPressの更新を行います。

tagの作成

既存投稿に新規タグを作成して追加しました。

サンプルが指定した固定ページが存在しない

上記エラーが解消すると以下のメッセージが表示されました。

TypeError: currentPage is null

render
webpack:///src/pages/index.js:30

pages/index.jsのコードを追って見ると

this.props.data.wordpressPage

の値が取れていないことが原因のようです。

そこからGraphQLのクエリ

pages/index.js

// Set here the ID of the home page.
export const pageQuery = graphql`
  query homePageQuery {
    wordpressPage(id: { eq: "PAGE_5" }) {

にたどり着き、特定のIDの固定ページが存在しないことが原因と判明しました。
サンプルではここに指定したIDの固定ページがホームに指定されています。

https://public-api.wordpress.com/wp/v2/sites/dummy.wordpress.com/pages

API(URLはダミーなのでご自身のWordPressで置き換えてください)から存在する固定ページのIDを確認し、上記GraphQLのクエリを修正します。

pages/index.js

// Set here the ID of the home page.
export const pageQuery = graphql`
  query homePageQuery {
    wordpressPage(id: { eq: "PAGE_2" }) {

これで自前のWordPressへの置き換えが出来ました。

最後に

少し長くなったので今回はここまでにして、続きとしては

自前でインストールしたWordPressへの置き換え
htaccess制限したWordPressへの接続
レイアウトのカスタマイズや機能追加
Githubページへのデプロイ

などを予定しています。

静的サイトジェネレーター Gatsby.js のプラグインを使い WordPress JSON REST API をデータ取得元としたサイト構築を試す [1]