🚀 Vercel 零成本全自动部署教程

作为前端开发者（尤其是使用 Nuxt 3 这类全栈框架），Vercel 绝对是神级应用。本站——这个全由 AI 辅助开发搭建的个人博客，就是 100% 托管在 Vercel 上的。

在这篇文章中，我将记录如何进行这一“零成本且全自动”的绝佳开发体验。

📦 前期准备

GitHub: 确保你有一个 GitHub 账号，并且代码已经推送到你的代码仓库的 main 分支（例如 prayer2/blog）。
Vercel 账号: 建议直接使用 Continue with GitHub 单点授权登录，免注册直接进入。

⚙️ 一键部署流程

整个流程可以用“丝滑”来形容，你根本不需要操作服务器或搭建 Nginx。

登录 Vercel 官网。
在右上角点击黑色的 Add New... -> 选择 Project。
如果绑定了 GitHub，Vercel 会列出你的仓库，找到你的博客仓库点击 Import。
Vercel 非常聪明，它能在你拉取代码的那一刻分析出你是用何种框架编写的（例如 Nuxt）。它会自动帮你设置好 Build Command 甚至 Output Directory 等配置。对于这种极客框架，你直接不用思考，点击蓝色的 Deploy 按钮！
在 1 到 2 分钟左右，满屏会出现彩带飘落 🎉——这表示你的项目已经在互联网上正常运行，而且自动分发了 HTTPS 证书！

🔗 关于绑定国内自定义域名的一个小坑

默认情况下，Vercel 给你生成的二级域名（类似 xxx.vercel.app）在国内网络环境是遭到拦截无法被正常解析的。这时候你需要做两步：

第一步：在 Vercel 侧绑定域名

进入项目 Dashboard，来到上方的 Settings（设置），左侧找到 Domains（域名）。
填写你之前在各大云厂商购买的个人专属域名（如我配置的 jianghuayan.me），添加上去，并把 www 的选项一并勾入。

第二步：应对 "Invalid Configuration" 报错

当你在国内的域名控制台（如阿里云系统）填好 Vercel 提供的专门优化解析后（如 A记录指向 76.227.81.120），你回到 Vercel 的配置项，有时会看到红色的 Invalid Configuration ❌。