自己写的前端网站怎么免费上线文章给了两套方案。微信公众号完整原文Vibe Coding之后网站不知道怎么展现给其他人看干货来了-纯前端免费部署到公网的两种方式Vibe Coding之后网站不知道怎么展现给其他人看干货来了-纯前端免费部署到公网的两种方式gitee博客项目开源地址https://gitee.com/kk_495/meowstar-blog.git可以拉取用于学习使用。方案一腾讯云 EdgeOneGit 导入 云端构建步骤 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: 9ms09:26:56.528 build time 2352ms09:26:56.529 [Logger Plugin] Build completed09:26:56.529 Build finished.步骤 6 — 构建成功等待一盒后全部完成· 提示条恭喜部署成功您可以点击预览按钮访问页面·流水线全部打勾完成点击预览后打开站点真实内容。步骤7 — 部署完成可以直接通过域名访问https://meowstar-blog-dp1534ntuhrk.edgeone.cool?eo_token09...临时预览地址只有“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.dev3. 两种方式逐点对比严格按截图事实对比项方案一腾讯云 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 名 点 Deploy4. 如何选择·选EdgeOne如果你的用户主要在国内、希望“提交即云端构建”且愿意后续购买并绑定自有域名解决 3 小时限制临时提供给其他人看也可以。·选 Cloudflare WorkersPages能力如果追求“本地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 → 浏览器直接访问验证。