Nodachisoft Nodachi Sword Icon
  
@あまじ✎ 2020年10月21日に更新

Gatsbyブログの環境変数でブログ記事の公開、非公開を制御する機能をつける方法

当サイトは Gatsby でマークダウンを利用してブログを公開してます。Wordpress でいうところの非公開記事みたいな概念があったら便利だなーということで、実装した流れを記録してます。

やりたいこと

ブログのページ毎(マークダウンで書いてる .md ファイルごと)に公開、非公開フラグを設けて、本番で公開するときは gatsby build コマンドでで公開フラグのものだけをページ生成する。(md を拡張した MDX とかでも同じようにしたい)

ローカルで記事を書いてる時は、非公開の記事も実際にブラウザ上で確認したい。

前提

gatsby ブログが動いている状態であること。

公式がパッケージ(gatsby-starter-blog)を用意してくれているので、ご参照。

(英語)公式 Gatsby - gatsby-starter-blog

実行した時の環境・参考

  • Gatsby バージョン 2.24.9
  • node.js バージョン 12.18.2(LTS)
  • React バージョン 16.13.1

実装方法

二つの機能を加えて実現します。

  • ブログ記事事に、公開・非公開フラグをつける
  • 開発と本番を区別して、開発なら公開・非公開フラグを無視して全部ページ出力

ブログ記事事に、公開・非公開フラグをつける

マークダウンファイルの先頭にある---で囲まれた行のデータ(Frontmatterといいます)に、 公開・非公開をあらわすフラグ項目を追加します。

下の用にマークダウンに新しく項目 publish を追記します。

sample.md(MarkdownのFrontmatterに追加)
---
path: '/common/jp/article/jp000021/'
title: Gatsbyブログの環境変数でブログ記事の公開、非公開を制御する
published: true  ← この行を追加
---

当ブログは・・・略

この新しく追加したフラグ「publish」を使って下のような動作にします。

  • 項目「publish」が true なら公開状態。開発でも本番で見えるよ!
  • 項目「publish」が false なら非公開状態。開発でしか見えないよ!

ページ生成時に publish の項目を取得できるようにする

gatsby でページを生成するとき、gatsby-node.js の中で createPage 関数を使って生成しています。 すでにブログページ生成しているのであれば、 gatsby-node の中で GraphQL クエリでマークダウン・ファイルからデータを取得しているかとおもいますので、取得するデータとして、GraphQL の Frontmatter に publish を追加してあげます。

gatsby-node.js(抜粋)のGraphQLクエリに追記
graphql(`
  query {
    allMarkdownRemark(
      sort: { order: ASC, fields: [frontmatter___date] }
    ) {
      edges {
        node {
          frontmatter {
            title
            path
            published       : 略
      }
    }
  }`).then(blogData => {
    const blogPageData = blogData.data.allMarkdownRemark.edges
        : 略

これで gatsby-node.js の中で published フラグが見えるようになりました。 以下、フラグが見えることを確認する例。

gatsby-node.js(抜粋)例
blogPageData.forEach(({node}) => {
  console.log("title=" + node.frontmatter.title)
  console.log("published=" + node.frontmatter.published)
})

ページ生成時に開発環境と本番環境を判断する

開発(gatsby develop)と本番環境(gatsby build)を区別するには、環境変数を使います。

Gatsby では gatsby develop での動作時と gatsby build もしくは gatsby serve でビルドしてるときを環境変数 process.env.NODE_ENV で識別できます。

動作コマンド 環境変数 process.env.NODE_ENV
gatsby develop development
gatsby build production
gatsby serve production

※公式の文章には環境変数の中身にはいる "development" や "production" の頭文字は大文字で記載されてますが、実際に自前で動作させたとき、入っている値はは全部英文字小文字でした。 ですので、事実にしたがって小文字で記載。環境によって変わるかもなので、一度、小文字変換をかけてから比較したほうが良いのかもです。

ページ生成の分岐

Gatsby でページを生成するときは、gatsby-node.js ファイルで createPage 関数を使っているかと思います。この createPage 実行前に条件分岐いれときます。

gatsby-node.js(抜粋)
// ブログの各ページを生成
blogPageData.forEach(({ node }) => {

  if ( !node.frontmatter.published          && process.env.NODE_ENV === 'production') {     console.log(`Page SKIP  :[${node.frontmatter.title}]`);    return;  }  console.log(`Page CREATE:[${node.frontmatter.title}]`);
  createPage({ 
    node.frontmatter.path,
    component: blogPageTemplate,
    context: { path: node.frontmatter.path } })
})

こんな感じです。 非公開フラグが立ってて、本番なら createPage は呼ばないというだけ。

ブログ一覧画面などがある場合はそちらでも環境変数を落ちいた判断を加えてあげます。

サイトマップ生成に「gatsby-plugin-sitemap」プラグインを使っている場合は createPage を呼ばないことで、対象画面を外せるので、特に対応は不要です。

これでブログがより書きやすくなりました。

おしまい。

参考

変更履歴

  • 2020/10/21 Cover、eyecatch 独自画像作成
  • 2020/07/24 初版公開
 
 
送信しました!

コメント、ありがとうございます。

なんかエラーでした

ごめんなさい。エラーでうまく送信できませんでした。ご迷惑をおかけします。しばらくおいてから再度送信を試していただくか、以下から DM などでご連絡頂ければと思います。

Twitter:@NodachiSoft_jp
お名前:
 
連絡先:
 
メッセージ:
 
戻る
内容の確認!

以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください

お名前:
 
連絡先:
 
メッセージ:
 
Roboto からの操作ではないという確認のため確認キーを入れてください。
確認キー=95
戻る
 / 
送信確認へ
コメント欄
コメント送信確認へ

関連ありそうな記事(5件)です!

Gatsby でマークダウンの文章を手軽に装飾する(下線とかマーカーを引く、太字にするなど)

#Gatsby✎ 2021-01-30
Gatsby のマークダウンで手軽に装飾する方法を記載。下線を引く、マーカーを引く、太字にする、点線を引くなどを html タグを省略して文章の一部に適用する。
広告領域
追従 広告領域
目次
Gatsbyブログの環境変数でブログ記事の公開、非公開を制御する機能をつける方法
Gatsbyブログの環境変数でブログ記事の公開、非公開を制御する機能をつける方法
やりたいこと
やりたいこと
前提
前提
実行した時の環境・参考
実行した時の環境・参考
実装方法
実装方法
ブログ記事事に、公開・非公開フラグをつける
ブログ記事事に、公開・非公開フラグをつける
ページ生成時に publish の項目を取得できるようにする
ページ生成時に publish の項目を取得できるようにする
ページ生成時に開発環境と本番環境を判断する
ページ生成時に開発環境と本番環境を判断する
ページ生成の分岐
ページ生成の分岐
参考
参考
変更履歴
変更履歴
Nodachisoft © 2020