Gatsbyのtheme pluginを作成する時のセットアップ手順をまとめました。公式で紹介されている方法の方が後々便利かもしれませんが、とりあえずtheme作ってみたい人にはこういった方法があるよ！という感じの手順です。

yarnのworkspace機能を使用する

theme pluginを実際のGatsbyプロジェクトで読み込みながら開発するためにyarnのworkspaceという機能を使用します。これはnpmにはありませんのでyarnをインストールして進んでください。

ルートプロジェクトのセットアップ

まず空のフォルダでpackage.jsonを作成するために初期化を行います。

yarn init -y

package.jsonの内容を必要な情報に書き換えてください。workspaces機能を使用するためprivateは必須となります。

{
  "name": "gatsby-theme-sample-root",
  "version": "0.0.1",
  "main": "index.js",
  "license": "MIT",
  "author": "",
  "private": true,
  "workspaces": [
    "site",
    "gatsby-theme-sample"
  ]
}

theme plugin作成環境とtheme pluginテスト環境の作成

上記のpackage.jsonではworkspacesにsiteとpackagesを設定しました。siteがtheme pluginのテスト環境でpackages配下には作成するtheme pluginのプロジェクトを設置します。

下記のようにフォルダを構築します。作成するthemeの名前はgatsby-theme-sampleとします。

.
├── gatsby-theme-sample
└── package.json

フォルダを作成したらworkspacesの設定を書いたpackage.jsonがある階層で次のコマンドを打ちます

cd gatsby-theme-sample
yarn init -y

これでthemeの作成環境にpackage.jsonが配置されます。

.
├── gatsby-theme-sample
│   └── package.json
└── package.json

themeの開発時はworkspaceからライブラリの追加や削除などを行います。gatsbyなど最低限のライブラリを導入します。

yarn workspace gatsby-theme-sample add react react-dom gatsby

theme pluginテスト環境の作成

次にtheme pluginをテストする環境を作成します。公式のGatsby Starterをそのまま持ってくるのが速いです。workspaceのpackage.jsonがある階層で下記のコマンドを打ちます。

gatsby new site https://github.com/gatsbyjs/gatsby-starter-hello-world

siteフォルダ内にHello Worldが表示されるプロジェクトが展開されるます。このプロジェクトのpackage.jsonのnameをworkspaceで指定した名前に変更します

{
  "name": "site",
  // ... 省略

gatsby-config.jsで作成するpluginを読み込みます。

// gatsby-config.js
module.exports = {
  plugins: [`gatsby-theme-sample`]
}

開発環境を立ち上げます。

yarn workspace site develop

hello worldページが表示されます。

theme pluginにaboutページを追加する

siteプロジェクトにはindex以外のページはありません。/aboutにアクセスすると404になります。siteページ内にaboutページを追加すると表示されますが、gatsby-theme-sampleで実装すればそれを読み込んでいるsiteプロジェクトでも/aboutページが追加されます。gatsby-theme-sample階層にaboutページを追加します。

.
├── gatsby-theme-sample
│   ├── index.js
│   ├── package.json
│   └── src
│       └── pages
│           └── about.js

// about.js
import React from "react"
export default function Home() {
  return <div>About</div>
}

/aboutにアクセスするとAboutと表示されるはずです。これでtheme pluginの開発環境のセットアップが完了です。あとはgatsby-theme-sampleに機能を追加して、siteでその機能が有効になっているのかを確認しながら開発できます。