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
    2. 若是执着于当前Github账号,可以参考以下方案进行尝试:
      • 完成了Gmail等国外邮箱的注册,打开github->头像->settings->Emails->Add email address,并完成邮箱验证。
      • Add email address下方的Primary email address选项中将Gmail设置为主邮箱。
  2. 注册完成后选择新建一个项目

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

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

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

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

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

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

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

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

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

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

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

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

更多内容