Claude Code で作ったHTMLを
安全・低コストで公開する

ローカル検証のしやすさと、最小の攻撃対象面を両立する静的サイト構成の指針。

AI コーディング環境で HTML を量産すると、次にぶつかるのが「どう公開し、どう更新し続けるか」だ。 素朴にサーバー実行型（PHP 等）で組むと、二つの問題が出る。ローカルで挙動を検証しづらいこと、 そして公開サーバーに書き込み口を開けると脆弱性を抱えることだ。本稿はその両方を避ける構成を一般化してまとめる。

方針：実行時生成をやめ、ビルド時生成にする

ページをリクエストのたびにサーバーで組み立てる代わりに、ビルド時に静的ファイルを生成し、 あとは純粋な静的配信にする。これだけで二つの利点が同時に手に入る。

• 検証がローカルで完結する。 生成コマンドを手元で実行し、出力をそのままブラウザで確認できる。 「公開して初めて分かる」状態がなくなる。
• 攻撃対象面が最小になる。 公開側にサーバーコードも書き込み口も無いため、 アップロード経由の任意コード実行のような脆弱性クラスが構造的に存在しない。

アーキテクチャ

ソース（HTML を置くフォルダ）→ ビルド（一覧やインデックスを生成）→ 静的ホスト、という一方向の流れにする。 更新（書き込み）は認証済みの Git だけが行い、公開側は読むだけにする。

content/        ソース（HTMLを置く）
   │  build（依存を増やさない素のスクリプト）
   ▼
dist/           生成物（静的ファイル）
   │  git push（認証済み）
   ▼
静的ホスト        読み取り専用で配信

ビルドスクリプトは外部依存を持たない素の実装にしておくと、どの環境でも同じように動き、 サプライチェーン上のリスクも小さい。タイトル抽出・一覧生成程度なら標準機能だけで十分書ける。

セキュリティ設計：書き込み経路を公開に置かない

鍵は権限分離だ。閲覧（公開・読み取り専用）と、追加・削除・変更（認証済みの書き込み）を別経路に分ける。

サーバー実行型で同じことをやろうとすると、アップロード機能に拡張子ホワイトリスト、ファイル名のサニタイズ、 パストラバーサル対策、トークン認証…と多くの防御を積む必要がある。静的化すると、それらが そもそも要らなくなる（守るべき書き込み口が公開側に無いため）。残るのは主に、 各ドキュメント内の表現（外部スクリプトを安易に埋め込まない、必要なら SRI を付ける）と、 一覧生成時の HTML エスケープくらいだ。

ホスティング：Git 連携の静的ホスト

GitHub にソースを置き、Git 連携の静的ホスト（例：Cloudflare）に接続すると、 push のたびに自動でビルド＆公開できる。ビルド設定は「ビルドコマンド」と「出力ディレクトリ」を指定するだけ。

「公開してよいが中身を限定したい」場合は、ホスト側のアクセス制御（ID認証）を別レイヤーで足せる。 公開でよければ何も足さなくてよい。どちらもアプリ側のコードは変えずに切り替えられるのが、 この分離構成の利点だ。

運用フロー

日々の更新はこれだけになる。

1. HTML をソースフォルダに置く（AI に生成させてそのまま保存でも良い）。
2. ビルドして手元で確認する。
3. commit して push する。あとは自動でデプロイされる。

この流れは、ビルドと Git が動く環境であればどこからでも実行できる。 実行を別環境（クラウドのコーディングサンドボックスや手元のマシン）に置けば、 操作端末がスマートフォンでも「生成 → 検証 → 公開」まで通せる。重い処理は端末ではなく実行環境側で走る。