日本語 | English

概要

React + Vite (+ Tailwind) を使ったドキュメントページを GitHub Pages 上へデプロイするまでの流れを記録したものです。
基本的な設定はシェルコマンドで完了します。

サンプルページはこちら

事前インストールが必要なもの

• git cli(インストールはこちら)
• Node.js 20+ および npm（インストールはこちら）

---

セットアップ (React - Vite + Tailwind) 🛠️

1. ローカルへクローンまたはダウンロード

   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

2. ページを作成したいリポジトリにスクリプトをコピー

   cp setup-react-vite.sh /path/to/YourGitRepo/
   cd /path/to/YourGitRepo/

3. パーミッション付与

   chmod +x setup-react-vite.sh

4. セットアップ用コマンドの実行（名前は任意） フロントエンドをルート以下の別フォルダに作成したい場合

   # ./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>

5. ローカルでテスト 作成されたプロジェクトフォルダへ移動し、ローカルで実行してください。
   localhost:5173 でアクセスできるはずです。

   cd <PROJECT_NAME>
   npm run dev

---

デプロイ

• 1(A). 新しくリポジトリを作成する場合

  1. 初期コミット:

  git init
  git add .
  git commit -m "Initial commit"

  2. リポジトリ作成:

  gh repo create --public --source=.

  3. プッシュ:

  git branch -M main
  git push -u origin main

• 1(B). 既存リポジトリへコミットしてプッシュする場合

  1. コミットとプッシュ:

  git add .
  git commit -m "add react vite app"
  git push origin main

• 2. アプリをデプロイする

  1. React アプリケーションフォルダへ移動:

  cd <PROJECT_NAME>

  2. GitHub Pages 用にビルドとデプロイ 事前に build も行われ、dist フォルダの中身のみがデプロイされます。

  npm run deploy

  3. 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/