[Gatsbyで構築] サブディレクトリで公開する簡単な方法

Gatsbyで構築したページをドメインのサブディレクトリで公開する場合、リンクするすべてパスにサブディレクトリの名前を追加する必要があります。

たとえば、自分のドメインのサブディレクトリでブログを運営する場合。
ブログのアドレスは、

のようになります。

Gatsbyで何の設定もせずにbuildしたものをそのままblogディレクトリに入れても、エラーが出まくって大変です。なぜなら、ルートディレクトリはexample.comになるからです。

ということで、buildする際にPath Prefixというものをつける必要があります。

この場合では

です。

たとえば画像のパス

ROOT
├ src/
│ └ index.js
├ images/
│ └ sample.png

という構成の場合。

index.jsというファイル内に「../images/sample.png」というように画像を読み込む文があるとします。

何も設定せずにbuildすると、

となりますが、path prefixで「/blog」を指定しておけば、

へのリンクとなります。

準備としてgatsby-config.jsにすること

module.exports = {
  pathPrefix: `/blog`,
}

このようにpathPrefix: `/blog`を追加します。

ビルド時にオプションをつける

のように–prefix-pathsを追加します。

–prefix-pathを追加しないと、gatsby-config.jsに追加したpathPrefixは無視されます。

ビルド後にpublicの中身をすべて公開予定のサブディレクトリに入れたら完了です。

まとめ

gatsby-config.jsに「pathPrefix: `/blog`」を追加して、「–prefix-paths」をつけてビルドする。

サイト内リンクにGatsbyのLinkコンポーネントを使っている場合は、それにもpath prefixが追加されます。Linkコンポーネントを使っていると便利です。

詳しくはAdding a Path Prefixをご覧ください。
こちらのページで勉強しました。