# GitHub Pages セットアップ手順

## 📝 手動セットアップ（推奨）

### 1. GitHubリポジトリを作成

1. https://github.com/new にアクセス
2. 以下の設定でリポジトリを作成:
   - **Repository name**: `api-workflow-builder`
   - **Description**: `🚀 Visual API Workflow Builder - No-code page builder`
   - **Public** を選択
   - **Initialize this repository with** は全てチェックなし
3. **Create repository** をクリック

### 2. コードをプッシュ

PowerShellで以下を実行:

```powershell
cd C:\xampp\htdocs\localProject\api-workflow-builder

# Gitの初期設定（まだの場合）
git config user.name "Your Name"
git config user.email "your@email.com"

# リモートリポジトリを追加
git remote add github https://github.com/YOUR-USERNAME/api-workflow-builder.git

# mainブランチに変更してプッシュ
git branch -M main
git push -u github main
```

**注意**: `YOUR-USERNAME` を実際のGitHubユーザー名に置き換えてください

### 3. GitHub Pagesを有効化

1. リポジトリページ（https://github.com/YOUR-USERNAME/api-workflow-builder）を開く
2. **Settings** タブをクリック
3. 左サイドバーの **Pages** をクリック
4. **Source** セクションで:
   - Branch: `main`
   - Folder: `/ (root)`
5. **Save** をクリック

### 4. 公開URLを確認

1-2分後、以下のURLでアクセス可能:
```
https://YOUR-USERNAME.github.io/api-workflow-builder/
```

ページビルダーは:
```
https://YOUR-USERNAME.github.io/api-workflow-builder/index.html
```

---

## 🤖 自動セットアップ（GitHub Tokenが必要）

### 1. GitHub Personal Access Token を取得

1. https://github.com/settings/tokens/new にアクセス
2. 設定:
   - **Note**: `api-workflow-builder`
   - **Expiration**: `No expiration` (または任意の期限)
   - **Select scopes**: 
     - ✅ `repo` (Full control of private repositories)
     - ✅ `workflow` (Update GitHub Action workflows)
3. **Generate token** をクリック
4. トークンをコピー（⚠️ 二度と表示されません）

### 2. デプロイスクリプトを実行

```powershell
cd C:\xampp\htdocs\localProject\api-workflow-builder
python deploy_github.py
```

プロンプトが表示されたら、コピーしたトークンを入力

---

## ✅ 確認事項

デプロイ後、以下を確認:

1. **リポジトリが作成されているか**
   - https://github.com/YOUR-USERNAME/api-workflow-builder

2. **GitHub Pagesが有効か**
   - Settings → Pages → "Your site is live at..." のメッセージが表示される

3. **ページが表示されるか**
   - https://YOUR-USERNAME.github.io/api-workflow-builder/index.html
   - GrapeJSエディタのサイドバーが表示される
   - ブロックがドラッグ&ドロップできる

---

## 🔧 トラブルシューティング

### リポジトリが既に存在する

```powershell
# 既存のリモートを削除
git remote remove github

# 新しいリモートを追加
git remote add github https://github.com/YOUR-USERNAME/api-workflow-builder.git

# 強制プッシュ
git push -u github main -f
```

### GitHub Pagesが404エラー

1. Settings → Pages で正しく設定されているか確認
2. 1-2分待ってから再度アクセス
3. リポジトリが Public になっているか確認

### index.htmlが表示されない

直接URLにアクセス:
```
https://YOUR-USERNAME.github.io/api-workflow-builder/index.html
```

---

## 📚 参考リンク

- [GitHub Pages ドキュメント](https://docs.github.com/en/pages)
- [Personal Access Token 作成](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)