💻

ReactViteをGitHubPageにデプロイするまでの流れ

2025/06/13に公開

 はじめに色々webで発信するにあたって無料で使えるGitHubPageを使用する手はないですよね。

ということで、レポの作成からGitHubPageとしてデプロイするまでの流れをここに記録します。

React + Vite (+ Tailwind )を使ったページをデプロイします。

 サンプルページこちらで紹介する記事の最後には、おそらく以下のような画面が表示されます

以下は事前に用意したサンプルページになります。

https://testkun08080.github.io/ReactVite-On-GithubPage

 レポだけみたい方はこちら。https://github.com/testkun08080/ReactVite-On-GithubPage

 事前準備git cli(インストールはこちら)
npm Node.js 20+ (インストールはこちら)

 セットアップ以下にシェルスクリプトを使った手順と、一つ一つステップを踏んで行う手順を記載します。
A(シェルスクリプト使用)
B(手動)

 A.シェルスクリプトを使う 🤖簡単ステップ🤖
ローカルへクローンまたはダウンロード
git clone https://github.com/testkun08080/ReactVite-On-GithubPage.git
cd ReactVite-On-GithubPage
またはスクリプトsetup-react-vite.shのみダウンロード
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
セットアップ用コマンドの実行（名前は任意）

フロントエンドをルート以下の別フォルダに作成したい場合
/gitrepo
└─ frontendapp
   └─ src
# ./setup-react-vite.sh SampleProject ReactVite-On-GithubPage testkun08080
./setup-react-vite.sh <PROJECT_NAME> <REPO_NAME> <USER_NAME>
もしくは新しいリポジトリのルートをフロントエンドと同じにしたい場合
/frontendapp(gitrepo)
└─ src
# ./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


 B.手動で一つずつ踏みながらやってみる ✊理解を深めたい方✊
まずターミナルを開いて、プロジェクトネームを設定します
PROJECT_NAME=react-vite-app
REPO_NAME=repo-name
USER_NAME=user-name
自分の GitHubページのURL設定
HOMEPAGE_URL="https://${USER_NAME}.github.io/${REPO_NAME}/"
React-ViteProjectの設定
npm create vite@latest "$PROJECT_NAME" -- --template react
プロジェクトへ移動し、モジュールをインストール
cd "$PROJECT_NAME"
npm install
npm install react-router-dom
npm install gh-pages --save-dev
ホームページをpackage.jsonへ追加します
jq --arg homepage "$HOMEPAGE_URL" \
'.homepage = $homepage | .scripts += {"predeploy": "npm run build", "deploy": "gh-pages -d dist"}' \
package.json > package.tmp && mv package.tmp package.json
Tailwind CSSをインストール
npm install -D tailwindcss @tailwindcss/vite postcss autoprefixer
npx tailwindcss init
Tailwind の設定ファイルを変更
cat <<EOL > tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
   "./index.html",
   "./src/**/*.{js,jsx,ts,tsx,html}",
],
theme: {
   extend: {},
},
plugins: [],
};
EOL
Tailwind CSSをindex.css へ追加
cat <<EOL > src/index.css
@import "tailwindcss";
EOL
tailwindcssをプラグインとしてviteへ追加
cat <<EOL > vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
plugins: [
    react(),
    tailwindcss(),
],
base: /$REPO_NAME/
})
EOL
起動!!!
npm run dev
うまく起動すれば、localhost:5173/<PROJECT_NAME>へブラウザからアクセスしてみてください。


 デプロイ一応２通りの方法を記載しています。

既存のレポへの追加か、それとも新しく作るかの違いです。
A(新しくリポジトリを作成)
B(既存レポジトリへコミット)

 1(A). 新しくリポジトリを作成する場合初期コミット:
git init
git add .
git commit -m "Initial commit"
リポジトリ作成:
gh repo create --public --source=.
プッシュ:
git branch -M main
git push -u origin main


 1(B). 既存リポジトリへコミットしてプッシュする場合
コミットとプッシュ:git add .
git commit -m "add react vite app"
git push origin main



 2. アプリをデプロイする
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/


 まとめwebをただ使うだけだった僕にとって、これは良いチュートリアルとなりました。

また誰かの手助けになれば幸い。

もし間違っているところなどあればコメントください。
それではまた！

はじめに

サンプルページ

レポだけみたい方はこちら。

事前準備

セットアップ

A.シェルスクリプトを使う 🤖

B.手動で一つずつ踏みながらやってみる ✊

デプロイ

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

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

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

まとめ

Discussion