Gatsbyで運用するブログに下書き機能を追加しました。
Front Matterに下書きステータスを追加して・・・という方法もあるようですが、
今回の目的は「編集中の記事を公開したくない」だけなので、実装が簡単な公開用と下書き用でディレクトリを分けて記事を格納する方法で対応します。

環境

Gatsby Starter Blog を使用したGatsby製ブログ。

公開用と下書き用のディレクトリをつくる

gatsby-starter-blogの記事格納場所はcontent/blogディレクトリです。
デフォルトで3つの記事が用意されており、以下のようになっています。

├─ /content
│  ├─ /blog
│      ├─ /hello-world
│      ├─ /my-second-post
│      └─ /new-beginnings

content/blogを公開用ディレクトリとし、別で下書き用のディレクトリをcontent/blogと同じ階層につくります。
下書き用のディレクトリをdraftとします。
また「my-original-post」という記事の下書きをはじめたとすると以下のような配置になります。

├─ /content
│  ├─ /blog
│  │   ├─ /hello-world
│  │   ├─ /my-second-post
│  │   └─ /new-beginnings
│  └─ /draft
│      └─ /my-original-post

下書き用ディレクトリに格納した記事を本番環境以外では生成する

ちょっとまどろっこしい表現ですが、要するにcontent/draftに格納した記事を以下のようにしたいです。

• 開発環境：見える
• 本番環境：見えない

これを言い換えると、

• gatsby develop：記事を表示（生成）
• gatsby build：記事は生成しない

gatsby-config.jsで設定する

段階をおってgatsby-config.jsを編集していきます。とはいえ、2STEPです。

まず、デフォルトで記述されているmodule.exportsを、一旦変数に格納します。

gatsby-config.js

const config = {
  siteMetadata: {
    /* 略 */
  },
  plugins: [
    /* 略 */
  ],
}

module.exports = config

次に、環境変数を使って、本番環境以外ではcontent/draftの記事を生成する記述を追加します。
Gatsbyの環境変数については以前の記事が参考になれば幸いです。

gatsby-config.js

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
})

const config = {
  siteMetadata: {
    /* 省略 */
  },
  plugins: [
    /* 省略 */
  ],
}

if ( process.env.NODE_ENV !== 'production' ) {
  const draftConfig = {
    resolve: `gatsby-source-filesystem`,
    options: {
      path: `${__dirname}/content/draft`,
      name: `draft`,
    },
  }
  config.plugins.push(draftConfig)
}

module.exports = config

参考サイト

Gatsby：記事に下書きステータスを付与して本番環境では公開・生成させない方法 – NxWorld