名刺代わりの1ページを、AIで書いて Cloudflare Pages に置く
Claude や ChatGPT に HTML を丸ごと書かせ、Cloudflare Pages にアップロードして公開する。月額なし。
- 1. 載せることを一枚に書き出す名前・肩書き・一言・連絡先・SNS のリンク。写真を載せるなら、ファイル名も決めておく。この一枚がそのまま AI への指示になる。
- 2. AI に「1ファイルの HTML」で頼むClaude か ChatGPT に、書き出した内容を渡して「CSS を含めた1ファイルの HTML で、スマホでも読める名刺代わりのページを作って」と頼む。色や雰囲気の希望があれば添える。出てきたコードを index.html という名前で保存する。
- 3. ブラウザで開いて確かめる保存した index.html をダブルクリックしてブラウザで開く。文言の間違い、リンク先、スマホ幅での見え方（ブラウザの幅を狭めて見る）を確認する。直したい所は AI に「ここをこう」と頼み直し、ファイルを上書きする。
- 4. Cloudflare Pages に直接アップロードCloudflare のアカウントを作り、Workers & Pages から「Pages」を選び、Git 連携ではなく「直接アップロード」を選ぶ。プロジェクト名を付け、index.html（と画像）の入ったフォルダをドラッグして公開する。pages.dev のアドレスで表示される。
- 5. 独自ドメインを繋ぐプロジェクトの「カスタムドメイン」から取得済みのドメインを追加する。ドメインを Cloudflare で管理していれば、DNS は自動で設定される。他社で取ったドメインなら、指示された CNAME を向ける。詳しくは「独自ドメインを繋ぐ」へ。
- 6. 直す時は上げ直す内容を変える時は、AI に頼み直すか手で直して、同じプロジェクトに再アップロードする。前の版も残るので、戻すこともできる。
コツ
- 問い合わせを受けたいなら、外部のフォームサービスの埋め込みコードを AI に渡して組み込む
- 画像は大きすぎると表示が遅い。上げる前に縮小しておく