GitHub Pages 上の個人サイト

目標: https://<アカウント>.github.io/ に、高速でアクセシブルな個人サイトを構築します。ユーザーが編集可能な単一のコンテンツファイルから生成し、main ブランチへのプッシュごとに GitHub Actions で公開します。フレームワークも npm 依存関係もないため、どこでもビルドできます。

あらゆる分野の誰にでも役立ちます。サイトはユーザーの言語で作成してください。

厳格なルール

リポジトリ名は正確に <アカウント>.github.io でなければなりません。ここで <アカウント> は、リポジトリを所有する GitHub ユーザー名（または組織名）の小文字です。この名前のみがルート (https://<アカウント>.github.io/) で公開されます。他の名前を使用すると、サブパス (https://<アカウント>.github.io/<リポジトリ>/) で公開され、タイプミスや異なる所有者の場合はルート URL が 404 になります。各アカウントは 1 つのサイトしか持てません。
コンテンツを決して捏造しないでください。 架空の雇用主、日付、肩書き、指標、プロジェクト、リンクを作成してはいけません。事実が不足している場合は、[開始年] のような目に見えるプレースホルダーとともに、ユーザーへの質問を表示します。
個人データは、プッシュされると git の履歴も含めて公開されます。 電話番号、自宅住所、個人メールアドレス、生年月日を公開する前に、必ずユーザーに確認を取ってください。代わりに、市区町村/地域、連絡先リンク、LinkedIn を優先してください。シークレットや .env ファイルは決してコミットしないでください。
GitHub で何かを作成または変更するコマンド（リポジトリ作成、Pages 有効化、プッシュなど）は、初回のみ、何を行うかをユーザーに示した後に実行してください。その他の操作は問題なく実行できます。

前提条件

GitHub CLI がインストールされ、ログインしている必要があります。最初に確認し、失敗したら修正してください。

gh --version                        # インストール: https://cli.github.com
gh auth status                      # ログイン済みか？どのアカウントか？どのスコープか？
gh auth login -h github.com -p https -w          # ログインしていない場合（ブラウザフロー）
gh auth refresh -h github.com -s workflow        # .github/workflows/* のプッシュには workflow スコープが必要
gh api user --jq .login             # アカウント名: リポジトリは <この>.github.io

サイトが組織に属する場合、<アカウント> は組織名で、ユーザーはその組織内でリポジトリを作成する権限が必要です (gh repo create <組織>/<組織>.github.io)。

ステップ 1: 開始地点の確認

ACCOUNT=$(gh api user --jq .login | tr '[:upper:]' '[:lower:]')
REPO="$ACCOUNT.github.io"
gh repo view "$ACCOUNT/$REPO" --json name,visibility,url 2>/dev/null || echo "リポジトリはまだ存在しません"
gh api "repos/$ACCOUNT/$REPO/pages" 2>/dev/null || echo "Pages が有効になっていません"

サイトが含まれたリポジトリが存在する場合: 置き換えるか、維持するか、コンテンツを移行するかを尋ねます。承諾なしに上書きしないでください。
異なる名前（例: portfolio、別のアカウントの MyName.github.io）でリポジトリが存在する場合: 新しいものを作成する代わりに、名前の変更を提案します (gh repo rename <アカウント>.github.io -R <所有者>/<古い名前>)。
無料プランの場合、Pages が機能するにはリポジトリを公開にする必要があります。

ステップ 2: コンテンツの収集（不足分のみ、一回のメッセージで尋ねる）

名前、役割または見出し、市区町村/地域（オプション）、サイトの言語。
自分が何をしているのか、誰に向けたものなのかを 2～3 文で説明し、必要に応じて長めの「自己紹介」を追加します。
経験またはプロジェクト: タイトル、組織、期間、それぞれ 1～2 行。CV、LinkedIn のエクスポート、既存のページが最も迅速な情報源です。
リンク: GitHub（自動入力）、LinkedIn、メールまたは問い合わせフォーム、その他のプロフィール。
数語で要望する外観と、避けたいもの。特に希望がなければ、assets/style.css の標準的なデフォルトを使用します。

回答を content/profile.json に格納します（構造は assets/profile.example.json を参照）。ビルド前にユーザーに JSON を表示し、プレースホルダーをすべてマークします。

ステップ 3: プロジェクトの作成

推奨される構造（レイアウトはどの静的ジェネレーターでも同じように機能します）:

<アカウント>.github.io/
  AGENTS.md                    コーディングエージェント向けの説明（テンプレート: assets/AGENTS.md）
  CLAUDE.md -> AGENTS.md      オプションのシンボリックリンク。Claude Code が同じファイルを読み取るようにする
  README.md                    編集、ビルド、公開方法
  content/profile.json         サイト上のすべてのテキスト
  build.mjs                    ジェネレーター、Node のみ、依存関係なし（assets/build.mjs）
  static/style.css             :root のトークン、prefers-color-scheme によるダークモード
  .github/workflows/deploy.yml ビルド + Pages へのデプロイ（assets/deploy.yml）
  .gitignore                   dist/ と node_modules/

このスキルの assets/ フォルダーからファイルをコピーし、適応させます。scripts/ にはステップ 4 で使用するリポジトリセットアップが含まれています。AGENTS.md はエージェントに依存しない内容にしてください。つまり、特定のツールではなく、プロジェクト、コマンド、デザインルールを説明するものにします。

mkdir "$REPO" && cd "$REPO" && git init -b main
mkdir -p content static .github/workflows
# assets/ からコピー: build.mjs、style.css -> static/、
#                   deploy.yml -> .github/workflows/、
#                   AGENTS.md、profile.example.json -> content/profile.json

オプションの追加機能（ユーザーが要求した場合のみ）: プロジェクトページ、ブログ（ビルド時にレンダリングされるマークダウンファイル）、カスタムドメイン、または同じリポジトリ内のプラグイン/スキルマーケットプレイス（.claude-plugin/marketplace.json + plugins/<プラグイン>/、サイトでそれらを一覧表示、Claude Code がインストールされている場合は claude plugin validate . で検証）。

ステップ 4: リポジトリの作成と Pages の有効化

常に gh を使用してリポジトリを作成し、Web UI で名前を入力しないでください。scripts/create-site-repo.sh はログインしているアカウントから名前を取得するため、常に正確に <アカウント>.github.io になります。サイトフォルダーから実行し、最初に --dry-run でユーザーに出力を表示します。

bash <スキルのディレクトリ>/scripts/create-site-repo.sh --dry-run      # gh、ログイン、スコープを確認し、実行内容を表示
bash <スキルのディレクトリ>/scripts/create-site-repo.sh                # 公開リポジトリを作成し、Pages（Actions）を有効にし、origin を設定
# 組織サイトの場合:       ... --org <組織>
# 既存のリポジトリの場合:     ... --existing   （ユーザーに中身を確認した後にのみ）

gh が見つからないか、ログインしていない場合は停止し、トークンに workflow スコープがない場合は警告し、--existing なしでは既存のリポジトリには触れません。手動での同じ手順:

gh repo create "$ACCOUNT/$REPO" --public --description "個人サイト"
gh api -X POST "repos/$ACCOUNT/$REPO/pages" -f build_type=workflow   # Pages がすでに存在する場合は PUT

Pages の設定は、Web UI の Settings → Pages → Build and deployment → Source: GitHub Actions からも行えます。

ステップ 5: デプロイ

git add -A && git commit -m "個人サイト"
git push -u origin main
gh run watch "$(gh run list --workflow deploy.yml --limit 1 --json databaseId --jq '.[0].databaseId')" --exit-status
curl -sI "https://$REPO/" | head -1      # HTTP/2 200 を期待; 最初のデプロイは 1～2 分かかることがあります

以降、main へのプッシュごとに再ビルドと公開が行われます。gh workflow run deploy.yml でコミットなしに再デプロイできます。

ステップ 6: 完了前に確認する項目

ローカルプレビューだけでなく、公開 URL を開いてください。リンクが機能し、CSS やページで 404 が発生しないことを確認します。
幅 1280px と 390px のスクリーンショットを、ライトモードとダークモードでそれぞれ撮影します。390px で水平スクロールがないことを確認します。
キーボード: Tab キーで、すべてのリンクに可視のフォーカスリングが表示されることを確認します。テキストのコントラストは、両方のテーマで WCAG AA に準拠している必要があります。
<title>、メタディスクリプション、lang が設定されていること。画像に alt 属性があること。
ユーザーが当面そのままにしておくことを選択した場合を除き、公開ページに [年] のようなプレースホルダーが残っていないこと（残っている場合はリストアップします）。

トラブルシューティング

症状	原因と修正方法
`https://<アカウント>.github.io/` が 404、サイトが `/<リポジトリ>/` に表示される	所有アカウントのリポジトリ名が正確に `<アカウント>.github.io` ではありません。名前を変更: `gh repo rename <アカウント>.github.io`。
グリーンラン実行後も 404 が続く	Pages ソースがまだ「ブランチからデプロイ」になっているか、無料プランでプライベートリポジトリになっている場合。`build_type=workflow` 呼び出しを再実行し、リポジトリを公開にします (`gh repo edit --visibility public --accept-visibility-change-consequences`)。
プッシュが拒否される:

GitHub Pages 個人サイト作成