我把 Cloudflare Drop 做成了一个 AI Agent Skill：一句话部署静态网站

Cloudflare 最近推出了一个很有意思的工具：Cloudflare Drop。

不需要 Git 仓库，不需要配置构建流程，也不需要创建项目。

只要把静态文件拖进去，就能在几秒钟内得到一个可访问的预览地址。

但问题也很明显：

• 只能手动拖拽上传
• 不方便接入 AI Agent
• 不适合自动化工作流
• 不方便在终端、CI/CD 或脚本中调用

所以我做了一个开源项目：

CloudflareDrop_Auto

它把 Cloudflare Drop 封装成了一个可以直接交给 AI Agent 使用的本地 Skill。

GitHub：

https://github.com/Hellohistory/CloudflareDrop_Auto

如果这个项目对你有帮助，欢迎点一个 Star。
Star 越多，我越有动力继续适配 Cloudflare 后续的接口变化，并补充更多 AI Agent 和自动化部署能力。

---

它能做什么？

安装这个 Skill 后，你可以直接对 AI Agent 说：

把这个静态网站部署一下，给我一个预览链接。

AI Agent 就可以自动完成：

1. 检查本地文件
2. 处理 Cloudflare Drop 的部署流程
3. 上传静态页面
4. 创建临时 Worker
5. 分配访问域名
6. 返回预览链接
7. 返回 Cloudflare Claim 链接

整个过程不需要手动打开网页，也不需要把文件拖进浏览器。

---

最简单的使用方式

把下面这段话复制给支持本地 Skill 的 AI Agent：

请从 https://github.com/Hellohistory/CloudflareDrop_Auto/releases
下载最新的 Skill 包，将其注册为本地 Skill。

确认 deploy.js 可以在 Node.js >= 18 环境下正常运行后，
向我介绍这个 Skill 的完整能力，并帮我部署一个静态网站。

安装完成后，你就可以直接让 Agent 部署本地网页。

例如：

请把当前目录下的网站部署成一个临时预览地址。

或者：

请部署 dist 目录，并把预览链接和 Claim 链接发给我。

---

项目亮点

1. AI Agent 友好

仓库中提供了完整的 SKILL.md。

支持 Skill 的 AI 工具可以读取说明，理解输入输出格式，并自动调用部署脚本。

它不只是一个命令行脚本，而是一个可以直接交给 Agent 使用的自动化能力。

2. 零 npm 依赖

项目只使用 Node.js 内置能力：

• crypto
• fetch
• fs

不需要执行：

npm install

也不需要安装额外依赖。

只要本地环境满足：

Node.js >= 18

即可运行。

3. 自动返回预览链接

部署完成后会直接输出可访问的临时 URL。

特别适合：

• 快速分享静态页面
• 给别人查看前端 Demo
• AI 生成页面后的即时预览
• 临时展示 HTML 原型
• 自动化测试生成的报告页面

4. 支持 Claim

除了临时预览地址，脚本还会返回 Cloudflare Claim URL。

登录 Cloudflare 账户后，可以尝试将临时部署认领到自己的账户中，避免预览资源到期后被自动清理。

5. 适合自动化流程

相比网页拖拽，脚本化之后可以接入：

• AI Agent
• 本地开发工具
• CI/CD
• 自动化测试
• 前端构建流程
• Markdown / HTML 预览流程

例如，AI Agent 完成页面开发后，可以自动部署并返回链接，而不是只告诉你：

请在本地运行项目查看效果。

---

为什么做这个项目？

现在很多 AI 编程工具已经可以快速生成网页。

但生成完成后，通常还缺少最后一步：

如何让用户立即看到结果？

常见方案都有一定门槛：

• GitHub Pages 需要仓库和 Pages 配置
• Vercel、Netlify 通常需要登录和创建项目
• Cloudflare Pages 更适合正式项目和 Git 工作流
• 本地启动服务只能自己访问
• 发 zip 给别人又不够直观

