返回

不会敲代码,也能把 AI 网页免费挂上网

一份不要求掌握 Git 命令的部署教程:把 AI 写的网站推到 GitHub,使用 Cloudflare Pages 免费上线并绑定域名。

6 MIN READ

故事是这样的,很多朋友最近都在用 AI 写代码,弄个作品集或者小工具。很快就在本地跑起来了,看着挺像那么回事。

但问题来了,想发给朋友或者客户看一眼的时候,发现根本发不出去。

它只存在于我自己的电脑里。给别人发一堆本地文件夹,人家还得懂怎么配置环境才能跑起来。

这就是很多人被卡住的地方。AI 能帮你把网页写出来,但它替你走不完上线的最后一公里。

今天我拿手里的一个小项目跑了一遍,教你彻底绕开复杂的代码工具,只用两步免费把网站挂上网,顺便再聊聊怎么给它绑一个你自己的专属域名。

让 AI 帮你把代码推送到 GitHub

很多新手一听到部署,脑子里直接弹出一堆复杂的命令行和 GitHub 操作,很容易直接劝退。其实,既然代码是 AI 写的,上传这事儿也该让它干。

你完全不需要去背什么 Git 命令。直接把你用的 AI 工具(比如 Cursor)叫出来,跟它说:

「这个项目我已经测试没问题了,现在我要部署,请帮我在 GitHub 上建一个新仓库,并把代码推送上去。」

只要授权没问题,AI 会自动帮你跑完所有终端命令。当它告诉你搞定的时候,你的代码就已经安全地躺在 GitHub 的云端了。

在 Cloudflare 绑定 GitHub 自动构建

代码在云端之后,我们直接登录 Cloudflare 的后台,把云端仓库和它连起来。

  1. 在左侧菜单栏找到「Workers & Pages」点进去。点击「Create application(创建应用)」按钮。

  2. 点击「Connect to GitHub(连接到 GitHub)」。

  3. 授权绑定你的 GitHub 账号,选中刚才 AI 帮你传上去的那个代码仓库,点击下一步。

  4. 直接点击「Deploy(部署)」。

在 Cloudflare 中创建 Pages 项目

Cloudflare Pages 连接 GitHub 仓库

在 Cloudflare 中选择需要部署的 GitHub 仓库

Cloudflare Pages 的项目构建设置

剩下的就是等它走完进度条。结束的时候,Cloudflare 会给你分配一个以 pages.dev 结尾的免费地址。

看到那个绿色成功提示的时候,这种感觉太爽了。你的项目已经挂在网上了,不再是一个只能自娱自乐的本地玩具。

最爽的是,绑定之后,以后你再让 AI 改了任何代码并推送到 GitHub,Cloudflare 都会自己拉取并自动重新构建上线,一劳永逸。

遇到报错怎么办?把错误扔回给 AI

Cloudflare Pages 构建失败日志示例

在部署的过程中,特别是用了前端框架的项目,偶尔会遇到 Cloudflare 构建失败飘红。这时候千万别慌,也别自己去读代码查原因。

点开报错的日志,把最后那段红色的错误信息复制下来,直接扔回给你的 AI 工具:

「我在 Cloudflare 部署时遇到了这个构建错误:[粘贴报错],请帮我分析原因并修改代码,然后重新推送到 GitHub。」

AI 修复完把代码推上去之后,Cloudflare 就会自动监听到变化,并触发新的构建。你只需要做个无情的复制粘贴机器,直到进度条变绿。

进阶选修:如果你想买个专属域名

有了刚才那个 pages.dev 的测试地址,你已经可以发给任何人看了。到这里,这篇教程的保底交付已经完成。

但如果你想更像一个极客,想把网址变成自己名字的后缀,这事儿就需要花点小钱了。你需要去腾讯云或者阿里云,花几十块钱买一个属于你的专属域名。

有了域名之后,我们需要完成两件事:一是把域名交给 Cloudflare 接管,二是把它绑到你刚刚部署的项目上。

第一步:在域名平台修改 DNS

先回到 Cloudflare,把刚买的域名添加进去,直接选择免费计划并继续。在这个过程中,侧边栏的域名概述里会提供两个 Cloudflare 专属的 DNS 服务器地址(类似 sri.ns.cloudflare.com 这种)。

DNS 就像是互联网上的导航。我们要去改导航,告诉别人「以后看到这个域名,直接去 Cloudflare 找我的网站」。

在 Cloudflare 中添加自己的域名

Cloudflare 提供的专属域名服务器地址

Cloudflare 域名激活状态

以阿里云为例,登录后台:

  1. 找到你的域名,点击「管理」。

  2. 找到「DNS 修改 / 域名服务器」设置。

  3. 将原来的两个阿里云默认服务器删掉,替换为 Cloudflare 分配给你的那两个。

在域名服务商后台修改 DNS 服务器

修改完保存,耐心等一会儿,Cloudflare 那边就会自动检测到并提示激活成功。

第二步:把域名绑定到项目

虽然域名激活了,但它现在还是个空壳,下面没有任何资源。我们需要把刚才的那个免费测试地址,换成你的专属域名。

  1. 在 Cloudflare 里打开「Workers & Pages」页面,点击你刚刚部署好的项目。

  2. 进入项目后,点击上方的「设置 (Settings)」标签。

  3. 在页面里找到「域和路由 (Domains & Routes)」部分,点击「添加自定义域 (Add Custom Domain)」。

  4. 输入你想绑定的域名。你可以直接绑主域名(比如 suntongxue.me),也可以绑加前缀的子域名(比如 www.suntongxue.me 或者 app.suntongxue.me)。

  5. 填好后点击「添加域名 (Add Domain)」,最后直接点击激活。

为 Cloudflare Pages 项目添加自定义域名

Cloudflare Pages 自定义域名激活界面

最好的一点是,如果你填的是子域名,底层的 DNS 记录根本不用你去管,Cloudflare 会非常智能地自动帮你配好。稍微等个一两分钟,在浏览器里敲下你买的域名,就能直接看到你做好的网站了。

不是所有项目都适合这么玩

把这个流程跑通之后,还是得提醒大家一个事。

自动化部署真的无脑又好用,但它最适合的是静态页面、个人作品集和纯前端的小工具。

如果你的项目里带着用户登录、需要连后台的数据库、有付费系统,或者需要隐藏一些私密的 API 的话,那先别急着硬上。这些东西一旦放到静态服务器上,很多安全配置是缺失的,你需要一套完整的前后端部署方案。

写在最后

不管怎样,先把手里那个一直躺在本地的项目上线试试看,不用非得等它完美了才敢见人。

如果你刚好在折腾 Vibe Coding 的话,下次卡在上线这一步,可以按这篇的清单照着走一遍。也欢迎在评论区告诉我,你现在是卡在 GitHub 推送、Cloudflare 报错,还是买域名解析哪个环节,回头我把大家踩坑最多的地方单独拿出来聊。


本文首发于公众号「宜锋玩AI」:不会敲代码,也能把 AI 网页免费挂上网。