Skip to content

testkun08080/ReactVite-On-GithubPage

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 

Repository files navigation

日本語 | English

概要

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

サンプルページはこちら

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


セットアップ (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"
    1. リポジトリ作成:
    gh repo create --public --source=.
    1. プッシュ:
    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>
    1. GitHub Pages 用にビルドとデプロイ 事前に build も行われ、dist フォルダの中身のみがデプロイされます。
    npm run deploy
    1. 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/

About

ReactVite-On-GithubPage

Resources

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

  •  

Packages

No packages published