Vercel 简介

Vercel 提供免费的 serverless 和全局 CDN 服务,使用者只需要通过几步简单的注册以及导入仓库即可完成部署,从个人体验来看,Vercel 现已支持根据 username.github.io 的 master 分支是否变动来启动自动部署。

2020 年 10 月后 github 新建仓库默认分支改为 main,注意更改。

使用教程

  1. 访问 Vercel 官网,点击右上角的 sign up 进行注册
极有可能遇到的 bug

若注册时提示 Error:This user account is blocked.Contact support@vercel.com for more information.

这是由于 Vercel 不支持大部分国内邮箱。可以将 github 账号主邮箱改为 Gmail 邮箱。
但是根据群友反应,将 github 账号主邮箱切换为 Gmail 以后,Vercel 又会提示需要使用手机号码验证。然而 github 并没有提供手机号码绑定的内容。
综上,建议一开始注册 github 账号时就使用 Gmail 等国外邮箱进行注册。

  1. 国内访问 Gmail 的方案:
  • 直接使用 QQ 邮箱手机版,它提供 Gmail 的访问路线,可以直接注册并使用。
  • 使用 Ghelper 等浏览器插件访问。详情可以参考这篇文章:玩转 Microsoft-Edge
  1. 若是执着于当前 Github 账号,可以参考以下方案进行尝试:
  • 完成了 Gmail 等国外邮箱的注册,打开 github-> 头像 ->settings->Emails->Add email address, 并完成邮箱验证。
  • 在 Add email address 下方的 Primary email address 选项中将 Gmail 设置为主邮箱。
  1. 注册完成后选择新建一个项目

  2. 填入你在 Github 上部署静态页面的地址
    例如我是 https://github.com/Akilarlxh/Akilarlxh.github.io,加不加.git 都不影响最终识别仓库。

    此时可能会提示这是否是你的仓库。

如果是就大胆选 yes,如果是别人的仓库,那就选 No,Vercel 会自动帮你 fork 这个仓库到你的 Github 账号里。

  1. 导入静态页面仓库之前,需要为你的 Github 安装 Vercel,此处建议选择 All repositories,意为为所有仓库安装,当然,你也可以选择只为当前仓库安装,也就是 Only select repositories。

如果哪天反悔了,可以在 github-> 头像 (右上角)->settings->Applications(列表下数上第四个)->Installed Github Apps 里修改。

  1. 之后会识别出你的静态页面,单击 Continue

Vercel 的 PROJECT NAME 可以自定义,不用太过在意,但是之后不支持修改,若要改名,只能删除 PROJECT 以后重建一个了。
下方三个选项保持默认就好,因为 username.github.io 的 master 分支内是本身就已经部署好的静态页面,所以没必要选择特定的框架去再次编译。(博主也试过用源码交给他自动编译部署,但是各种 bug,所以不建议,想要自动部署可以使用 Github Action 来实现。)

2020 年 10 月后 github 新建仓库默认分支改为 main,注意更改。

  1. 到此时,Vercel 的部署其实就已经完成了,可以使用 Vercel 提供的默认域名来访问静态页面,比 Github 的原网站要快许多。

  2. 自定义域名配置

想必到了这步一定不会甘心于默认域名,所以可以在 project->settings->domains 里配置自定义域名,填入自定义域名以后还要根据 Vercel 提供的解析记录去自己的域名 DNS 解析处添加相应解析。以及替换域名解析的 DNS 服务器(视供应商不同,生效时间可能长达 48 小时)。这里 Vercel 的线路建议选择为电信。因为 Vercel 在电信的表现良好,联通和移动就一般般了。之后可以考虑在将移动联通的线路设到 Coding 那边去。关于双线部署的内容可以参考:使用 Coding 和 github 来实现双线部署

找到添加域名页

添加解析记录


在 DNSPOD 添加解析记录

替换 DNS 服务器供应商

可能添加解析记录或者替换 DNS 服务器供应商以后还是显示不生效。可以检查看看你的线路设置是否把 Vercel 线路设置为默认。因为检测时不能保证 Vercel 后台也是走的电信线路。但其实你的配置是生效的。所以可以压制一下强迫症。

2021 年 5 月初,Vercel 因为一些原因被 GFW 屏蔽,导致无法访问。各位可以通过更改相应的域名解析记录来恢复访问。
A 记录就从 76.76.21.21 改成 52.76.85.65CNAME 记录则是从 cname-vercel-dns.com. 改成 cname-china.vercel-dns.com.;关于 A 记录,可用的 IP 值也可以从这个里面找:Vercel 可用解析记录 IP, 因为是 gist,大概要翻墙才能看。

  1. 至此,Vercel 的配置就完成了。可以关闭 DNSPOD 上指向 username.github.io 的解析记录了。

可能存在的 BUG

部分读者反馈,vercel 部署完成后并没有随着对应的 github 仓库更新而触发持续部署。

  1. 打开相应的 vercel 项目,查询Settings->Git->Production Branch

  2. 可以看到 SELECT BRANCH 存在三种选项:

  • main:主分支
  • Repositories Default:对应的 github 仓库的默认分支
  • Custom:自定义分支,选择后在 BRANCH NAME 内写入期望监测的分支名
  1. 一般情况下 main 和 Repositories Default 是等效的。而 2020 年 10 月之前创建的仓库默认分支为 master,此时选择 Repositories Default 或者选择 Custom 后在 BRANCH NAME 填入 master,这两个也是等效的。

  2. 根据 @hopelight 反馈的情况,选择 Custom,并在 BRANCH NAME 填入 master 的方法有时未必生效。可以尝试在 github 仓库中将期望触发监测的分支设为默认分支后,再在 Vercel 的 Production Branch 选项中选择 Repositories Default。

  3. Vercel 未自动更新的情况均定位至此处,遇到相应问题的读者可以尝试三种选项来排除潜在的错误。