質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
Gatsby

Gatsbyとは、Reactベースの静的サイトジェネレータ。最新のフロントエンド技術を活かし、機能豊富なWebサイトやアプリケーションを作ることが可能です。GraphQLを用いてあらゆるソースからサイトのデータを取得。指定した設定に基づいて静的サイトを構築することができます。

Q&A

解決済

1回答

2398閲覧

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

AkihiroIshii

総合スコア67

Gatsby

Gatsbyとは、Reactベースの静的サイトジェネレータ。最新のフロントエンド技術を活かし、機能豊富なWebサイトやアプリケーションを作ることが可能です。GraphQLを用いてあらゆるソースからサイトのデータを取得。指定した設定に基づいて静的サイトを構築することができます。

0グッド

0クリップ

投稿2021/02/18 08:15

目的

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

  • ネットには公開せず、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のようなホスティングサービスを使用することが前提になるのでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

$ npm run develop

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

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

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

投稿2021/02/19 02:14

kazto

総合スコア7196

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問