Zenn
🤔

GitHub PagesでWebサイトを公開したら画面が真っ白になる現象を解決する

に公開
React
GitHub Pages
Vite
tech

はじめに

GitHub PagesでWebサイトを公開して、いざリンクを開いてみたら画面が真っ白でした。
試行錯誤を重ねてこの問題を解決できたので、紹介したいと思います。

環境

  • React：19.0.0
  • Vite：6.3.3

状況


GitHub Pagesで自分が作ったWebサイトをデプロイするための設定を行い、サイトのリンクが表示される状態にします。このリンクからサイトを開いてみると、真っ白の画面が表示されるだけでした。この問題を解決していきます。

解決方法

gh-pagesをインストールする

まずは以下のコードをVisual Studio Codeのターミナルで実行します。

npm install gh-pages --save-dev

package.jsonの内容を修正する

次に以下のコードをpackage.jsonに記述します。

"homepage": "https://{GitHubアカウント名}.github.io/{リポジトリ名}/",

"name"や"version"などが記述されているところに同じように書けば問題ないです！
そしてもう1つ、以下のコードをpackage.jsonの"scripts"に記述します。

 "deploy": "npm run build && gh-pages -d dist"

下の画像のような状態になっていれば問題ないです！

vite.config.jsの内容を修正する

vite.config.jsの内容を下の画像のような状態にします。
追加で記述した部分は、

 base: '/{リポジトリ名}/',

です。画像ではportfolioとなっていますが、自身がGitHub Pagesで使用するリポジトリ名に変更して記述してください。

コミット・プッシュ・デプロイする

忘れずにコミットとプッシュをします。最後に、以下のコードをVisual Studio Codeのターミナルで実行してデプロイします。

npm run deploy

GitHub Pagesでブランチを選択する

ここまで完了すると、GitHub Pagesのブランチの選択画面で"gh-pages"が追加されます。これを選択して"Save"を押せば、自分が開発したWebサイトが表示されるようになります！

最後に

私はこの方法で解決することができました。他の方が投稿されている解決方法も試しましたが、私の場合は解決することができませんでした。読んでいただいた方の参考になれば幸いです！最後まで読んでいただき、ありがとうございました。

Discussion