你卡住的地方,叫"最后一米"
先认领一下场景。这三种情况,你只要用 AI 做过东西,大概率都遇到过:
这些都不是你的操作问题,而是文件和网址的区别。理解了这一点,后面的操作就全都顺了。
为什么本地文件天生发不出去
你双击打开一个 HTML,浏览器地址栏里显示的是 file:///Users/你的名字/Downloads/xxx.html。注意开头那个 file://——它的意思是"这台电脑上的这个位置"。
这个地址只对你这台电脑有效。别人拿到它,电脑里没有这个路径,自然什么也打不开。就像你把家里冰箱的位置告诉朋友:"左手第二格",他站在自己家厨房,这句话毫无意义。
所以要做的事只有一件:把这个文件放到一台 24 小时开着、任何人都能访问的电脑上,然后把那台电脑给它的网址发出去。这台电脑在业内叫"服务器",而现在你完全不需要自己买、自己管——有平台免费替你做。
你的名字.pages.dev)不需要备案。只有当你要把自己的域名解析到国内服务器时,才涉及备案。个人分享作品、内部演示,前者完全够用。
选平台:三个免费选项,先说结论
能免费托管静态网页的平台不少,常被提到的是这三个。鱼直接给结论:新手无脑选 Cloudflare Pages。
- 拖拽文件夹就能上线,不用装任何软件
- 免费额度大方,个人用基本用不完
- 国内访问速度相对稳定
- 后期能绑自己的域名,免费送 HTTPS
- 体验同样优秀,前端圈用得最多
- 更适合有代码仓库的项目
- 免费版有商用限制条款
- 老牌稳定,和代码托管一体
- 要先学会 Git 和仓库概念
- 对纯新手门槛偏高
选 Cloudflare 的关键理由不是它功能最强,而是它有一条完全不碰命令行的上线路径。你现在需要的是三分钟内看到成果,而不是先学两小时工具。等你上线过一次,再往下走自动化,心里就有底了。
三分钟上线:拖拽版,零命令行
准备好一件事:把要发布的文件放进同一个文件夹,并且把主页面改名叫 index.html。这个名字是约定——平台看到它,就知道这是别人访问网址时该显示的第一页。
dash.cloudflare.com,用邮箱注册,免费套餐即可。全程不需要绑卡。yuyu-demo,你的站就是 yuyu-demo.pages.dev。只能用小写字母、数字和短横线。https://xxx.pages.dev 的链接。点开它,你的东西就在互联网上了。这个链接现在可以直接发微信、发群、发给客户。进阶:让 AI 替你发布
拖拽很好,但如果你正在用 Claude Code 这类能操作电脑的 AI 工具,可以让它直接把发布这件事接管掉——改完内容,一句"发布上去",十几秒后线上就是新版。
原理很朴素:Cloudflare 提供了一个官方命令行工具 wrangler,再配一把令牌(Token)当钥匙,AI 就能代表你上传文件。
5.1先配一把钥匙
5.2然后就一句话的事
把令牌和账号 ID 交给 AI,直接说人话:
它背后执行的其实就是这么一行:
# 首次会让你登录授权,之后每次发布都是这一行 npx wrangler pages deploy . --project-name=yuyu-demo
值得强调的是最后那句"确认页面内容和本地一致"。这是鱼踩出来的经验——让 AI 发布完自己回访一次,能当场发现"传上去了但内容是旧的"这类问题,比你事后自己发现要省事得多。
踩坑合集:发布后最常见的五个问题
这一节是本篇最值钱的地方。下面每一条鱼都亲手踩过,尤其是第一条——几乎百分之百的人都会撞上。
6.1改完了,线上还是旧的
这是缓存在作祟。为了让网页打开更快,浏览器和平台的全球节点都会把内容临时存一份,你更新之后,它们可能还在给你看存货。
解决顺序,从简单到麻烦:先强制刷新(Mac 按 Cmd+Shift+R,Windows 按 Ctrl+F5);还不行就换无痕窗口打开;要是想立刻确认平台那边到底更新没,在网址后面加个问号参数绕过缓存,比如 你的网址?v=2——地址不一样,就一定拿到的是新内容。
?v=时间戳 一试,新内容好好地在那儿——问题从来不在发布,在缓存。所以验证的时候一定要绕开缓存,不然你会白改半小时。
6.2页面打开是白屏或"404 Not Found"
九成是主页面没叫 index.html,或者你拖上去的是单个文件而不是文件夹。回去检查这两点。文件名区分大小写,Index.html 不算。
6.3本地好好的,线上图片全裂了
本地你的图片可能引用了 /Users/你/Desktop/图.png 这种绝对路径,线上没有这个位置。正确做法是把图片和网页放在同一个文件夹里,引用时只写文件名。让 AI 做这件事最省事:"检查这个页面所有引用的图片和文件,把绝对路径改成相对路径。"
6.4页面上某个功能线上才报错
有些功能(比如页面读取自己旁边的一个文件)在 file:// 下会被浏览器安全策略拦住,反而是上线后才正常。所以别看到本地某个按钮点不动就急着改代码——先发上去再判断。反过来也一样,本地正常线上出错的,大多是路径和大小写问题。
6.5手机上排版乱了
发布之后第一件事:拿自己手机打开一遍。这一步比任何检查都直接。发现问题就把截图丢给 AI,说"这是手机上的效果,帮我修一下适配"。有了网址,你终于可以随时在真机上验证——这是上线带来的第二个隐性收益。
| 症状 | 最可能的原因 | 怎么办 |
|---|---|---|
| 线上还是旧内容 | 缓存 | 强刷 / 无痕 / 网址加 ?v=2 |
| 白屏、404 | 主页面没叫 index.html | 改名,并确认拖的是文件夹 |
| 图片裂了 | 用了本地绝对路径 | 同文件夹存放,只写文件名 |
| 某功能本地失效 | file:// 安全限制 | 先发布,再看线上表现 |
| 手机排版错乱 | 没做移动适配 | 截图给 AI,让它改 |
下一步:换成你自己的域名
xxx.pages.dev 发同事完全够用。但如果你想把它当成长期的个人主页、作品集,或者拿去谈合作,一个自己的域名会让整件事的分量不一样。
成本比多数人想的低:一个 .com 一年几十到一百多块,.dev、.me 之类也在这个量级。在 Cloudflare 自家买最省事,买完在 Pages 项目里点 Custom domains 添加,证书和 HTTPS 它自动配好,不用你操心。
把这一米走完,你和"用 AI 玩了玩"的人就彻底不是一回事了。前面几篇里做的任何东西——涂鸦跳跃、演示文稿、设计稿——现在都可以变成一个能发出去的链接。挑一个,今天就发出去。