日本語 | English
React + Vite (+ Tailwind) を使ったドキュメントページを GitHub Pages 上へデプロイするまでの流れを記録したものです。
基本的な設定はシェルコマンドで完了します。
サンプルページはこちら
- git cli(インストールはこちら)
- Node.js 20+ および npm(インストールはこちら)
-
ローカルへクローンまたはダウンロード
git clone https://github.com/testkun08080/ReactVite-On-GithubPage.git cd ReactVite-On-GithubPage
またはスクリプトのみダウンロード
curl -o setup-react-vite.sh https://raw.githubusercontent.com/testkun08080/ReactVite-On-GithubPage/main/setup-react-vite.sh
-
ページを作成したいリポジトリにスクリプトをコピー
cp setup-react-vite.sh /path/to/YourGitRepo/ cd /path/to/YourGitRepo/
-
パーミッション付与
chmod +x setup-react-vite.sh
-
セットアップ用コマンドの実行(名前は任意) フロントエンドをルート以下の別フォルダに作成したい場合
# ./setup-react-vite.sh SampleProject ReactVite-On-GithubPage testkun08080 ./setup-react-vite.sh <PROJECT_NAME> <REPO_NAME> <USER_NAME>
もしくは新しいリポジトリのルートをフロントエンドと同じにしたい場合
# ./setup-react-vite.sh ReactVite-On-GithubPage ReactVite-On-GithubPage testkun08080 ./setup-react-vite.sh <PROJECT_NAME> <REPO_NAME> <USER_NAME>
-
ローカルでテスト 作成されたプロジェクトフォルダへ移動し、ローカルで実行してください。
localhost:5173
でアクセスできるはずです。cd <PROJECT_NAME> npm run dev
-
- 初期コミット:
git init git add . git commit -m "Initial commit"
- リポジトリ作成:
gh repo create --public --source=.
- プッシュ:
git branch -M main git push -u origin main
-
- コミットとプッシュ:
git add . git commit -m "add react vite app" git push origin main
-
- React アプリケーションフォルダへ移動:
cd <PROJECT_NAME>
- GitHub Pages 用にビルドとデプロイ
事前に build も行われ、
dist
フォルダの中身のみがデプロイされます。
npm run deploy
- GitHub Pages の確認
GitHub Actions で deploy が完了しているか確認してください。
Settings > Pages > Visit Site でアプリケーションが正常に表示されるか確認してください。
または、以下のような GitHub Pages の URL(ご自身のプロジェクトに合わせて)で最終確認してください:https://USER_NAME.github.io/REPO_NAME/
こちらはこのリポジトリのサンプルです。
https://testkun08080.github.io/ReactVite-On-GithubPage/