Vue + Vite で作成した静的サイトを GitHub Pages に公開する

✅ 前提条件

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

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

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

npm install -g pnpm

🚀 公開までの流れ

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

🛠 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 権限がない ことが原因の可能性があります。

✅ 対処手順

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

✔ 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 を有効化

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

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

✅ 公開完了！

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

💡 補足情報

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

📚 参考リンク

• Vite 公式：静的デプロイ
• GitHub Pages 公式
• peaceiris/actions-gh-pages
• pnpm 公式