はじめに

公式の情報で、例えば以下のドキュメントなどに書かれている「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 にブラウザでアクセスしたところ、以下のように公開されたページを表示することができました。

また、スマホのブラウザでの表示も行えることも確認できました。