当日までに、ここを済ませる
事前準備
上から順番に進めてください。
すでにできている項目は、確認して次へ進めます。
アカウント登録
GitHubとCloudflareに登録する
事前にお伝えしたとおり、普段使っているGmailで登録します。
すでに登録した方は、ログインできるか確認してください。
A GitHubに登録する
- GitHubの登録ページを開きます。
- Continue with Google が表示されたら選びます。
講座で使うGmailのGoogleアカウントで進めます。 - メールアドレスで登録する場合は、そのGmailを入力します。
- ユーザー名やメール確認など、画面の案内を完了します。
B Cloudflareに登録する
- Cloudflareの登録ページを開きます。
- GitHubで使ったのと同じGmailで登録します。
Continue with Google がある場合は、そのアカウントを選びます。 - 確認メールが届いたら、Gmailを開いて認証します。
- Cloudflareにログインできるか確認します。
表示される登録方法や確認項目は、画面の案内に従ってください。
登録のために独自ドメインを買う必要はありません。
登録した時点では、GitHubとCloudflareはまだ連携していません。
別のメールで登録済みの方は、作り直さず講師に伝えてください。
画面操作の準備
Computer Useを有効にする
Codexがブラウザを見て、クリックや入力をするための準備です。
リンク先の手順が終わったら、このページへ戻ります。
準備のゴール
2つチェックできたら、準備完了。
当日は、下の「02 当日の実習」から始めます。
チェックはこの画面を開いている間の目印です。保存・送信はされません。
9月27日、一緒に進める
当日の実習
公開する練習用ページは、Codexにその場で作ってもらいます。
別のLPをダウンロードしたり、ページのフォルダをGitHubへドラッグしたりする必要はありません。
スキルを入れて公開する
練習用ページを作って公開する
公開スキルのZIPを展開し、publish-page フォルダをCodexのチャット欄にドラッグします。WindowsはZIPを右クリックして「すべて展開」を選びます。
フォルダの中に SKILL.md と references があれば合っています。ページのファイルは配布しません。GitHubへフォルダをドラッグする操作もありません。
この publish-page スキルを、Codexで今後も使えるように入れておいてください。 導入後、SKILL.mdを読み込めることと、Computer Useを使えることを確認してください。 今回は導入だけで、まだ公開しないでください。
Codexから導入できたと返ってきたら、次の文章をチャットで送ります。
publish-page スキルを使って、公開の練習用に、架空の米粉パン教室のLPを1ページ新しく作り、一般公開してください。 【作るページ】 ・教室名：米粉パン教室「こめのわ」（架空の教室です） ・いちばん上の大きな見出し：「小麦なしで、ふわもち。米粉パンの教室」 ・上から順に、次の内容を入れる 1. 見出し、ひとこと紹介、「体験レッスンを申し込む」ボタン 2. 教室の特徴3つ（小麦粉を使わない／こねずに混ぜるだけ／少人数で手元が見える） 3. レッスンメニュー（体験レッスン 90分 3,500円、基本コース 全4回 16,000円） 4. 講師紹介（架空の講師。名前は出さず「こめのわ講師」とする） 5. 開催日程の例を3つ 6. よくある質問を3つ 7. もう一度「体験レッスンを申し込む」ボタン（リンク先は仮でよい） ・デザイン - 見出しは明朝体（Google Fontsの「Shippori Mincho」）、本文はゴシック体（「Noto Sans JP」） - 背景は生成り色。差し色は焼き色のような茶色1色だけ。文字は濃い焦げ茶 - 余白を広めに取り、料理雑誌のような落ち着いた上品な雰囲気にする - 各セクションの見出しの上に、小さな英字ラベル（ABOUT、MENU など）を添える - 見出しは大きく、文字の大きさと太さで強弱をつける。ひとこと紹介は1文字ずつ順に現れるように見せる - 特徴・メニュー・日程はカードにする。角丸・細い線・やわらかい影で立体感を出し、マウスを乗せると少し浮く - スクロールすると各セクションがふわっと下から表示されるアニメーションをつける（外部ライブラリは使わない） - スマホで見やすく、パソコンでは横に広がりすぎない幅にする ・写真や画像生成は使わず、パンを思わせる丸い図形や細い線などの飾りと、色と文字で作る ・実在の住所・電話番号・人物名は入れない ・ページの最後に小さく「このページは練習用のサンプルです。実在の教室ではありません。」と入れる ・ページの中に「公開しました」「公開できました」など、公開の状態を表す言葉は入れない GitHubとCloudflareのアカウントは作成済みで、Computer Useも有効です。 GitHubのリポジトリ作成・commit・pushから、Cloudflare Pagesの初回接続・設定・保存してデプロイまで進めてください。Cloudflareの画面はComputer Useで操作し、本人にしかできない認証が出たときだけ教えてください。 公開ページの表示を確認して、URLを教えてください。
Codexがページを作り、GitHubへの送信からCloudflare Pagesの公開まで進めます。本人にしかできない認証が出たときは、Codexの案内に沿って操作します。
公開できたか確認
公開URLを開いて確認する
- Codexから届いた
https://…pages.devのURLを開きます。 - 米粉パン教室のページが開き、見出し「小麦なしで、ふわもち。米粉パンの教室」が表示されるか確認します。
- URLを自分のメモに残します。
GitHubのURLはファイルの保管場所です。人にページを見せるときは、pages.dev のURL を渡します。
WORK
見出しを変えてみよう
公開した練習用ページの見出しを変え、同じURLに更新が反映されるか試します。
公開した米粉パン教室のページの見出し「小麦なしで、ふわもち。米粉パンの教室」を「こねずに焼ける、米粉パンの教室」に変えて、公開前に見せてください。
表示を確認してよければ、次の文章を送ります。
確認しました。この変更を公開してください。
必要なときに開く
困ったときの補足
困ったときに開けてください手動でやっても6ポチです
1〜6を順番に押せば公開完了。7は公開URLの確認です。
Cloudflareを手動で公開する場合
GitHubへの送信まではCodexに任せます。
Codexから「GitHubへのpushが完了しました」と案内され、GitHubのURLが届いたところから始めます。
1. CloudflareでPagesを開く
- Cloudflareのダッシュボードを開いてログインします。
- Workers & Pages（日本語表示では「従業員とページ」）を開きます。
- Pages → Connect to Git と進みます。
この画面が表示された場合は、下側にあるPagesの「始める」を押します。
2. Codexが作ったGitHubリポジトリを選ぶ
- GitHubとの接続画面が出たら、連携を許可します。
- リポジトリの一覧から、Codexが作ったリポジトリを選びます。
分からないときは、Codexから届いたGitHub URLの最後の名前と見比べます。 - セットアップを開始します（Begin setup）を押します。
3. 公開設定は、そのままでOK
この画面では、設定を変えずに下まで進みます。
| Project name | 最初から入っている名前のまま |
|---|---|
| Production branch | main のまま |
| Framework preset | 「なし」のまま |
| Build command | 空欄のまま |
| Build output directory | 空欄のまま |
| Root directory | 空欄のまま |
入力欄の左に「/」が表示されていても、自分で文字を入れる必要はありません。
4. 公開する
- 設定を変えず、画面下の保存してデプロイする（Save and Deploy）を押します。
- デプロイが終わるまで待ちます。
https://…pages.devのURLが表示されたら開きます。- 米粉パン教室のページが表示されたら、そのURLをメモします。
Cloudflareの画面は更新されることがあります。ボタン名が少し違っても、キャプチャに近い画面を探してください。
途中で困ったら
GitHubのリポジトリが一覧に出ない
連携したGitHubアカウントを確認します。CloudflareのGitHubアプリのアクセス許可に、今回のリポジトリが含まれているかも確認します。選択したリポジトリのみ許可する設定でも使えます。
公開URLが404になる
GitHubのmainの直下に index.html があるか確認します。index.html が1段深くなっていたら、講師に画面を見せてください。出力先は /、Root directory は空欄が今回の設定です。
デプロイが失敗した・更新されない
CloudflareのDeploymentsで、最新の結果を確認します。GitHubのmainに変更があるか、デプロイしたブランチがmainかを見ます。失敗した場合は、エラー部分を講師に見せてください。成功している場合はブラウザを再読み込みします。
Workersの画面に進んでしまった
Workers & Pagesの一覧に戻り、Pagesの入口から進めます。既存の画面ガイドも参考にできます。作成済みのものは、講師に確認してから整理します。
時間内に最後までできなかった
最後にできたSTEPと、止まった画面を講師に伝えてください。GitHubへの送信ができていれば、Cloudflareの接続から再開できます。
最後に、2つ確認。
これで、公開と更新をひと通り体験できました。
次はこの流れを、自分の案内ページにも使えます。