Cloudflare Drop 新功能 拖入文件夹几秒上线静态网站
本篇视频教程介绍 Cloudflare Drop 新功能,演示如何把网站文件夹或 zip 压缩包拖到页面中,快速部署 HTML、CSS、JavaScript 静态网站,并说明如何登录 Cloudflare 账号申领临时网站
Cloudflare Drop 新功能 拖入文件夹几秒上线静态网站
Cloudflare Drop 是 Cloudflare 推出的一个非常适合新手和前端开发者使用的新功能
它的核心用法很简单:把一个静态网站文件夹,或者一个 zip 压缩包拖到 Cloudflare Drop 页面里,Cloudflare 就会自动上传文件、部署站点,并生成一个可以直接访问的临时网址
本期视频会演示 Cloudflare Drop 的完整使用流程,包括拖入文件、上传资源、全球节点分发、生成 workers.dev 访问地址,以及如何把临时网站申领成长期保留的网站
Cloudflare Drop 是什么
Cloudflare Drop 可以理解为一个面向静态网站的快速发布入口
你不需要先购买服务器,也不需要打开终端执行命令,只要准备好网站文件,就可以把文件夹或 zip 压缩包直接拖到页面中,让 Cloudflare 自动完成部署
它适合发布下面这类内容:
- HTML、CSS、JavaScript 静态页面
- 前端项目打包后的 dist 目录
- 单页官网或活动页
- 临时演示 Demo
- 需要快速分享给别人看的静态网页
如果你只是想让一个静态页面快速上线给别人看,Cloudflare Drop 会比传统服务器部署轻很多
视频里演示了什么
视频主要包含以下流程:
- 打开 Cloudflare Drop 页面
- 拖入一个网站文件夹或 zip 压缩包
- 接受 Cloudflare 的服务条款
- 等待页面初始化部署环境
- 自动扫描并上传网站文件
- 将站点分发到 Cloudflare 全球网络
- 生成一个 workers.dev 临时访问地址
- 复制链接并打开验证网站是否可以正常访问
- 登录 Cloudflare 账号后,点击 Claim 申领站点
整个过程更接近“上传文件并得到链接”,而不是传统意义上的服务器部署
为什么推荐这个功能
Cloudflare Drop 最大的优势是降低了部署门槛
对新手来说,部署网站经常会卡在这些地方:
- 不知道服务器怎么选
- 不熟悉 Linux 命令
- 不知道 Nginx 或 Caddy 怎么配置
- 不清楚域名、端口、安全组和 SSL 证书之间的关系
- 只是想临时分享一个页面,却被迫学一整套服务器流程
Cloudflare Drop 把这些复杂步骤先隐藏起来,让你可以先把页面发布出去,确认效果,再决定后续要不要接入更正式的域名和项目流程
对于前端开发者来说,它也很适合用来做快速预览和临时交付
比如你做好了一个静态页面,想先发给朋友、客户或团队成员看一眼,就可以直接拖到 Cloudflare Drop 里生成链接
临时网站可以变成永久网站吗
可以
Cloudflare Drop 生成的网站一开始通常是临时状态,页面上会出现 Claim 相关按钮
如果你想长期保留这个网站,可以登录 Cloudflare 账号,然后点击 Claim 申领站点
申领之后,这个临时网站就可以绑定到你的 Cloudflare 账号下,后续更适合作为长期项目继续管理
简单理解就是:
- 不登录账号,也可以快速预览和分享临时网站
- 登录 Cloudflare 账号后,可以把这个临时网站申领下来
- 申领后更适合长期保留和后续管理
使用前需要准备什么
使用 Cloudflare Drop 前,建议先准备好一个可以直接运行的静态网站目录
常见情况包括:
- 普通 HTML 页面:直接准备包含 index.html 的文件夹
- Vite、React、Vue 等前端项目:先执行构建命令,使用生成后的 dist 目录
- 静态模板网站:把完整模板文件夹或 zip 压缩包拖进去
需要注意的是,Cloudflare Drop 更适合静态网站
如果你的项目依赖后端数据库、服务器接口、本地文件写入,或者需要长期运行的服务进程,就不能简单地只靠拖入文件夹解决
适合哪些人使用
Cloudflare Drop 很适合下面几类用户:
- 刚开始学习前端的新手
- 想快速上线个人页面的人
- 需要临时演示作品的开发者
- 做外包页面预览的前端工程师
- 想把静态页面发给别人看的内容创作者
- 不想为了一个小页面专门配置服务器的用户
它不是替代所有部署方案的万能工具,但在“快速上线静态页面”这个场景里非常顺手
小结
Cloudflare Drop 的价值在于把部署流程简化到了非常直观的程度
以前你可能需要准备服务器、配置环境、上传文件、配置 Web 服务和端口,现在只需要把静态网站文件拖进去,等待几秒,就能得到一个可以访问的链接
如果只是快速预览前端项目、分享静态页面或临时演示作品,这个功能非常值得收藏
官网: https://connectingeverycorner.com/
联系方式:
- 机器人:https://t.me/ConnectingEveryCornerCNBot
- Telegram:https://t.me/ConnectingEveryCorner
- 频道:https://t.me/CECCNBoard