自己写的前端网站怎么免费上线？文章给了两套方案。
微信公众号完整原文：Vibe Coding之后网站不知道怎么展现给其他人看？干货来了-纯前端免费部署到公网的两种方式
Vibe Coding之后网站不知道怎么展现给其他人看？干货来了-纯前端免费部署到公网的两种方式
gitee博客项目开源地址：https://gitee.com/kk_495/meowstar-blog.git
可以拉取用于学习使用。
方案一：腾讯云 EdgeOne（Git 导入 + 云端构建）
步骤 1 — 进入 EdgeOne 控制台，选择「快速部署 Web 应用和 AI Agents」
路径：腾讯云控制台顶部搜索EdgeOne →左侧导航服务总览
快速部署 Web 应用和 AI Agents → 按钮创建项目
点击创建项目后弹出下拉菜单：
1.通过导入Git仓库创建— 从您的 Git 提供商添加一个仓库（本流程选择此项）
2.通过模板创建— 使用 Makers预制模板快速创建
3.通过上传文件创建— 上传项目资产，一键部署站点
4.创建 Agent— 开箱即用的 Agent 开发平台
步骤 2 — 导入 Git 仓库，选择meowstar-blog
页面标题：导入 Git 仓库（项目代码要先上传到git仓库，我们这里用gitee示例，适合国内版）
·meowstar-blog（我的一个博客项目）
操作：点击meowstar-blog进入下一步。
步骤 3 — 创建项目：配置项目
配置可以直接默认即可
构建设置折叠面板：
·框架预设下拉展开可见：Vue、Angular、Svelte、React、Nuxt、Qwik、Hono、Vite、Hugo、Other
· 因为我们的博客项目是vite框架开发的，所有选择vite，这个根据自己的开发框架选择
步骤 4 — 填好构建参数并开始部署
同页继续填写后，实际生效值：
·框架预设 = Vite
· 根目录 = （留空，默认根目录）
·输出目录 = dist
·构建命令 = npm run build
·安装命令 = npm install
这里我没有修改，都是上一步选择vite框架之后的默认的配置
确认后点击底部蓝色按钮开始部署。
步骤 5 — 构建部署进行中
左侧流水线状态：
·初始化 / 克隆仓库 — 完成5s
·安装依赖 — 完成7s
· 构建 — 进行中4s（日志滚动中）
·部署 — 等待中
等待部署程序自动走完就可以了
右侧构建日志（节选）：
09:26:56.523 [StaticAssetsBuilder] MoveProjectToAssets time: 9ms
09:26:56.528 build time 2352ms
09:26:56.529 [Logger Plugin] Build completed
09:26:56.529 Build finished.
步骤 6 — 构建成功
等待一盒后全部完成：
· 提示条：恭喜！部署成功，您可以点击预览按钮访问页面
·流水线：全部打勾完成
点击预览后打开站点真实内容。
步骤7 — 部署完成可以直接通过域名访问
https://meowstar-blog-dp1534ntuhrk.edgeone.cool?eo_token=09...
临时预览地址只有“3 小时限制”有效期。如需要长期使用域名，需要到自定义域名去配置（购买域名并备案之后才可以使用，这里不做演示了）。
本方案到此止步于“临时域名”，EdgeOne 默认预览域名的 3 小时限制必须通过绑定自有域名解决。
2. 方案二：Cloudflare Workers（本地dist上传 + workers.dev永久访问）
步骤 1 — Cloudflare Pages 官网说明
进入官网https://www.cloudflare.com/products/pages，登录/注册账号
步骤 2 — 进入 Cloudflare Dashboard，点击Create app ，创建应用，找上传入口，我们使用上传部署文件（dist）的方式示例
步骤 3 — 本地已构建好的dist目录
上传本地已经打包好的dist部署包，内容即 Vite 构建产物，将被直接上传：
步骤 4 — 拖拽上传 12 个文件并部署
直接将一整个dist上传，如下图
·cover-1.png404 KB
·cover-2.png8 KB
·cover-3.png498 KB
·cover-4.png2 MB
·cover-5.png7 KB
·cover-6.png7 KB
·index.html687 B
· （其余 5 个为 assets 内资源）
点击Deploy即开始上传。
步骤 5 — 部署完成，获得workers.dev永久地址
部署成功后进入详情页查看
服务已经部署成功，并且出现了域名链接，长期有效的，可以直接访问，但是国内不稳定，需要科技手段才可以稳定查看。
步骤 6 — 公网验证
浏览器窗口直接访问：
https://misty-poetry-51a1.kk2679842795.workers.dev
3. 两种方式逐点对比（严格按截图事实）
对比项 | 方案一：腾讯云 EdgeOne | 方案二：Cloudflare Workers静态上传 |
部署入口 | EdgeOne 控制台 → 快速部署 Web 应用和 AI Agents → 创建项目 → 通过导入 Git 仓库创建 | Cloudflare Dashboard → Create a Worker → Upload your static files |
源码方式 | 云端拉取，每次推送自动部署 | 本地已执行 npm run build 生成 dist，手动拖拽 12 个文件上传（也可以用git的方式） |
构建地点 | 云端构建 | 本地构建（资源管理器展示 dist），云端仅做静态托管 |
构建耗时 | 本项目28s（克隆 5s + 依赖 7s + 构建 11s + 部署 5s） | 本项目1分钟左右 |
加速区域 | 显式配置全球可用区（含中国大陆） | 默认 Cloudflare 全球网络 |
默认公网域名 | 仅提供 3 小时限时预览，到期域名即可失效 | https://misty-poetry-51a1.kk2679842795.workers.dev 永久有效，无限时提示 |
自定义域名 | 必须添加才能持续访问 | 可选 |
合规/备案 | 提示“为保障内容合规”而限时预览，暗示大陆加速需合规流程 | 未提备案，workers.dev 海外节点直接访问 |
操作复杂度 | 需填项目名、加速区域、生产分支、框架预设等 5 项 | 仅拖拽 dist + 填 Worker 名 + 点 Deploy |
4. 如何选择
·选EdgeOne：如果你的用户主要在国内、希望“提交即云端构建”且愿意后续购买并绑定自有域名（解决 3 小时限制），临时提供给其他人看也可以。
·选 Cloudflare Workers（Pages能力）：如果追求“本地npm run build后一键拖拽上线、拿到永久workers.dev地址”—— 截图显示从dist到公网上线仅需一次拖拽，适合快速演示、海外用户或个人博客。
meowstar-blog最终在两侧均成功上线，内容一致，差异仅在于部署链路与默认域名的可用时长。
5. 复现清单
EdgeOne侧：EdgeOne 服务总览 → 创建项目 → 通过导入 Git 仓库创建 → 选meowstar-blog(私有) → 项目名称 meowstar-blog / 加速区域全球可用区(含中国大陆) / 生产分支 master / 框架预设 Vite / 输出 dist / 构建 npm run build / 安装 npm install → 开始部署 → 等待 28s 成功 → 点预览（注意复制带eo_token的edgeone.cool链接受 3 小时限制）→ 去域名注册选购神秘喵星人.\\\*后绑定自定义域名。
Cloudflare侧：本地npm run build得到dist（含assets / 6 张 cover / index.html）→ Cloudflare Create a Worker → Upload your static files → 拖入 12 个文件 → Deploy → 得到misty-poetry-51a1.kk2679842795.workers.dev → 浏览器直接访问验证。
