preactで作ったプログラムをGitHub Pagesにデプロイできない問題を解決する

前提

preactで作ったアプリをGitHub Pagesにデプロイしようとしたのだが、JSやCSSが読めない問題が起きている。
F12を押すと、JSのコンソールには「MIME タイプ (“text/html”) が許可されていないため、"{{URL}}" からのモジュールの読み込みがブロックされました。」と出ていて、ネットワークのタブを見てもJSとCSSのリクエストが404でコケていた。

まずは「MIME タイプ (“text/html”) が許可されていないため、"{{URL}}" からのモジュールの読み込みがブロックされました。」というエラーメッセージに関して検索する。すると以下の記事が出てきた。

https://qiita.com/baby-0105/items/0356b0af4ab4585d86c4

記事を読むと、パスに問題があることが判明。

もう一度、F12のネットワークタブに戻ると、https://eniehack.github.io/assets/にあるファイルを読みに行っていた。私はeniehack.github.ioというリポジトリを持っていないので、https://eniehack.github.io/assets/には何もないため404を返しているようだ。
GitHub Pagesはデプロイ先がhttps://{{GitHubのユーザ名}}.github.io/{{repo名}}となるので、JSやCSSの参照を/{{repo名}}/assets/{{ファイル名}}などにする必要がありそう。

preactでviteを使い、GitHub Pagesへデプロイする方法はgh_pagesブランチに成果物をコミットする方式しか見当たらなかったので、reactの場合ではどうだろうかと思い、検索すると、以下の記事が出てきた。

https://dev.to/rashidshamloo/deploying-vite-react-app-to-github-pages-35hf

この記事によれば、vite.config.tsを以下のように編集すればよいと書いてあった:

export default defineConfig({
  base: "/YOUR_REPOSITORY_NAME",
  plugins: [react()]
})

ということで、vite.config.tsを書きかえればよいことがわかった