AI编程零基础部署全攻略:从GitHub到Vercel,手把手用域名上线你的Web应用
这篇文章是一个从未接触过编程的我,在一步步查阅资料、询问AI之后,耗费两天时间,终于将自己用AI编程打造的一款记账软件成功部署上线的真实记录。
整个过程踩坑无数,走了不少弯路,也浪费了许多时间。
因为部署流程的步骤较为繁琐,我把整个过程详细记录下来,既是为了与大家共同进步,也是为了日后自己需要时能够快速回顾。
前提
最近我用 Codex 编写了一个小巧的软件,取名为 jotbook。
它本质上是一个记账工具,用来记录我每天的支出,所有内容都保存在本地。无需登录,没有数据库,也不依赖后端。
网上建议使用 PWA 架构,说是体验贴近原生应用,部署起来也方便简洁,我便让 Codex 也照此实现。
在本地调试一切正常后,剩下的工作就是将它部署上线,这样我就能在手机上随时随地使用了。
我之前考虑过直接使用本地调试的版本来记账,但实际操作起来并不方便,需要电脑一直开机,并且保持服务持续运行。
所以,最终还是决定将它部署上线。
部署上线
部署上线过程可以总结为以下三步:
- 将项目上传到 GitHub
- 通过 Vercel 进行部署上线
- 配置域名解析
虽然看上去只有三步,但每一步都埋着大大小小的坑。我也是尝试了多种方案后,最终选择在 Vercel 上部署,目前看来这是最方便的一种方式。
如果你手头没有现成的项目,可以直接复制我的这个项目(https://github.com/zhengyunhui123-dev/jot),按照教程走一遍完整的部署流程。
上传 GitHub
编程离不开 Git,这是毋庸置疑的。
Git 的核心作用是版本管理,假如你从来不进行版本管理,一旦代码改崩了,就会让你体验到什么叫做痛苦。
GitHub 则是将你的代码存储在云端的地方,把代码上传到 GitHub,主要是为了方便下一步 Vercel 的部署。
Git 使用
Git 基本大家都安装过,使用 Claude Code 本身就要求必须安装 Git。如果你懒得记那些命令,可以下载一个图形化工具——“小乌龟”(TortoiseGit)。

毕竟每次让大模型帮你操作 Git,消耗的都是白花花的 token,还容易污染上下文,不如自己手动搞定。
这也是我建议手动提交的原因之一。
Git 分为提交(commit)和推送(push),提交是提交到本地仓库,推送才是同步到 GitHub 上。只有推送成功,代码才能同步给 Vercel。
在执行 Git 提交时,尤其要注意下面两点:
- 敏感信息不要提交,比如你的密钥、账号密码等,不要稀里糊涂地全选提交,务必先筛选剔除敏感内容后再提交。
- 本地依赖不要提交,也就是那个叫 “node_modules” 的文件夹,如果提交了,在 Vercel 部署时就会报错。把它从提交中剔除出去。
这也是我建议手动提交的原因之二。
Git 的其他详细使用方法,可以去询问元宝或豆包。
GitHub 仓库
还没有账号的话,先去注册一个。注册时最好使用谷歌邮箱,有了谷歌邮箱,几乎可以一键登录各种平台,非常便捷。
注册完成后,创建一个新的仓库,步骤如下。

仓库创建好之后,会得到一个仓库的链接。

往 GitHub 推送时,把这个链接复制到你的小乌龟工具里,就能推送到这个仓库了。

当然,推送很可能会失败,因为与 GitHub 的连接不够稳定。

这时候不要心急,站起来走一走,去处理其他事情。过一会儿再试试,往往就能成功了。
我之前尝试过 SSH 方式,听说比较稳定,但是还没有彻底捣鼓通,等后面搞定了再单独出教程。
Vercel 部署上线
登录 Vercel
Vercel 官网:https://vercel.com/ ,是一家知名的头部公司,无需担心安全问题。它主要做前端应用的云端部署平台,个人开发者可以免费使用。
腾讯也借鉴了这种模式,推出了“腾讯云 EdgeOne Pages”,有国际站和国内站,昨天我简单试了一下,觉得稍显繁琐,就先搁置了。
不过方法应该都差不多,如果对国外服务不放心,也可以选择腾讯的,建议优先使用国际站 https://pages.edgeone.ai/zh ,国际站可以直接连接 GitHub,便于自动更新部署。
登录 Vercel 时,请直接用 GitHub 账号登录,这一点非常重要。千万不要去单独注册,否则后续部署会受限。

项目部署
登录后,会进入下方界面(纯英文页面,可以用谷歌翻译将其转为中文):

选中你的项目,点击 “Import”。随后会跳转到如下界面,输入你的项目名称,然后点击 “Deploy”,就会自动开始部署上线。

前面也提到过,如果你提交了 “node_modules” 这类内容,自动部署就会失败。其他可能导致失败的原因,可以把错误日志复制给你的大模型帮忙解决,修复后再重新提交和推送。

经过反复调试,最终部署成功后,会进入下面这样的界面,左下角就是你网站的访问链接。

点击这个链接,就可以打开你的网站了,至此已经走通了一大半。
现在说起来看似简单,但在那时,还是花了不少时间才搞定的。
项目更新
项目上线之后,如果你的项目版本有迭代,通常会自动完成更新。在下图里就能看到所有的更新和部署记录。如果自动更新报错,可以手动点击更新,具体是点击下图中的 “…” - “Redeploy”。

如果界面上没有 “…”,那就查看黄色的警告信息,按照提示修改即可。
域名解析
阿里云解析
可能会出现这样一种情况:部署成功了,但手机上打不开,此时就需要配置一个属于自己的域名(不用挣扎了,老老实实去搞定吧)。
去阿里云上买一个便宜的域名,然后进入“云解析 DNS”,选择你的域名,点击“解析设置”。

建议挂一个二级域名,这样同一个域名下可以挂载多个网站来玩。主机记录处填写你的二级域名名称或者 “www”。记录值先填写:“cname-china.vercel-dns.com”,后面 Vercel 会给出推荐值,届时按照推荐去修改即可。

Vercel 绑定
解析配置好后,回到 Vercel 进行绑定。选择 “Domains”,再点击 “Add Existing”。

在弹窗中输入你的域名,其他保持默认,然后点击 “Save”。

弹窗下方的内容,就是提示你把阿里云的解析记录,修改为 Vercel 推荐的地址。

之后再回到阿里云解析设置那里,点击“修改”,把记录值改成推荐地址。
最后,在手机上点击这个域名,顺利打开你的页面,那就大功告成了!
最后
以上就是本次全部的教程内容。作为一个不懂代码的文科生,能够打通部署上线这一环节确实不容易。而这只是编程工作的一小步,后面还有广阔的星辰大海等着我去探索与攻克。