Cloudflare Pagesの操作を覚えるため、「現場と開発ノート」の日次ダイジェストであるXdigestを、管理画面から手動でアップロードしてみた。
2026年11月4日に行った、ログイン後の画面移動からPreviewでの表示確認までを、スクリーンショットとともに残す。今回は、公開用のサイトフォルダを手元に用意した状態から始めた。
サイトのファイルを公開先へ届けて反映する操作をデプロイと呼ぶ。Cloudflare Pagesには、完成したHTMLやCSS、JavaScriptなどを直接アップロードするDirect Uploadという方法があり、今回はこの機能を使った。Cloudflare公式の説明
1 Cloudflareで更新するサイトを開く
Cloudflareへログインし、左メニューの Compute から Workers & Pages を開く。
サイトの一覧から genba-tech-note をクリックする。
一覧の右上にある Create application は、新しいアプリを作る入口。既存サイトを更新するときは、一覧にある対象の名前を開く。
管理画面の Deployments タブには、これまでの公開履歴が並んでいる。右上の Create deployment をクリックする。
2 Previewを選んで確認用の名前を付ける
アップロード画面には Production と Preview の選択肢がある。
- Production は、本番サイトへ反映するためのもの。
- Preview は、本番サイトを切り替えず、確認用のURLで表示するためのもの。
開いた直後はProductionが選択されていた。今回は学習用なので、Previewへ切り替える。
Preview nameには manual-practice と入力した。この名前は確認用URLの一部になる。
PreviewのURLは初期状態では外部からも閲覧できる。ここでも公開用のファイルを使う。Cloudflare公式のPreviewの説明
3 フォルダを選び転送完了を確認する
中央の枠に公開用の site フォルダをドラッグ＆ドロップするか、枠内の folder をクリックしてフォルダを選ぶ。
今回は11月4日分を含む、61日分のダイジェストと表示用ファイルをまとめたフォルダを使った。トップページの index.html や画像・CSSなど、表示に必要なものがそろった公開用フォルダ一式を選ぶ。
選択後、ファイルの転送が進む。今回は 76/76 files uploaded と All files were successfully uploaded. が表示された。
ファイル一覧には、index.html や publication.json などが表示されている。ここで、Previewが選択されていること、確認用の名前、転送件数を確認してから、右下の Save and deploy をクリックする。
この画面での転送完了と、次の画面でのデプロイ成功は、それぞれ確認する。
4 成功画面から確認用URLを開く
デプロイが終わると、Success! と確認用URLが表示された。
今回の確認用URLは https://manual-practice.genba-tech-note.pages.dev/。このリンクを開くと、アップロードしたサイトを確認できる。
Continue to project はサイトの管理画面へ戻るボタン。実際の表示を確かめるときは、中央のURLを開く。
5 表示と日付を確認する
確認用URLを開くと、「現場と開発ノート」のトップページが表示された。最新号の日付は 11/04 になっている。
表示確認では、次の点を見る。
- トップページの最新号が対象日になっているか。
- 当日の日付別ページと過去記事を開けるか。
- 文字やレイアウトに崩れがないか。
- 検索やページ内のリンクが動くか。
6 今回覚えたCloudflareの操作
今回たどった流れは、Workers & Pagesでサイトを選ぶ → Create deployment → Previewを選ぶ → フォルダをアップロードする → Save and deploy → 確認用URLを開くというものだった。
ファイルの転送が完了したあと、Save and deployを押し、成功画面と実際のサイト表示まで確認する。この一連の操作で、完成済みのファイルが閲覧できるサイトになる流れを確かめられた。
Previewを使えば、本番サイトを切り替えずに操作を試せる。今回も確認用URLに11月4日号を表示できた。
次に自分で本番を更新するときも、まず公開用のファイルをそろえ、Previewで表示を確かめてから、Productionへの反映を判断する。