ushiyaDevLog

iPhoneとかMacとか、家電とか、筋トレとか、なんか色々

Gatsby Programming

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

更新日:

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

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

https://example.com/blog/post.html

のようになります。

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

ということで、buildする際にPath Prefixというものをつける必要があります。この場合では「/blog/」です。

たとえば画像のパス

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

という構成の場合。

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

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

ROOT/images/sample.png

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

ROOT/blog/images/sample.png

へのリンクとなります。

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

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

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

gatsby build --prefix-paths

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

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

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

まとめ

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

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

AD

[広告]

AD

[広告]

-Gatsby, Programming
-,

Copyright© ushiyaDevLog , 2020 All Rights Reserved Powered by STINGER.