自娱自乐，我的博客（十一）——Hexo静态网页部署到Vercel

前言：
  之前将博客部署在Coding是因为其免费且可绑定域名，但是最近Coding开始变相收费，COS和CDN采用用量计费模式，作为一个“称职”的白嫖玩家，现在又找到一个免费好用的静态网页部署网站Vercel，也可以绑定域名。下面开始白嫖教程。

1 注册登录

  登录 Vercel 官网，点击“Sign up”登录。

Sign_up.png

  建议使用GitHub账号登录，这样可以方便关联GitHub上的仓库。其实Vercel和GitHub的互动性非常好，可以实现全自动部署。将静态网站提交到GitHub，让Vercel关联上部署静态网站的仓库，一旦仓库有了新的提交，Vercel会检测到并且自动完成部署，部署完成后还会发邮件通知你。

Continue_with_GitHub.png

  网上一些文章提到Vercel不能绑定qq邮箱，我实测是可以的，可能Vercel已经做出改进了。

Authorize_Vercel.png

2 导入Git仓库

  Vercel上登录GitHub账号后，导入Git仓库。因为我们要部署的Hexo是静态网站，因此这里要将GitHub的Hexo部署仓库导入到Vercel中， 注意：是部署仓库，不是原码仓库 。

2.1 Vercel关联GitHub

  首先在GitHub安装Vercel账户。可以指定要关联的仓库，也可以按默认的关联所有仓库。

Import_Git_Repository.png

2.2 导入Hexo部署仓库

  接下来选择要导入的仓库，我的Hexo部署仓库为“onlycalm.github.io”，是一个公有仓库，我们选择“import”它。

Select_Vercel_Scope.png

  按照默认，原码目录选择“onlycalm.github.io”仓库的根目录。

Import_Project.png

  由于Vercel不能以“.”作为工程名，因此自动将工程名设置为“onlycalm-github-io”。“FRAMEWORK PRESET”这里要注意，按照默认选择“Other”即可，我踩了一个坑是将其设置为“Hexo”，这样反倒会部署失败。其他设置也按照默认即可。

Import_Project_.png

  随后Vercel开始自动部署，稍等片刻部署完成后可看到如下界面。

Congratulations.png

  Vercel为网站自动生成了访问网址 https://onlycalm-github-io.vercel.app/

3 绑定域名

3.1 Vercel添加域名

  可以在 阿里云 或 腾讯云 购买域名，比如我在阿里云购买了域名 onlycalm.cn 。我们需要将该域名添加到Vercel静态网站部署仓库中。

Domains.png

Add_Domain.png

3.2 阿里云域名配置

  在Vercel中添加好了域名后还不能立刻访问，还需要配置域名解析，这里以阿里云域名解析配置为例。

onlycalm.png

  按照Vercel的提示在阿里云中添加记录。如果你以前部署过其他平台，请将以前的记录暂停使用。

CNAME.png

  至此Vercel部署已经完成，域名配置可能要等几分钟才会生效。