01
GitHubにサイト一式を置く
スターターZIPを解凍し、リポジトリ直下へ配置します。
build.mjs package.json README.md .gitignore reports/ 001-okazaki-aichi-travel-review.html
今後追加する記事は、すべて
reports フォルダへ入れます。完成後の運用
初期設定は一度だけ。2記事目以降はHTMLを追加するだけです。
① HTMLを作るChatGPTなどで単体HTMLを生成
② GitHubへ追加reportsフォルダへ1枚アップロード
③ 自動ビルドCloudflareが一覧と記事を生成
④ URLは固定LINEには同じトップURLを共有
初期設定の流れ
Cloudflareの新UIでは、WorkersとPagesの入口が近いため要注意です。
02
Cloudflareの「Workers & Pages」を開く
AndroidのChromeからCloudflare Dashboardへログインします。
- Workers & Pages を開く
- 右上の Create application を押す
03
Pages専用の入口を選ぶ
ここが最も間違えやすいポイントです。
- 「Ship something new」の画面を表示
- 下部の Looking to deploy Pages? Get started にある Get started を押す
❌ Workersの画面
Deploy command、npx wrangler deploy、API token が表示される。
✅ Pagesの画面
Production branch、Build command、Build output directory が表示される。
「Continue with GitHub」を最初に押すと、WorkersのGit連携画面へ進む場合があります。必ずPages側の Get started を入口にします。
04
GitHubリポジトリを選ぶ
CloudflareからGitHubへのアクセスを許可し、対象を指定します。
- Connect to Git を選ぶ
- GitHubアカウントを認証する
share-report-siteを選択- Next を押す
05
Pagesのビルド設定を入力する
入力する主要項目は2か所だけです。
SET UP BUILDS AND DEPLOYMENTS
Project name
share-report-site
Production branch
main
Framework preset
None
Build command
npm run build
Build output directory
public
Root directory
空欄
Environment variablesは不要です。入力後に Save and Deploy を押します。
06
公開を確認する
ビルドが成功するとPagesのURLが発行されます。
- Deploymentが Success になるまで待つ
https://プロジェクト名.pages.dev/を開く- 一覧ページと1記事目が表示されることを確認
2ページ目以降の追加方法
Cloudflare側を操作する必要はありません。
公開前チェック
GitHubのmainブランチにファイルがある
記事HTMLはreportsフォルダ内
Build commandはnpm run build
Output directoryはpublic
WorkersではなくPagesの画面
Commit後にCloudflareが自動ビルド