GatsbyでWordPressのTwenty Nineteenテーマをつかう

WordPressのデフォルトテーマ「Twenty Nineteen」をGatbsyで使えるようにしたという猛者が現れた様子なので、早速触ってみました。

環境

今回テストに使った環境はこちらです。

$ node -v
v10.16.0

$ npm -v
6.9.0

Step1: Gatsbyのセットアップ

まずはGatsbyでプロジェクトを作成します。スターターとして利用できる状態でしたので、そのままインポートしちゃいましょう。

$ npx gatsby new wp-2019 https://github.com/northstack/gatsby-wordpress-twenty-nineteen

$ cd wp-2019/

セットアップが終わった状態がこちら

$ npx gatsby new wp-2019 https://github.com/northstack/gatsby-wordpress-twenty-nineteen

$ cd wp-2019/

$ tree -I node_modules
.
├── LICENSE
├── README.md
├── config.example.js
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── package-lock.json
├── package.json
├── src
│   ├── components
│   │   ├── comment-form.js
│   │   ├── comment-list.js
│   │   ├── comment.js
│   │   ├── footer.js
│   │   ├── header.js
│   │   ├── icons
│   │   │   ├── clock.js
│   │   │   ├── comment.js
│   │   │   ├── folder.js
│   │   │   └── person.js
│   │   ├── layout.js
│   │   └── seo.js
│   ├── pages
│   │   ├── 404.js
│   │   └── index.js
│   ├── styles
│   │   └── style.css
│   └── templates
│       ├── author.js
│       ├── category.js
│       ├── page.js
│       └── post.js
└── yarn.lock

6 directories, 28 files

Step2: WPの情報を入力

GatsbyがWordPressの記事データをAPI経由で取得する形で実装されています。

そのため、設定ファイルでインポートしたいサイトのURLなどを入力する必要があります.

$ mv config.example.js config.js
$ vim config.js

const Config = {
/* ここから */
    source: {
        protocol: 'http',
        baseUrl: 'source.example.com',
    },
/* ここまで */
    destination: {
        protocol: 'http',
        baseUrl: 'localhost:8000',
    },
    commentList: {
        dynamic: true,
    },
    dynamicPosts: false,
};

Config.source.url = Config.source.protocol + '://' + Config.source.baseUrl;
Config.destination.url = Config.destination.protocol + '://' + Config.destination.baseUrl;

module.exports = Config;

Step3: WP GraphQLプラグインのインストール

このプロジェクトは、WordPressの記事データをWP GraphQLプラグインが生成するエンドポイントから取得します。

GitHubのReleaseから最新バージョンを選択してzipファイルをダウンロードしましょう。

WordPress管理画面から、zipをアップロードすることでインストールできます。

インストール後はプラグインの有効化とパーマリンクの変更（plain以外にする）を忘れず実施します。

以下のようにGraphQLのエラーがくるようになれば準備完了です。

$ curl https://source.example.com/graphql 

{
  "errors": [
    {
      "message": "Missing \"Content-Type\" header",
      "category": "request"
    }
  ]
}

Step4: サイトの表示

ここまで準備ができたら、いよいよGatsbyで表示させましょう。

$ yarn start

デフォルトではhttps://localhoist:8000にアクセスすることでサイトが見れます。

触ってみての雑感

GitHubのReadmeにも記載されていますが、ページネーションやコメントなど、まだまだ実装中の機能が多いプロトタイプです。

ですが、このような形でWordPressのテーマと同じように使えるものがあるということは、選択肢が増えてとても良いなと思いました。