使用 Vercel 部署 Hexo 博客

一、写在前面

我的博客使用 Hexo 生成，使用 Butterfly 主题。部署在 GitHub Pages 上，一开始使用默认的域名 vampire-locker.github.io，后来使用购买自阿里云的域名 wuxx.top。现在需要让百度、谷歌搜索收录我的网站，搜索了一圈，发现有人说如果是部署在 GitHub Pages 上，百度是无法抓取的。由于没有找到官方的文档，我尝试问了下 ChatGPT （GPT-4o），它是这样回答的：

可以让百度搜索收录您的个人博客站点，即使它是部署在 GitHub Pages 上。尽管有人说百度无法抓取 GitHub Pages，但实际情况是可以抓取的，只是可能比抓取国内服务器上的站点要慢一些。如果您想加快百度收录速度，将站点部署到 Vercel 也是一个不错的选择，因为 Vercel 在全球有更好的分发网络，能提供更快的访问速度。

啊这。。。这算不算以讹传讹呢？话说回来，既然提到 Vercel，还是用一用试试。

还有一些细节，这里先提一下。

我的 Hexo 站点源文件，也就是 hexo init 生成的文件，一开始我是提交到我的 github 仓库 vampire-locker.github.io 的 main 分支，然后生成的静态网站，即 hexo generate 生成的文件提交到 gh-pages 分支。这样就实现了站点源文件和静态网站的分开管理。后来随着深入使用，陆陆续续的在主题配置文件 _config.butterfly.yml 中配置了一些插件的参数，为了保护隐私，我将站点源文件部署到了一个私有的 github 仓库 MyHexoBlog。而 vampire-locker.github.io 的 main 分支不再更新，静态网站依旧部署在 gh-pages 分支。如图：

而实际上，我们需要关联到 Vercel 不是 vampire-locker.github.io 的 gh-pages 分支，而是 MyHexoBlog 的 main 分支，这跟部署到 GitHub Pages 还是有些区别的，可以按照是线下 hexo generate 还是线上 hexo generate 来理解。
前面我部署到 GitHub Pages，是在线下（本地）执行 hexo generate 的，生成静态网站后，再执行 hexo deploy 将其部署到线上。
而 Vercel 不一样，Vercel 是可以关联我们的 GitHub 仓库的。一旦我们将其关联上，当我更新站点源文件到 MyHexoBlog 仓库，Vercel 会自动检测到更新，并在线上执行 hexo generate 进行部署。

二、部署步骤

1、关联GitHub

进入 Vercel官网，如果未使用过 Vercel，点击右上角 Sign Up 进入注册并关联 GitHub 的流程。

个人用户选择免费版本 Hobby；输入用户名，这里我输入我的名字拼音。

选择 Git 提供商。这里只是初步选择，后面还是可以添加别的。

需要验证手机号码，国内手机可用。

2、导入仓库

添加 GitHub 账号。

这里我选择关联所有仓库。未来如果在 GitHub 中新增仓库，也会自动关联过来。

这里就可以选择要部署的仓库了。看仓库前面的图标，Vercel 还会自动识别仓库的应用类型。

3、应用部署

因为 Vercel 自动识别出仓库是 Hexo 类型的，这里的配置先按默认的来就行，点击 Deploy 就能开始部署。

部署完成，可以看到左边加载的正式博客的内容。接下来可以进入控制面板进行自定义域名或者进行其它的配置。

Vercel 会根据项目名称自动为其分配一个以 .vercel.app 结尾的域，点击可以访问。
还有个自定义域名的输入框，填写会点击 Add 进行添加。

4、自定义域名

参考 Vercel文档，开始配置自定义域名。
Vercel 也提供域名购买的服务，这里我使用之前已经在阿里云购买的域名，参考这里的配置文档。

这里我填入我的顶级域名，点击 Add 按钮添加

会弹出提示框，有三个选项。第一个选项是将 www 子域名设置为主域名，并重定向顶级域名，这也是 Vercel 推荐的。从文档部署和重定向域也可以找到相关解释。这里我就选择第一个。

填完后，会报两个 DNS 的解析错误。

其实就是需要在域名提供商那里增加两条解析记录：

Type	Name	Value
A	@	76.76.21.21
CNAME	www	cname.vercel-dns.com.

5、DNS解析

这里我以阿里云作为例子，在域名列表中找到需要配置的域名，点击解析。

添加两条记录

查看 Vercel 控制面板，提示需要移除旧的解析记录。

这里我将之前的 GitHub Pages 的解析记录进行暂停。

再次查看，提示 DNS 解析成功，但是需要一些时间生效。这时候访问域名是失败的。

过一段时间，再次访问，发现访问成功了。
通过 whatsmydns 查看下

6、如何用回 gulp

此前我的博客部署在 GitHub Pages，都是在线下执行 hexo clean && hexo generate && hexo deploy 进行部署的。
因此当我开始使用 Gulp 压缩网站，命令变成了 hexo clean && hexo generate && gulp && hexo deploy。
但是现在我的博客已经部署到 Vercel，不再需要线下 hexo gnerate，而是通过更新博客的 GitHub 仓库，进而触发 Vercel 自动生成并部署。那我如何将 gulp 插入到 hexo generate 之后呢？其实只需要修改一个地方即可：