gh-pages-deploy

GitHub Pages へのデプロイ

GitHub CLI を使って、静的なフロントエンドの Web サイトを GitHub Pages にデプロイします。

前提条件

• GitHub CLI（gh）がインストールされ、認証済みであること
• Git がインストールされていること
• デプロイする準備ができたフロントエンドプロジェクト（HTML、CSS、JS）

デプロイのワークフロー

1. Git リポジトリを初期化する（必要な場合）

git init
git add .
git commit -m "Initial commit"

2. GitHub リポジトリを作成する

# Create public repo (required for free GitHub Pages)
gh repo create <repo-name> --public --source=. --push

3. GitHub Pages を有効にする

# Enable GitHub Pages from main branch root
gh api repos/{owner}/{repo}/pages -X POST -f build_type=legacy -f source='{"branch":"main","path":"/"}'

または、docs フォルダーを使う場合：

gh api repos/{owner}/{repo}/pages -X POST -f build_type=legacy -f source='{"branch":"main","path":"/docs"}'

4. デプロイ状況を確認する

# Get pages info
gh api repos/{owner}/{repo}/pages

# View deployment status
gh api repos/{owner}/{repo}/pages/builds/latest

5. リポジトリの設定でホームページ URL を設定する

必ず実行してください — GitHub リポジトリの「About」パネル（リポジトリページの右上）に公開 URL を設定します。

OWNER=$(gh api user --jq '.login')
PAGES_URL=$(gh api repos/$OWNER/$REPO_NAME/pages --jq '.html_url')
gh api --method PATCH repos/$OWNER/$REPO_NAME --field homepage="$PAGES_URL" --jq '.homepage'

6. サイトの URL を取得する

サイトには次の URL からアクセスできます：https://<username>.github.io/<repo-name>/

自動デプロイが有効です。main へのプッシュのたびに再ビルドが実行されます。レガシービルドには GitHub Actions は不要です。

クイックデプロイスクリプト

一連の流れでデプロイする場合：

# Variables
REPO_NAME="my-site"

# Initialize and commit
git init
git add .
git commit -m "Initial commit"

# Create repo and push
gh repo create $REPO_NAME --public --source=. --push

# Enable pages
sleep 2
OWNER=$(gh api user --jq '.login')
gh api repos/$OWNER/$REPO_NAME/pages -X POST -f build_type=legacy -f source='{"branch":"main","path":"/"}'

# Set homepage URL in repo About panel
PAGES_URL="https://$OWNER.github.io/$REPO_NAME/"
gh api --method PATCH repos/$OWNER/$REPO_NAME --field homepage="$PAGES_URL" --jq '.homepage'

echo "✓ Site live at: $PAGES_URL"

トラブルシューティング

• Pages が有効になっていない：リポジトリが公開されているか、GitHub Pro を利用していることを確認してください
• 404 エラー：デプロイに 1～2 分かかる場合があります。ルートに index.html があるか確認してください
• ビルド失敗：GitHub Actions タブでエラーを確認してください

サイトの更新

変更を加えた後：

git add .
git commit -m "Update site"
git push

GitHub Pages によって自動的に再ビルドされます。