Claude CodeでWebアプリを作ってGitHub Pagesで公開する

GitHubアカウントがあれば、それだけでWebアプリをゼロから公開まで一気に進められる。ただし、コードが変更履歴ごとすべて公開されるため、それを気にする人には向かない。

1. GitHub・Gitの準備

GitHubアカウントの作成、リポジトリの作成、Gitインストール、SSH設定、cloneまではGitHubとGitをセットアップするを参照。GitHub Pages の有効化手順は同ページの「7-1. GitHub Pages で公開する」も参照。

2章以降は以下の状態から進める。

• GitHubアカウント作成済み
• リポジトリ my-first-site 作成済み（Public、GitHub Pages 有効）
• ~/Desktop/claude/my-first-site に clone 済み

2. Claude Code でWebアプリを作成

Claudeデスクトップアプリを起動。

Code（Claude Code）を選択 → New session をクリック → 作業フォルダを指定（~/Desktop/claude/my-first-site）

あとはプロンプトを入力して、index.htmlを編集する。

プロンプト例:

Claudeへの指示

HTML+JavaScriptでポモドーロタイマーを作って！
index.html 1ファイルで作って。

Claudeへの指示

複利計算機をHTML+JavaScriptで作って！
構成はHTMLファイル(/index/)が1つ。

Claudeへの指示

最大60秒のカウントダウンタイマーをHTML+JavaScriptで作って！
秒数を入力してスタート・リセットできるようにしたい。
HTMLファイル1つ（index.html）にまとめて。

Claudeへの指示

TODOリストをHTML+JavaScriptで作って！
項目の追加・削除ができて、ページを閉じても消えないようにしたい。
index.htmlに書いて。ファイルは1つで。

右上のところからプレビューを選ぶと表示される（自動で表示されることも）。

Claude Codeでポモドーロタイマーを作成

途中、操作の許可を求めてくることがあるので対応する。

3. 作ったWebアプリをGitHubにアップして公開する（デプロイ）

Claude Codeに依頼する：

Claudeへの指示

変更をgitでコミットしてpushして（git push -u origin main で）

途中、操作の許可を求めてくることがあるので対応する。

しばらく（1分くらい）待ってから公開URLにアクセスして確認。

公開URL: https://ユーザー名.github.io/my-first-site/

作例：ポモドーロタイマー

4. Webアプリの修正と反映

修正依頼プロンプト例:

Claudeへの指示

背景をもっと明るくしてください

Claudeへの指示

数値入力をスライダーにしてください

Claudeへの指示

ボタンの間隔をもっと広げて

参考: AIへの指示に使えるUI用語集 — 動く実例つき

途中、操作の許可を求めてくることがあるので対応する。

納得したら、アップを依頼:

Claudeへの指示

変更をgitでコミットしてpushして

しばらく（1分くらい）待ってから公開URLにアクセスして確認。

このように修正と反映を繰り返して、Webアプリを仕上げていく。

5. リポジトリの公開設定について

今回はリポジトリをPublic（公開）に設定しているため、ファイルの中身や変更履歴は誰でも閲覧できる状態になっている。 HTML + JavaScript + CSSだけのシンプルなアプリであれば大きな問題になることは少ないが、以下のようなケースではPrivate（非公開）に変更するのがおすすめ。

• 試行錯誤の履歴を見られたくない
• 意図しないファイルを公開してしまうリスクを避けたい

変更方法：リポジトリの Settings → Danger Zone（ページ下部） → Change repository visibility

ただし、GitHub Free（無料版）の場合、PrivateにするとGitHub Pagesは使えなくなる。 PrivateのままGitHub Pagesを使うにはGitHub Pro以上（有料）が必要。

無料のまま非公開で運用したい場合は、Cloudflare Pagesなど別のホスティングサービスが選択肢となる。