ITエンジニアの種籾(たねもみ)

IT技術とか株式投資とか。

Gatsby.js で作成したブログサイトのプログラムと記事を分ける

2020年 07月 20日

目次

Gatsby.js で作成したブログサイトのプログラム部分と記事などのコンテンツ部分の管理を分けるために、 ディレクトリ構成と、それに伴う Gatsby.js の設定を変更します。

gatsby-starter-blogでサイトのプロジェクトを作成すると、 記事(./content)と、それ以外のファイル群である Gatsby.js のサイトの設定や React コンポーネントのプログラムが混在しています。

記事の管理とそれ以外の Gatsby.js のサイトの管理を分けたいので、設定やディレクトリ構成を見直していきます。

分ける目的の1つは、記事とコンポーネントなどのソースの Git の管理を別にするためです。 記事はプライベートにして、ソースはパブリックにしたいと考えています。

もう1つは、記事のみのプロジェクトを常に開いておき、ソースのプロジェクトは必要なときにだけ開きたいからです。

目標はこんな感じのディレクトリ構成で管理できることです。

分割後のディレクトリ構成

では、早速、コンテンツとソースを分離していきます。

記事(content)の設定はどこ?

記事の格納場所の設定はgatsby-config.jsのソースプラグインにあります。

下記の部分です。

plugins: [
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      path: `${__dirname}/content/blog`,
      name: `blog`,
    },
  },
];

この${__dirname}/content/blogを別のディレクトリに移動したいのです。 この設定だと、Gatsby.js のサイトのプロジェクトのルートディレクトリから見て、./content/blogのパスになっています。

絶対パス、相対パスで指定できるか確かめる

まずは、どんなパスの書き方が有効なのか確かめてみました。

  • path: `/Users/crz33/workspace/crz33-contents/blog`, : 問題なし!!
  • path: `${__dirname}/../crz33-contents/blog`, : 問題なし!!

フルパスも相対パスも大丈夫でした。

相対パスが使えたので、相対パスのほうを使うことにしました。

プログラムとコンテンツを分けたディレクトリ構成

下記のようにディレクトリプログラム(crz33-gatsby)とコンテンツ(crz33-contents)を分けました。

分割後のディレクトリ構成

プログラムとコンテンツを分けるための最終的な設定

記事の Markdown ファイルを読み込むソースプラグイン(gatsby-source-filesystem)の設定と、 SEO のためのマニフェストのプラグイン(gatsby-plugin-manifest)で使っているアイコンのパスを相対パスに変えました。

plugins: [
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      path: `${__dirname}/../crz33-contents/blog`,
      name: `blog`,
    },
  },
  {
    resolve: `gatsby-plugin-manifest`,
    options: {
      name: `Gatsby Starter Blog`,
      short_name: `GatsbyJS`,
      start_url: `/`,
      background_color: `#ffffff`,
      theme_color: `#663399`,
      display: `minimal-ui`,
      icon: `${__dirname}/../crz33-contents/assets/gatsby-icon.png`,
    },
  },
];

これでプログラムとコンテンツを別々のフォルダで管理することができるようになりました。

以上です。

広告