“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第n篇文章，点击查看活动详情”

本文将主要介绍如何将github的项目部署到vercel上进行托管

一般情况下，github上的项目我们会把它部署到github pages上，通过创建分支gh-pages来实现，但免不了操作的繁琐，我们需要将代码合并到gh-pages并且执行build生成可直接访问的文件才可。

今天就教大家怎么把代码部署到vercel上，只需要push代码即可触发部署，减少操作。

什么是vercel

vercel是一个用于部署前端应用和Node服务的云平台，提供CDN加速，自带https，自带丰富的模板，支持根据模板创建项目和一键导入 github 的项目，非常方便。

同类的平台有Netlify 和 Github Pages，相比之下，vercel 国内的访问速度更快，并且提供了多环境部署，支持持续集成，一次push或者一次PR会自动化构建发布，发布在development环境，生成不一样的链接可供预览。

github迁移到vercel

1. 确定要部署的github仓库
2. 进入vercel官网进行导入git仓库或者根据模板新建项目

3. 选择账户，如果没有自己的账户，选择Add Github Account进行添加 4. 选择对应账户 5. 在选择的账户上安装vercel 6. 重新进入vercel官网，选择对应账户和代码库 7. 选择后进入配置页面，按自己项目配置后，点击deploy进行构建 8. 到这里就成功了！点击下图红框中的部分都可打开vercel上托管生成的网址 9. 之后每一次提交，vercel都会生成专属的预览链接，如下图

vercel其他功能

新建项目

如果你还没有要部署的项目，可以根据vercel提供的模板创建项目，无需配置，一键即可创建项目和部署流水线，目前vercel共提交42种框架模板。

查看日志

进入某项目，可以看到View Build Logs按钮，点击即可查看编译过程中的日志，如果遇到编译失败，可以在这里查找原因。

查看部署

在项目的Deployments菜单下可以看到所有部署的流水线，可以通过部署状态和分支来筛选符合条件的流水线，每一次commit都有对应的预览环境，针对每一次commit可以有如下操作：

1. Promote to Production：推送到生产环境
2. Redeploy：重新部署
3. Inspect Deployment：查看部署
4. View Source：查看源码
5. Copy UrL：复制当前预览环境的url
6. Assign Domain：分配域名
7. Visit：访问当前流水线生成的预览环境

项目配置

在项目的Settings菜单下可以进行修改配置，如下：

如果你对当前分配的域名不满意，可以在Domains这个目录下进行修改。

vercel还有很多功能，可以自己多去尝试看一下！

总结

vercel部署github项目，非常方便，不需要再将代码合并推送到专属分支gh-pages，即可实现，每一次提交都会生成专属的预览环境。

参考文档

1. juejin.cn/post/711195…
2. juejin.cn/post/710157…
3. juejin.cn/post/690781…