はじめに
公式の情報で、例えば以下のドキュメントなどに書かれている「Cloudflare Drop」を軽く試してみた、という話です。
●Cloudflare Drop · Changelog
https://developers.cloudflare.com/changelog/post/2026-07-08-cloudflare-drag-and-drop/
Cloudflare Drop を試す
Cloudflare Drop について
Cloudflare Drop は、以下のページから使える仕組みです。フォルダや ZIPファイルを、このページにドラッグ＆ドロップするだけで、Cloudflare の CDN上に静的サイトとしてすぐに公開できます。
●Cloudflare Drop
https://www.cloudflare.com/drop/
以下は、公式ドキュメントに書かれている説明の一部を抜粋したものです。
Upload a folder or zip file of static assets (static HTML, CSS, JavaScript, images, and fonts) and get a temporary live preview that stays live for 1 hour. During that window, you can test the site, share the preview URL, or claim the deployment to keep it.
この時、Cloudflare のアカウントでログインしてなくても使えます。ただし、Cloudflare のアカウントでログインしていない場合は、公開されたサイトは 60分で消える仕組みです。
※ 時間が限定されるとはいえ、インターネット上にサイトが公開されることになるので、アップロードする出たの内容は注意が必要です
これについて、例えば静的サイトの公開を維持したい場合は、ログインが必要になります。今回は、ログインしない状態で使えるものを試します。
適当に作った HTMLファイルを静的サイトとして公開する
それでは、適当に作った HTMLファイルを準備して、それを静的サイトとして公開してみます。
HTMLファイルの準備
以下の、すごく適当に作った HTMLファイルを使います。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>シンプル</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #f8f9fa;
font-family: system-ui;
}
h1 {
color: #2563eb;
font-size: 3rem;
}
</style>
</head>
<body>
<h1>こんにちは</h1>
</body>
</html>
静的サイトの公開
先ほどの HTMLファイルを、Cloudflare Drop のページにドラッグ&ドロップします。
以下の表示が出たので、Accept を選びました。
その後、処理が次々と行われていき、その際は以下のような画面が出てきていました。
以下の画面が出たら、処理完了となるようでした。
表示結果
その後、発行された URL にブラウザでアクセスしたところ、以下のように公開されたページを表示することができました。
また、スマホのブラウザでの表示も行えることも確認できました。