✅ 前提条件

以下の環境が整っていることを前提とします：

GitHub アカウントを保持している
公開対象の GitHub リポジトリが作成済み（例: my-vue-app）
Vue + Vite で構築された静的サイトである
パッケージマネージャーとして pnpm を使用している（npm ではない）

🔧 まだ pnpm をインストールしていない場合は、以下で導入可能です：
npm install -g pnpm

🚀 公開までの流れ

vite.config.ts / vite.config.js に base を設定
pnpm build で dist/ フォルダを作成
GitHub Pages 用ブランチ（gh-pages）にデプロイ
GitHub 上で Pages を有効化
公開サイトを確認

🛠 `vite.config.ts` / `vite.config.js` に `base` を設定

リポジトリ名が my-vue-app の場合：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: '/my-vue-app/', // ← GitHub リポジトリ名に合わせて指定
})

💡 base を設定しないと、GitHub Pages 上で CSS や JS が読み込まれずに真っ白になることがあります。

🏗 `dist/` フォルダをビルド

pnpm build

これで dist/ フォルダが作成されます。GitHub Pages にはこの中身が公開されます。

🚚 GitHub Pages にデプロイ

以下のどちらかの方法を選びます。

✅ 方法1：GitHub Actions による自動デプロイ（おすすめ）

.github/workflows/deploy.yml を作成：

name: Deploy Vite app to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 8

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 20

      - run: pnpm install
      - run: pnpm build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

🔧 - name: などの行頭に 全角スペースが含まれると GitHub Actions が失敗するため、必ず半角スペースを使用してください。

🛠 補足：GitHub Actions の push 権限不足エラーについて

GitHub Actions 実行時に以下のようなエラーが出ることがあります：

Error: Action failed with "The process '/usr/bin/git' failed with exit code 128"

これは GITHUB_TOKEN に push 権限がない ことが原因の可能性があります。

✅ 対処手順

対象リポジトリの GitHub ページを開く
[Settings] → [Actions] → [General] に移動
下の方にある Workflow permissions を確認
以下のように設定：

✔ Read and write permissions

これで GitHub Actions が gh-pages ブランチに push できるようになります。

🔁 方法2：手動で `gh-pages` ブランチに push（非自動）

git checkout --orphan gh-pages
git --work-tree dist add . -f
git --work-tree dist commit -m 'deploy'
git push origin HEAD:gh-pages --force
git checkout main

⚠️ --orphan により履歴がない新しいブランチが作成されます。作業ブランチを間違えないように注意してください。

⚙ GitHub Pages を有効化

GitHub の対象リポジトリにアクセス
[Settings] → [Pages] を開く
Branch を gh-pages に設定（/root を選択）
保存すると、公開 URL が表示されます

例：
https://ユーザー名.github.io/my-vue-app/

✅ 公開完了！

上記の URL にアクセスして、Vue + Vite のアプリが正しく表示されていれば成功です！🎉

💡 補足情報

内容	補足
SPA でルーティングを使用している	`404.html` を `index.html` にリダイレクトする設定が必要な場合あり
独自ドメインを使いたい	`dist/CNAME` にドメイン名を記述（例：`example.com`）
`pnpm-lock.yaml` の管理	チーム開発ではロックファイルを Git 管理に含めることを推奨

📚 参考リンク