Cloudflare Drop 的优势是足够轻量：

静态文件 → 上传 → 获得 URL

而 CloudflareDrop_Auto 做的事情，就是把这个流程进一步变成：

AI 生成页面 → Agent 自动部署 → 返回预览链接

这也是我认为它最有价值的使用场景。

---

适用场景

AI 生成网页

让 Claude Code、Codex 或其他 AI Agent 完成页面后，直接自动部署并返回访问地址。

前端 Demo 分享

不创建仓库，不配置项目，只想快速给同事或朋友看一下页面。

临时预览环境

在 CI/CD 中为构建产物生成一个临时访问地址。

HTML 报告展示

将测试报告、覆盖率报告、数据分析报告或自动生成的文档部署为网页。

Cloudflare Drop 机制研究

仓库中保留了完整的技术原理文档，包括：

• Cloudflare Drop 的部署流程
• PoW Challenge 的计算方式
• 临时账户创建过程
• Workers API 调用流程
• Claim Token 机制
• Workers Assets 与内联脚本的区别

技术细节可以查看：

PRINCIPLE.md

---

技术原理概览

Cloudflare Drop 并不是简单地把文件上传到 Pages。

它背后主要使用 Cloudflare Workers 作为运行时，大致流程是：

获取 Challenge
    ↓
完成客户端计算
    ↓
创建临时 Cloudflare 账户
    ↓
获得临时 API Token
    ↓
上传 Worker 和静态内容
    ↓
启用 workers.dev 子域
    ↓
返回预览地址与 Claim URL

Cloudflare 还增加了一层计算挑战，用来提高自动化滥用的成本。

CloudflareDrop_Auto 对这套流程进行了自动化封装，让部署过程可以在 Node.js 和 AI Agent 中完成。

完整分析见仓库中的：

PRINCIPLE.md

---

当前限制

这个项目更适合小型静态页面和临时预览，不建议把它当作正式生产部署平台。

目前需要注意：

• Cloudflare Drop 本身属于临时部署能力
• 临时资源可能会在一段时间后过期
• Cloudflare 可能随时调整相关接口
• Worker 内联部署受到脚本体积限制
• 大型网站仍建议使用 Cloudflare Pages、Vercel 或其他正式平台
• 项目无法保证未来所有版本持续可用

我会根据 Cloudflare 的接口变化尽量持续维护。

所以也欢迎大家点一个 Star，方便后续收到版本更新。

---

项目地址

GitHub：

https://github.com/Hellohistory/CloudflareDrop_Auto

Cloudflare Drop：

https://www.cloudflare.com/drop/

Cloudflare 官方公告：

https://developers.cloudflare.com/changelog/post/2026-07-08-cloudflare-drag-and-drop/

如果你正在使用 Claude Code、Codex 或其他支持本地 Skill 的 AI Agent，可以试试把它接进去。

觉得有用的话，欢迎：

• 点一个 Star
• 提交 Issue
• 分享你的使用场景
• 帮忙测试不同的静态网站结构

你的 Star 会直接影响这个项目后续的更新速度。⭐

---

免责声明

本项目为第三方独立开源项目，与 Cloudflare, Inc. 不存在关联、赞助或官方认可关系。

本工具基于对 Cloudflare Drop 公开网络交互流程的研究实现，相关接口可能随时发生变化，不保证长期可用。

使用者应遵守 Cloudflare 服务条款及所在地法律法规，并自行承担使用本工具产生的风险。

禁止将本项目用于：

• 大规模批量创建部署
• 对 Cloudflare 服务造成异常压力
• 托管钓鱼、恶意软件或挖矿脚本
• 传播欺诈、垃圾信息或侵权内容
• 绕过速率限制或实施未授权访问
• 其他违反 Cloudflare 服务条款的行为

如发现滥用行为，欢迎通过 GitHub Issues 反馈。