WordPress(headlessCMS)+Gatsbyの折衷案的なブログを作ろうとしている話

7495 ワード
SSG JAMstack WordPress gatsby WordPress テキストリンク

概要

WordPressをheadlessCMSとして使い、フロントをGatsbyで作る構成に魅力を感じたのでつくってみることにしました。

この記事では既存のWordPressブログにある記事をローカルでGatsbyで表示するところまでやります（それ以上のことは勉強中なのでまた後日）

WordPress(headlessCMS)+Gatsbyの構成を選んだ理由

非IT人材にブログ更新をやってもらいたい場合、contentfull,microCMSなどでは難しいだろうと判断したからです。

使い慣れたWordPressで記事投稿をしてもらいつつ、フロント側をGatsbyでつくってサイトのパフォーマンスを上げるという折衷案的な使い方ができるとおもってこの構成を選びました。

ちなみにWordPressの記事更新をフックとして自動デプロイもできるのであとでやろうと思います。

必要なもの

・WordPressサイトのドメイン
・wp-graphql（プラグイン）
・wp-graphiql（プラグイン）
・gatsby-cli

手順

1.WordPressと連携するようのプロジェクトを作成

gatsby new [プロジェクト名] https://github.com/GatsbyCentral/gatsby-starter-wordpress

2.gatsby-config.jsを編集

編集する項目はbaseUrlとincludedRoutes
baseUrlにはWordPressで運用しているサイトのドメインを記入

gatsby-config.js
module.exports = {
  siteMetadata: {
    title: 'Gatsby + WordPress Starter',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sass',
    {
      resolve: 'gatsby-source-wordpress',
      options: {
        // The base url to your WP site.
        baseUrl: 'WordPressサイトのドメイン',
        // WP.com sites set to true, WP.org set to false
        hostingWPCOM: false,
        // The protocol. This can be http or https.
        protocol: 'https',
        // Use 'Advanced Custom Fields' Wordpress plugin
        useACF: false,
        auth: {},
        // Set to true to debug endpoints on 'gatsby build'
        verboseOutput: false,
        includedRoutes: [
          '**/categories',
          '**/posts',
          '**/pages',
          '**/media',
          '**/taxonomies',
          '**/users',
          '**/tags',
        ],
      },
    },
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    {
      // Removes unused css rules
      resolve: 'gatsby-plugin-purgecss',
      options: {
        // Activates purging in gatsby develop
        develop: true,
        // Purge only the main css file
        purgeOnly: ['/all.sass'],
      },
    }, // must be after other CSS plugins
    'gatsby-plugin-netlify', // make sure to keep it last in the array
  ],
}

3.WordPress側をGraphQLに対応

下記の2プラグインをzipとしてDLしてWordPressの管理画面からアップロードして有効化してください。

・wp-graphql
・wp-graphiql

4.Gatsbyをビルドして記事読み込めるか確認

gatsby build

確認

gatsby develop

こんな感じでブログの記事がみれます。

今後のタスク

・TypeScript化
・ブログの見た目かっこよくする
・自動デプロイ

参考サイト

https://haniwaman.com/gatsby/
https://www.gatsbyjs.org/docs/glossary/wpgraphql/