使用 Vercel 全自动部署个人网站

1. 什么是 Vercel

Vercel 是一个全自动的 Web 应用部署、预览、上线平台。他类似与 Github Page 与 Github Action 的结合，但是与其有如下几个特性：

• 支持应用模板，可以帮助开发人员快速搭建一个应用并完成上线流程；
• 支持 Github 项目导入与联动；
• Github Action 是 CICD 流水线，而 Vercel 只专注于项目部署（静态托管），以及提供 Serverless Function，其他的事情，比如 npm 自动发包、持续集成测试，不是 Vercel 的业务范围；
• 支持零配置部署到全球的边缘网络，访问速度比 Github Page 快得多，无需关心 CDN、HTTPS，Vercel 会帮你做好这一切；
• Vercel 可以部署多种环境，出了项目主要的生产环境之外，它可以将你的其他分支视为预览分支进行部署（当然这些预览环境会加上对应的响应头防止被搜索引擎收录）

2. 使用

这里我们用 EsunR/Blog-Index 项目做示例，使用 Vercel 对其进行部署。

2.1 创建 Github 仓库

首先，点击项目的 Fork 按钮，将项目同步到自己的 Github 仓库中：

然后将该仓库 clone 到本地，按项目说明，进行装包、修改配置文件、调试等一系列工作后，将变更提交，并推送到该仓库。

2.2 Vercel 平台接入

登入 Vercel 官网 完成账号注册，进入到工作台后，授权你的 Github 仓库权限给 Vercel：

授权完成后导入项目：

对项目进行配置，并手动调整构建语句配置：

完成后点击 Deploy 即可开始部署，完成后便可前往项目控制台查看 Vercel 为你分配的域名了：

当然，在项目设置中可以帮你你自己的域名：

后续你只需要修改你仓库中 Fork 下的代码即可，推送到 github 上时便会自动触发 Vercel 的重新部署流程。

如果你想切换默认部署的分支，可以将 Production Branch 设置为别的分支即可：