Wordpressで作成したサイトをもうちょっとお手軽にメンテできないかと思って調べたところ、Gatsbyでできそうだったので試してみました。
やり方
概要
Wordpress
Wordpressを作成します。 今回は過去に個人的に作成した、友人のバンドのサイトを題材として使わせて頂きました。
サイトの構造は以下のとおりです。
前提として、Postのカテゴリーにliveとblogがあります。
またサイドバーなどのウィジェット類についてはGatsby移行対象外とします。
- top: 固定ページ
- member: 固定ページ
- live: カテゴリページ
- 個別記事
- blog: カテゴリページ
- 個別記事
- voice: 固定ページ
Wordpress プラグイン
Wordpressに以下を追加します
この時点で{Wordpress-site}/graphqlにアクセスできるようになっているはずです。
https://puregthree.com/graphql
Gatsby作成
Gatsbyの雛形を作成します
$ gatsby new {任意の名前} https://github.com/TylerBarnes/using-gatsby-source-wordpress-experimental
こちらではプラグインとしてgatsby-source-wordpress@v4 BETAを使用しているので状況によっては動作しない可能性があります。 ※ 2020/10/28時点での正常動作を確認しています。
gatsby-config.jsの下記を変更します。
require("dotenv").config({
path: `.env.GATSBY_CONCURRENT_DOWNLOAD`,
})
// require .env.development or .env.production
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
})
module.exports = {
plugins: [
`gatsby-plugin-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/assets/images`,
},
},
{
resolve: `gatsby-source-wordpress-experimental`,
options: {
url:
process.env.WPGRAPHQL_URL ||
`https://puregthree.com/graphql`, # <--- ここをWordpress側のGraphQLのURLに設定する
verbose: true,
develop: {
hardCacheMediaFiles: true,
},
debug: {
graphql: {
writeQueriesToDisk: true,
},
},
type: {
Post: {
limit:
process.env.NODE_ENV === `development`
? // Lets just pull 50 posts in development to make it easy on ourselves.
500 # <--- デフォルトだと50ページまでしか取得しないので状況によって増やしたりする
: // and we don't actually need more than 5000 in production for this particular site
5000,
},
},
useACF: true,
},
},
`gatsby-plugin-chakra-ui`,
`gatsby-transformer-sharp`,
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /\.inline\.svg$/, // See below to configure properly
},
},
},
`gatsby-plugin-netlify-cache`,
],
}
これでWordpressからデータを取得できるようになります。
ローカルでGatsbyを立ち上げてみます。
$ yarn develop
立ち上がりました。
がliveとblogが404になります。 カテゴリページが取得できてないからですね。
Gatsbyページ追加
カテゴリページを作成します。
pages配下にblog.js, live.jsを新規作成します。
WPのデータからcategoryで絞り込んだpostのid,url,titleの一覧を取得しています。
import React from 'react' import { Heading, Box } from '@chakra-ui/core'; import Layout from '../../components/layout'; export default ({data}) => ( <Layout> <Box> <Heading as="h1" size="xl">Live List</Heading> <ul> {data.allWpPost.edges.map( (edge) => ( <li key={edge.node.id}> <a href={edge.node.uri}> {edge.node.title} </a> </li> ))} </ul> </Box> </Layout> ) export const query = graphql` { # live / blog でフィルターをかける allWpPost(filter: {categories: {nodes: {elemMatch: {slug: {eq: "live"}}}}}, sort: {order: DESC, fields: date}) { edges { node { id uri title } } } } `
再度Gatsbyを起動します。
今度は無事に表示できました。
今回は環境を構築することを主としているので、ページ作成はこれで完了とします。
Deployする
本記事ではNetlifyを使いました。
下記にデプロイしました。 （こちらは後で削除予定です。）
https://vibrant-lamport-4d47b2.netlify.app/
ビルドの連携
ホスティングまでできたので今度は自動化していきます。
やりたいことはWordpressが更新されるのをトリガーにしてGatsbyをビルド＆デプロイすることです。
Netlify
事前にBuildHookを設定しておき、URLを確認します。
Wordpress プラグイン
以下のプラグインを追加します。
- JAMstack Deployments: Wordpressの更新をトリガーにデプロイHookを呼び出せるようになります
導入後、設定 > Deployments画面でビルド設定をしていきます。
これで設定は完了です。
Wordpress側を更新するとNetlify上でGatsbyが再ビルドされたことがわかります。
今回はテストで テストpost というタイトルのpostを投稿しました。
（あとで削除します。）
変更がNetlify側に反映されました。
メリット
デメリット
まとめ
まだ商用Production環境に投入するのは厳しいと思いますが、個人ブログ等でCMSとしてWordpressを残したいがコーディングではPHPを直接触りたくない、jsで完結させたいということであれば試してみる価値はあると思います。
また、この場を借りて協力して頂いたpure g threeには感謝をお伝えします。
