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

2022-07-14

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 仓库中：
【使用|使用 Vercel 全自动部署个人网站】

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

文章图片

然后将该仓库 clone 到本地，按项目说明，进行装包、修改配置文件、调试等一系列工作后，将变更提交，并推送到该仓库。
2.2 Vercel 平台接入
登入 Vercel 官网完成账号注册，进入到工作台后，授权你的 Github 仓库权限给 Vercel：

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

文章图片

授权完成后导入项目：

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

文章图片

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

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

文章图片

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

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

文章图片

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

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

文章图片

后续你只需要修改你仓库中 Fork 下的代码即可，推送到 github 上时便会自动触发 Vercel 的重新部署流程。
如果你想切换默认部署的分支，可以将 Production Branch 设置为别的分支即可：

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

文章图片

推荐阅读

上一篇：深度详解Facebook时序工具库Kats

下一篇：Hexo + Obsidian + Git 完美的博客部署与编辑方案