GitHub Pages 画面が真っ白になる問題の解決策の一つ

はじめに

「GitHub Pages 画面 真っ白」で調べると様々な解決策がでてきますが、そのどれを試してもうまくいきませんでした。
しかし、色々調べて以下の設定にしたところ、無事動いたので、その方法を共有します。

環境

• React（typescript）
• Vite
• gh-pages

解決策

以下を、package.json の deploy の値に追加すると動きました。

--repo https://github.com/<ユーザ名>/<リポジトリ名>.git

実際の形は以下。

package.json

  // 省略
  "homepage": "https://<ユーザ名>.github.io/<リポジトリ名>/",
  "scripts": {
    // 省略
    "deploy": "npm run build && gh-pages -d dist --repo https://github.com/<ユーザ名>/<リポジトリ名>.git"
  },

他のファイルに設定していた内容は以下になります。

vite.config.ts

export default defineConfig({
  plugins: [react()],
  base: '/<リポジトリ名>/',
})

index.tsx

// ルーター部分
function AppRoutes() {
  return (
    <>
      <BrowserRouter basename='/<リポジトリ名>'>
        <Routes>
          <Route path='/' element={<Main />} />
          // 省略
        </Routes>
      </BrowserRouter>
    </>
  );
}

後は、gh-pagesブランチを作り、GitHub上でPagesの設定を行います。
この設定でnpm run deployを行なうと、画面が適切に表示されるようになりました。

以上です。