この記事では、「Claude Code」 と 「GitHub Actions」 を連携させ、GitHub の Issue に指示を書くだけで、AIが自動でHTMLを修正し、GitHub Pages に公開までしてくれる、開発フローを3ステップでご紹介します。
非エンジニアの方でも、この記事通りに進めれば、噂の Claude Code を体験できますので試してみてください。
何ができる？
- Issue で指示するだけ: 「この部分の文章をこう直して」と日本語で書くだけ。
- AIが自動でコード修正: Claude が指示を理解し、HTMLファイルを直接修正した Pull Request を自動で作成します。
- 自動でWebサイトに公開: 作成された Pull Request をマージすれば、GitHub Actions が起動し、修正内容が GitHub Pages で公開されているWebサイトに自動で反映されます。
→ 
必要なもの
- GitHub アカウント: お持ちでない方はこちらから作成してください。
- Claude APIキー: Claude公式サイトでアカウントを作成後、APIコンソールでAPIキーを取得します。APIの利用には、最低$5程度のクレジット購入（課金）が必要です。
【3ステップ】設定はたったこれだけ！
それでは、実際に設定していきましょう。
ステップ1: サンプルリポジトリを Fork する
まずは、このワークフローを試すためのテンプレートとなるリポジトリを、ご自身のGitHubアカウントにコピー（Fork）します。
- 下記 Github の URL にアクセスします。
https://github.com/yamjun/claude-code-action-github-pages - 画面の右上にある 「Fork」 ボタンをクリックします。
- 「Create a new fork」という画面が表示されたら、特に設定を変更せず 「Create fork」 ボタンをクリックします。
これで、あなたのGitHubアカウントにclaude-code-action-github-pagesというリポジトリが作成されました。このリポジトリには、サンプルのHTML (index.html) と、Claudeを動かすための設定ファイル (.github/workflows/claude.yml) が既に含まれています。
ステップ2: Claude GitHub App をインストールする
次に、あなたのリポジトリでClaudeが動くように、公式の GitHub App をインストールします。
- まず、Claude GitHub Appのページにアクセスします。
- 緑色の 「Install」 ボタンをクリックします。
- あなたの GitHub アカウントを選択する画面が表示されたら、ご自身のアカウントをクリックします。
- 次に、どのリポジトリにインストールするかを選択する画面が表示されます。「Only select repositories」を選び、先ほどForkしたclaude-code-action-github-pagesリポジトリを選択してください。
- 「Install」 ボタンをクリックしてインストールを完了します。
ステップ3: APIキーをリポジトリに設定する
最後に、Claude があなたの代わりにAPIを呼び出すための「鍵（APIキー）」を設定します。
- Anthropicのコンソールにアクセスし、「Create Key」 をクリックしてAPIキーを作成します。キーの名前は「claude-github-actions」など、分かりやすい名前を付けておきましょう。
- 作成したAPIキーは、この一度しか表示されないので、必ずコピーしてください。
- 次に、Fork したあなたの GitHub リポジトリに戻り、「Settings」 タブ > 「Secrets and variables」 > 「Actions」 を開きます。
- 「New repository secret」 ボタンをクリックします。
-
- Name: ANTHROPIC_API_KEY と入力します。（この名前は一字一句間違えないようにしてください）
- Secret: 先ほどコピーした API キーを貼り付けます。
- 「Add secret」 をクリックします。
以上ですべての設定は完了です！ お疲れ様でした。
早速、Claude に HTML の修正を指示してみよう！
準備が整ったので、実際にIssueからAIに指示を出してみましょう。
-
リポジトリの 「Issues」 タブから 「New issue」 をクリックします。
-
Issueのタイトルと本文を、以下のように入力します。
- タイトル: index.html をもっとモダンな UI のサイトに変更して
- 本文: @claude
-
「Submit new issue」 をクリックしてIssueを作成します。
しばらく待っていると...
Claude が Issue にコメントし、指示通りにHTMLを修正した Pull Request (PR) を自動で作成してくれます！
作成された PR の「Files changed」タブを見ると、指示通りに変更されているのが分かります。内容に問題がなければ、このPRをマージしましょう。
PR がマージされると、GitHub Actions が自動的に走り、数分後には GitHub Pages で公開されているWebサイトに変更が反映されます。（※初回はリポジトリのSettings > Pagesで Deploy from a branch の Branch を main▽ /(root)▽ Save ←ボタンをクリックする必要があります）
注意点：Claude を賢く使うために
非常に便利なワークフローですが、利用する上での注意点もあります。
- APIコスト: Claude APIは利用量に応じて料金が発生します。個人で試す範囲では大きな金額にはなりにくいですが、組織で本格利用する際はコスト管理に注意しましょう。
- セキュリティ: このアクションはリポジトリへの書き込み権限を持ちます。信頼できない第三者のリポジトリでむやみに試すことは避け、APIキーの管理は厳重に行ってください。
まとめ
今回は、Claude Code と GitHub Actions を連携させ、Issue で指示するだけで HTML を自動修正するワークフローをご紹介しました。
この仕組みを使えば、非エンジニアのでも、噂の Claude Code を 試しながら Webサイトを公開できます。
ではでは。