之前我们已经尝试过 GitHub + Netlify 的组合，这次我们来聊聊 Vercel。它是 Next.js 团队开发的产品，最核心的理念是让你只关注代码，无需考虑服务器相关的问题，在线部署快速如闪电一般。
部署前的准备
准备你的静态网站代码
整个部署的基础只有一个：项目根目录下必须存在一个 index.html 文件。这是 Vercel 识别静态网站的前提条件，如果没有这个文件，部署就会直接出现 404。
小贴士：把需要用到的 CSS、JS、图片等放在同一个文件夹下，需要保证路径是相对引用，这样项目在上线后才不会出现资源报错的问题。
注册 GitHub 并上传项目
没有 GitHub 的同学，先去 GitHub 注册一个账号，然后把项目传上去。
① 登录之后后点击右上角的 “+” → “New repository” 新建仓库。
② 输入项目名称，然后点击 “Create repository”。
③ 建好之后，点击 “uploading an existing file”，把你的网页文件拖进去，然后点击 “Commit changes” 提交。
如果项目文件很多/或者有文件夹的话，直接用GithHub Destop这类工具更方便哦，详细的：步骤可以参考 GitHub上传静态网站 的这片文章，这里的方法上传文件是没办法上传文件夹的。
用 Vercel 导入并一键部署
注册并关联 Vercel
打开 Vercel 官网，在页面上点击 Sign Up，然后选择 Continue with GitHub 直接使用 GitHub 账号登录。
注意：弹出授权页面时，建议选择 “All repositories”，否则 Vercel 可能获取不到你的项目。
导入项目开始部署
① 在 Vercel 控制台点击 “Add New…” → “Project”。
② 在列表中找到前面上传的 GitHub 仓库，点 Import。
③ 啥都不用改，直接点 Deploy！Vercel 会自动根据你的项目情况自动检测出是哪种类型的项目，纯静态网站使用默认配置即可。
④ 部署完成之后，在 Domains 下方就能看到一个 .vercel.app 结尾的网址，点开就是你的成品。
避坑提示：如果部署之后打开出现 404，请检测
index.html是否位于仓库根目录下，同时注意文件名称和大小写要严格保持一致。
绑定自己的域名
觉得 .vercel.app 不够正式？点击 Domains 旁边的加号，即可添加或者购买你自己的域名。
按指引去你的域名服务商后台添加一条 CNAME 记录，一般指向 cname.vercel-dns.com，Vercel 自动为你配置 HTTPS，无需考虑证书问题。
Vercel部署中的常见问题
1.为什么我部署后打开网站是白屏或 404？
多半是 index.html 放错了位置。请务必把它放在项目的最外层根目录，并且文件名要小写。如果使用了框架，检查构建输出目录是否配置正确。
2.可以部署带后台逻辑的动态网站吗？
完全可以。Vercel 支持 Serverless Functions，你可以在 api 目录下写 Node.js 代码处理请求，相当于一个轻量后端，非常适合提交表单、对接数据库等场景。
3.我改了代码，怎么更新线上的网站？
这是 Vercel 最爽的地方。你只需要把新代码推到 GitHub 仓库，Vercel 会自动检测到变更并完成部署，全程零操作。每次 git push 都会触发一次自动更新。
4.免费额度够用吗？会不会突然收费？
个人和小型项目完全够用。免费计划每月有 100GB 带宽和 100GB 存储，不会自动扣费。超出后服务会暂停而非直接收费，无需担心意外账单。
5.如何用 Vercel 搭建博客或企业站？
最推荐搭配 Next.js、Hugo 或 Hexo 等框架，Vercel 对它们有原生优化，部署体验如丝般顺滑。模板市场里也有大量一键克隆的开源博客项目。
6.Vercel 可以像 Netlify 一样，直接拖拽上传文件夹吗？
Vercel 主推 Git 自动化部署，后台没有 Netlify 那样的拖拽式上传界面。不过你仍然可以通过 Vercel CLI 从本地上传：在项目根目录运行 npx vercel（需安装 Node.js），按提示登录后即可一键部署，无需推送到 GitHub。对于习惯纯手动操作的用户，这也是个轻量的替代方案。
