GatsbyJSでbuildしたHTMLで、Linkタグの遷移先が開けない

Question

目的

小規模なチームで使用するポータルサイトを作りたいと思っています。要件は次の通りです。

• ネットには公開せず、LAN内で参照したい（NASに置くなど）。
• コンテンツの更新頻度は低い。
• 管理者以外はIT知識がなくても閲覧できるようにしたい。
• ヘッダーやサイドメニューなどは共通化したい。
• Webサーバがなくても動くようにしたい。

静的サイトジェネレーターのGatsbyなら上記の要件を満たせるのではないかと思い、Gatsbyで試作しています。

環境

Windows10にて、WSL(Ubuntu)を使って開発しています。ブラウザはGoogle Chromeです。

困っていること

複数のページを作り、<Link>タグでページ間遷移を実装しました。gatsby developで動かすと上手く動作します。しかし、gatsby buildで出力したファイルを次のように開くと、ページ間遷移ができませんでした。

1. gatsby buildで出力したpublicフォルダを、適当な場所（ここではDownloadsフォルダ）にコピーする。
2. publicフォルダ直下のindex.htmlを、エクスプローラからダブルクリックで開く。
3. index.html内に<Link>タグで設定したリンクをクリックすると、「ファイルにアクセスできませんでした」と表示される。

↓トップページ(index.html)は開ける。

↓「このサイトについて」(<Link>タグを設定した箇所)をクリックしても、アクセスできない。

<Link>タグの遷移先が、Cドライブ直下を起点としたパスになってしまったようです（アクセスしたいHTMLが置いてあるのは、C:/Users/石井%20昭裕/Downloads/public/about/index.html）。

質問内容

gatsby buildで出力したページ間の遷移が、うまく機能する方法はあるでしょうか。
それとも、Netlifyのようなホスティングサービスを使用することが前提になるのでしょうか。

Answer 1

gatsby buildで出力したページ間の遷移が、うまく機能する方法はあるでしょうか。

https://www.gatsbyjs.com/docs/quick-start/

$ npm run develop

でサーバを起動し、表示されたURLから開いてください。

それとも、Netlifyのようなホスティングサービスを使用することが前提になるのでしょうか。

おっしゃるとおりで、ローカルのファイルをダブルクリックで開く方法では、正常に遷移するようには動きません。