概要
CMS なしで Gatsby で本番公開前の記事を確認する場合、gatsby develop で起動しローカルで確認することが多いと思います。
そして、記事はまだ公開したくないけど、コミットしておきたいという場面もあると思います。
今回はその対処法を考えました。
個人的最適解
外部サービスを使って管理対象を増やしたくない、最短最速最小の変更でなんとかしたいと考えた結果です・・・
- 未公開フォルダを作成し、そこに記事のマークダウンを放り込む。
- gatsby-node と gatsby-config に設定を追加。
これだけです。
gaysby のファイルだけ変更しているので、本体のコードを汚すことがありません。
記事ファイル１つずつに判定用の項目を追加する必要もないので、記事が増えても判定のオーバーヘッドが増えたりすることもないですね。
未公開フォルダの作成
公開フォルダと同じ階層に作成しました。
パス指定をするので、どこでも大丈夫です。
gatsby-node と gatsby-config に設定を追加
gatsby-config.ts
// 未公開フォルダ
export const unpublishedPosts = "content/_unpublished"
/**
* 省略
*/
// 開発環境のみ実施
if (process.env.NODE_ENV === "development") {
config.plugins?.push({
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/${unpublishedPosts}`,
name: `unpublished`,
},
},)
}
gatsby-node.ts
const publishedPosts = "content/blog"
const filterFileAbsolutePath = `/(${publishedPosts})|(${unpublishedPosts})/`
const result = await graphql(
`
query BlogPosts($filterFileAbsolutePath: String!)
{
allMarkdownRemark(
sort: { fields: [frontmatter___date], order: DESC }
limit: 1000
filter: { fileAbsolutePath: { regex: $filterFileAbsolutePath } }
) {
...省略...
}
}
`,{filterFileAbsolutePath}
)疑問
gatsby-node.js 内の createPages に渡される”graphql”と各ページで使用するパッケージ gatsby から import する”graphql”って別の物なんですね 🤔