Cloudflare Dropで名刺代わりのホームページをデプロイする
はじめに
皆様こんにちは、あかいけです。
最近、CloudflareからCloudflare Dropという、フォルダをドラッグ&ドロップするだけでサイトを公開できる機能が登場しました。
アカウント登録もログインもなしにサッと静的サイトを公開できる手軽さが魅力で、名刺代わりのホームページを公開するのにピッタリだと思い、実際に試してみました。
今回はこのCloudflare Dropを使って以下をデプロイしてみたので、デプロイから独自ドメインの紐づけ、更新まで一通りやってみた内容をまとめます。
Cloudflare Dropって何だろう
Cloudflare Dropは、アカウントの登録なしで静的サイトをCloudflareにデプロイできるサービスです。
2026年7月8日のアップデートで公開されました。
大まかな流れは以下の通りです。
- 静的アセット(HTML、CSS、JavaScript、画像、フォントなど)をまとめたフォルダやzipファイルをドラッグ&ドロップする
- 1時間限定のライブプレビュー用URLが払い出される
- その1時間以内にCloudflareアカウントへ
Claim(取得)すると、デプロイが永続化される
ポイントは、まずアカウントなしでデプロイして動作を確認し、気に入ったらアカウントに紐づけて永続化するという流れになっているところです。
「とりあえず公開して見た目を確認したい」というニーズにかなりマッチしています。
なお、対応しているのは静的アセットのみです。
サーバーサイドの処理が必要なアプリケーションには対応していない点には注意が必要です。
前提条件
- デプロイ対象となる静的サイトのファイル一式(HTML、CSS、画像など)を用意していること
- 永続化する場合はCloudflareアカウント(無料プランで可)
Dropする
では早速デプロイしていきましょう。
まずは以下のページにアクセスします。
「Drop a folder. Or a zip.」と表示されている部分に、用意した静的サイトのフォルダをこの画面にドラッグ&ドロップします。
デプロイにあたって利用規約への同意を求められます。
内容を確認して「Accept」を押しましょう。
同意すると、フォルダ内のファイルが順番にアップロードされていきます。
今回はindex.html、style.css、favicon.svg、78184819.pngの4ファイルがアップロードされました。
アップロードが完了すると、「Making your site fast, everywhere...」という画面になり、世界中のリージョンへサイトが配信されていく様子が表示されます。
このあたりはさすがCloudflareという感じで、演出も凝っていて見ていて楽しいですね！
「Your site is ready」と表示されれば、デプロイ完了です。
「Live」の表示とともに、プレビュー用URLが払い出されました。
実際にアクセスすると、用意した名刺サイトがちゃんと表示されています。
ここまでにかかった時間は、ドロップしてから31秒ぐらいでした。
爆速ですね！
なお、この時点ではまだ一時的なプレビューの状態です。
画面には「Claim (59:30)」というカウントダウンが表示されており、この制限時間内にアカウントへ紐づけないとサイトは消えてしまいます。
余談:AIで公開する
なお本ブログでは手動でデプロイしますが、Cloudflare DropはAIエージェントからの利用も想定されています。
トップページの右上には、「Copy for your agent」というボタンが用意されています。
このボタンを押すと、AIエージェント向けのデプロイ手順がクリップボードにコピーされます。
コピーされる内容は、次のようにhttps://www.cloudflare.com/drop/llms.txtを取得させる指示になっていました。
Fetch https://www.cloudflare.com/drop/llms.txt
llms.txtの中身はこのようになっており、AIエージェントがCloudflare Dropやwranglerを使ってサイトをデプロイするための手順が、そのままプロンプトとして読める形で書かれています。
プロンプト
# Cloudflare Drop
> Deploy static sites to Cloudflare's global network instantly, with no account required to start.
## How it works
1. Drop a folder or .zip file containing your static site (HTML, CSS, JS).
2. Cloudflare Drop uploads and distributes it to Cloudflare's global network.
3. You get a live `workers.dev` URL.
4. Claim the deployment within 60 minutes to keep it.
## For AI agents
Use Cloudflare Drop at https://www.cloudflare.com/drop/ only when you have browser automation and a completed static site folder or .zip file to upload. After publishing, return both the live URL and claim URL.
For local CLI project workflows, prefer Wrangler instead of Cloudflare Drop. If Wrangler is not authenticated with Cloudflare, use Wrangler 4.102.0 or later.
If Wrangler is not installed globally, use `npx` or `npm exec`:
```sh
npm exec --yes wrangler@latest -- deploy ./dist --name my-static-site --temporary --compatibility-date <YYYY-MM-DD>
`` `
Replace `./dist` with the directory containing the final static files. Use today's date for `--compatibility-date`.
For static site deployments:
- Deploy a dedicated project output directory, such as `./dist`, `./build`, or another folder containing the final static files.
- Ensure the deployed directory contains an `index.html`.
- Pass a Worker name with `--name`.
- If the first deploy creates a temporary account but fails because a name is missing, rerun with `--name`.
- If the deploy fails because `compatibility_date` is required, rerun with `--compatibility-date <YYYY-MM-DD>`.
After deployment, verify the live URL. If it initially returns 404, wait briefly and retry before changing the deployment, because the route and assets can take a short time to become available.
Return both:
- The live `workers.dev` URL
- The claim URL
The claim URL grants ownership of the temporary preview account. Treat it as sensitive and tell the user it expires after 60 minutes.
Do not use `--temporary` when Wrangler is already authenticated with OAuth, `CLOUDFLARE_API_TOKEN`, or a global API key. In authenticated environments, use normal `wrangler deploy`.
For details:
- https://developers.cloudflare.com/workers/platform/claim-deployments/
- https://developers.cloudflare.com/workers/wrangler/commands/workers/#deploy
なのでAIエージェントにこの指示を渡せば、「作った静的サイトをCloudflare Dropで公開しておいて」と頼むだけでデプロイまで任せられます。
永続化する
気に入ったので、このサイトを永続化していきます。
前述の画面の「Claim」ボタンを押すと、Cloudflareのダッシュボードのクレーム画面へ遷移します。
画面上部にカウントダウンが表示されており、時間制限があることがわかります。
プロジェクト名を確認して「取得」ボタンを押します。
続いて、このサイトをどのアカウントに追加するかを選択します。
新しいアカウントを作成するか、既存のアカウントに追加するかを選べます。
私はすでにCloudflareアカウントを持っていたので、既存のアカウントを選択して「確認」を押しました。
しばらく待つと「サイトが公開されました」と表示され、永続化が完了しました。
この処理も30秒かからないぐらいでした。
ドロップからここまで、最速で1分ぐらいでデプロイできてしまいました。
これはRTAが捗りますね！
色々カスタマイズする
すでにお気づきの方もいるかもしれませんが、永続化されたサイトの実体はWorkers & Pagesのプロジェクトです。
そのため、通常のWorkersと同じようにダッシュボードから各種カスタマイズができます。
ここでは独自ドメインの紐づけとObservabilityの有効化を試してみます。
ドメインを紐づける
デフォルトで払い出されるのはworkers.devのサブドメインですが、名刺代わりのサイトとして使うなら独自ドメインを紐づけたいところです。
対象のWorkerの「ドメイン」タブを開き、「ドメインを追加」から設定していきます。
今回は事前にCloudflareで管理しているlamaglama39.devドメインに対して、meishiというサブドメインを紐づけます。
しばらくするとカスタムドメインが有効になりました。
またこの時点でデフォルトのWorkers URLは不要なので、無効化しておきます。
これで以下のURLで名刺サイトにアクセスできるようになりました。
Observability有効化
せっかくなので、アクセス状況を確認できるようにObservabilityも有効化しておきます。
「設定」タブの「観察可能性」から、Workers Logsを有効化します。
「起動ログを含める」と「ログをWorkersダッシュボードに保存する」を有効にして「デプロイ」を押します。
有効化すると、「Observability」タブからリクエストのイベントを確認できるようになります。
無料プランでも1日あたり20万イベントまで記録できるため、名刺サイト程度のアクセス量であれば十分そうです。
ちなみに、デプロイ済みバージョンのメトリクスは「メトリクス」タブから確認できます。
アセットリクエスト数やキャッシュヒット率、ステータスコード別のリクエスト数などが一目でわかるようになっています。
AI向けマークダウン
「Markdown for Agents」も有効化してみようと思ったのですが、こちらは無料プランでは使えませんでした。
ダッシュボードの「AI」メニューから設定画面を開くと、「エージェント用Markdown」のトグルに「Proプラン」のバッジが付いています。
この機能は、AIエージェントがAccept: text/markdownヘッダーを付けてリクエストした際に、CloudflareがエッジでHTMLを自動的にMarkdownへ変換して返してくれるものです。
公式ドキュメントによると、対応しているのはPro、Business、Enterpriseプランのゾーンとのことでした。
Markdown for Agents is available to Pro, Business and Enterprise plans, and SSL for SaaS customers at no cost.
とはいえ、やっていることは「Acceptヘッダーを見てHTMLの代わりにMarkdownを返す」というシンプルなコンテンツネゴシエーションです。
そのため自前で実装することも可能だとは思います。（本ブログでは詳細までは触れません）
更新する
サイトの内容を更新したくなった場合も、ダッシュボードから静的ファイルを再アップロードするだけで対応できます。
「設定」から「静的ファイルをアップロードしてワーカーを更新します」を開きます。
初回と同じように、更新後のファイル一式をドラッグ&ドロップします。
アップロードするファイルの一覧が表示されるので、内容を確認して「デプロイ」を押せば更新完了です。
なお、このアップローダーが対応しているのは静的アセット(HTML、CSS、JSファイル)のみです。
より本格的なアプリケーションを扱いたい場合や、CI/CDに組み込んで自動デプロイしたい場合は、wrangler deployを使うことが推奨されています。
考慮事項
実際に触ってみて感じた注意点をいくつかまとめておきます。
- プレビューには時間制限がある
- ドロップ後のプレビューは1時間限定です。永続化したい場合はその間にClaimする必要があります。
- 対応するのは静的アセットのみ
- サーバーサイドの処理が必要なアプリケーションには対応していません。あくまで静的サイト向けの機能です。
- 本格運用ならwrangler
- 継続的に更新するサイトや複雑な構成のプロジェクトでは、
wranglerによるデプロイを検討したほうがよいです。 - Cloudflare Dropは「手軽に素早く公開する」ことに特化した機能と捉えるのがよさそうです。
- 継続的に更新するサイトや複雑な構成のプロジェクトでは、
逆に言えば、名刺代わりのホームページやちょっとしたポートフォリオサイトのように、静的で更新頻度もそれほど高くないサイトであれば、Cloudflare Dropは非常に手軽で相性が良い選択肢だと感じました。
さいごに
以上、Cloudflare Dropで名刺代わりのホームページをデプロイしてみました。
アカウントなしでとりあえず公開して動作確認し、気に入ったら永続化するという流れが非常に手軽で、思い立ってから1分ほどでサイトが公開できてしまう体験はなかなか衝撃的でした。
また独自ドメインの紐づけやObservabilityの有効化まで、Workers & Pagesの機能をそのまま使える点も嬉しいポイントです。
「静的サイトはあるけど公開先で悩んでいる」という方は、一度試してみてはいかがでしょうか。
この記事が誰かのお役に立てば幸いです。
