AI编程零基础部署全攻略：从GitHub到Vercel，手把手用域名上线你的Web应用

这篇文章是一个从未接触过编程的我，在一步步查阅资料、询问AI之后，耗费两天时间，终于将自己用AI编程打造的一款记账软件成功部署上线的真实记录。

整个过程踩坑无数，走了不少弯路，也浪费了许多时间。

因为部署流程的步骤较为繁琐，我把整个过程详细记录下来，既是为了与大家共同进步，也是为了日后自己需要时能够快速回顾。

前提

最近我用 Codex 编写了一个小巧的软件，取名为 jotbook。

它本质上是一个记账工具，用来记录我每天的支出，所有内容都保存在本地。无需登录，没有数据库，也不依赖后端。

网上建议使用 PWA 架构，说是体验贴近原生应用，部署起来也方便简洁，我便让 Codex 也照此实现。

在本地调试一切正常后，剩下的工作就是将它部署上线，这样我就能在手机上随时随地使用了。

我之前考虑过直接使用本地调试的版本来记账，但实际操作起来并不方便，需要电脑一直开机，并且保持服务持续运行。

所以，最终还是决定将它部署上线。

部署上线

部署上线过程可以总结为以下三步：

1. 将项目上传到 GitHub
2. 通过 Vercel 进行部署上线
3. 配置域名解析

虽然看上去只有三步，但每一步都埋着大大小小的坑。我也是尝试了多种方案后，最终选择在 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 提交时，尤其要注意下面两点：

1. 敏感信息不要提交，比如你的密钥、账号密码等，不要稀里糊涂地全选提交，务必先筛选剔除敏感内容后再提交。
2. 本地依赖不要提交，也就是那个叫 “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 推荐的地址。

之后再回到阿里云解析设置那里，点击“修改”，把记录值改成推荐地址。

最后，在手机上点击这个域名，顺利打开你的页面，那就大功告成了！

最后

以上就是本次全部的教程内容。作为一个不懂代码的文科生，能够打通部署上线这一环节确实不容易。而这只是编程工作的一小步，后面还有广阔的星辰大海等着我去探索与攻克。