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

📅 2026/7/11 3:13:31
我把 Cloudflare Drop 做成了一个 AI Agent Skill:一句话部署静态网站
我把 Cloudflare Drop 做成了一个 AI Agent Skill一句话部署静态网站Cloudflare 最近推出了一个很有意思的工具Cloudflare Drop。不需要 Git 仓库不需要配置构建流程也不需要创建项目。只要把静态文件拖进去就能在几秒钟内得到一个可访问的预览地址。但问题也很明显只能手动拖拽上传不方便接入 AI Agent不适合自动化工作流不方便在终端、CI/CD 或脚本中调用所以我做了一个开源项目CloudflareDrop_Auto它把 Cloudflare Drop 封装成了一个可以直接交给 AI Agent 使用的本地 Skill。GitHubhttps://github.com/Hellohistory/CloudflareDrop_Auto如果这个项目对你有帮助欢迎点一个Star。Star 越多我越有动力继续适配 Cloudflare 后续的接口变化并补充更多 AI Agent 和自动化部署能力。它能做什么安装这个 Skill 后你可以直接对 AI Agent 说把这个静态网站部署一下给我一个预览链接。AI Agent 就可以自动完成检查本地文件处理 Cloudflare Drop 的部署流程上传静态页面创建临时 Worker分配访问域名返回预览链接返回 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 内置能力cryptofetchfs不需要执行npminstall也不需要安装额外依赖。只要本地环境满足Node.js 18即可运行。3. 自动返回预览链接部署完成后会直接输出可访问的临时 URL。特别适合快速分享静态页面给别人查看前端 DemoAI 生成页面后的即时预览临时展示 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 URLCloudflare 还增加了一层计算挑战用来提高自动化滥用的成本。CloudflareDrop_Auto 对这套流程进行了自动化封装让部署过程可以在 Node.js 和 AI Agent 中完成。完整分析见仓库中的PRINCIPLE.md当前限制这个项目更适合小型静态页面和临时预览不建议把它当作正式生产部署平台。目前需要注意Cloudflare Drop 本身属于临时部署能力临时资源可能会在一段时间后过期Cloudflare 可能随时调整相关接口Worker 内联部署受到脚本体积限制大型网站仍建议使用 Cloudflare Pages、Vercel 或其他正式平台项目无法保证未来所有版本持续可用我会根据 Cloudflare 的接口变化尽量持续维护。所以也欢迎大家点一个Star方便后续收到版本更新。项目地址GitHubhttps://github.com/Hellohistory/CloudflareDrop_AutoCloudflare Drophttps://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 反馈。