以下のページに従って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はビルドされたファイルの出力先です。
{
...
"scripts": {
...
"deploy": "gh-pages -d dist"
...
},
...
}
リポジトリの設定
vite.config.js（vite.config.ts）のbaseにGitHubのリポジトリ名を設定します。
もし既にGitHub上にリポジトリが存在しているならその名前を設定します。そうでないなら好きな名前をつけられますが、後ほど作成するリポジトリにも同じ名前をつけます。今回はreact-testとします。スラッシュを忘れないようにしてください。
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はヴィートと読むらしいですが、どうしても脳内でバイトと読んでしまいます。