Vite+ReactのプロジェクトをGitHub Pagesにデプロイする

以下のページに従ってVite+Reactプロジェクトを作成したあと、そのページをGitHub Pagesにデプロイする方法を書いておきます。
https://ja.vitejs.dev/guide/

前提

ローカル上ではViteプロジェクトを動かせている、すなわちnpm run devで起動したらlocalhost上でアクセスできる状態にあるとします。

gh-pages のインストール

まずgh-pagesというライブラリをインストールしておきます。このライブラリはGitHub Pagesのデプロイ手順を自動化してくれるものです。

npm install gh-pages --save-dev

スクリプトの設定

package.jsonにスクリプトを設定します。distはビルドされたファイルの出力先です。

package.json

{
  ...
  "scripts": {
    ...
    "deploy": "gh-pages -d dist"
    ...
  },
  ...
}

リポジトリの設定

vite.config.js（vite.config.ts）のbaseにGitHubのリポジトリ名を設定します。
もし既にGitHub上にリポジトリが存在しているならその名前を設定します。そうでないなら好きな名前をつけられますが、後ほど作成するリポジトリにも同じ名前をつけます。今回はreact-testとします。スラッシュを忘れないようにしてください。

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/react-test/'
})

ビルド&デプロイ

プロジェクトディレクトリでビルドとデプロイを実行します。

npm run build
npm run deploy

GitHubリポジトリの作成+プッシュ

ビルドされたファイルをGitHubのリポジトリにプッシュします。まだ作成していない場合はここで作成してください。その際名前はvite.config.tsのbaseと揃えます。今回はreact-testとします。
特別な手順は必要なく、一般的なGitの操作になるのでここでは説明を割愛します。

GitHub Pagesの設定

作成したリポジトリのSettings > Pagesを開きます。
Branchの項目でgh-pagesと/(root)を選択し、saveを押します。

Visit Siteはデプロイ完了後に表示されます

公開

セーブするとActionsタブでデプロイの様子が見られます。緑色のOKが出たらデプロイ完了です。
完了後にSettingsを開くと一番上にURLが表示されるのでVisit Siteを押します。
ローカルで表示されたページと同じものが表示されたらデプロイ完了です！

デプロイ完了と出ても数分間は反映されないことがあります。

---

以上で終了です。
ちなみにViteはヴィートと読むらしいですが、どうしても脳内でバイトと読んでしまいます。