使用 Vercel 自动部署博客网站

由于 GitHub Pages 在国内的访问速度实在不理想,使用 Cloudflare CDN 也没什么太好的效果,因此一直在寻找合适的替代品。最近了解到 Vercel 同样提供了简单的一键式托管服务,同时在国内访问速度十分优良,因此迁移到了该服务。下面简单记录一下折腾的过程。

一键托管

导入站点

Vercel 的使用十分简单,只需要使用 GitHub 登录,然后填写源码所在的 repository 地址即可,会自动识别使用的框架,并自动生成静态文件后部署。Vercel 会自动分配给你一个网址,用来预览效果。

自定义域名

在项目主页点击 Settings -> Domains 可以添加自己的域名,由于想要使用 Vercel 自带的 CDN 服务,需要在 DNS 记录中配置域名的 CNAME 到到 vercel,为了加速国内访问,可以使用中国专用的 CNAME 域名。

1
2
3
Type Name Vaule
CNAME www cname-china.vercel-dns.com
A @ 76.223.126.88

自定义部署

使用 Vercel 的全自动部署固然方便,然而会遇到一些小问题,比如这里提到的网页时间问题,需要先处理一下文件的时间。此外还可以自定义 404 页面 /404.html,之后 Vercel 会自动定向到自定义的 404 页面。

自定义部署命令

Vercel 默认读取的是根目录中 package.json 的部署命令,因此想要修改部署时执行命令的话可以先在根目录添加一个 vercel.sh 文件,写好自定义命令。

1
2
3
4
5
6
7
#!/bin/bash

export TZ='Asia/Shanghai'
git ls-files -z | while read -d '' path; do
touch -d "$(git log -1 --format="@%ct" "$path")" "$path";
done
hexo generate

之后修改 package.json 中的 scripts 部分,然后在 vercel 的 BUILD COMMAND 中填入 npm run build

1
2
3
4
5
6
"scripts": {
"build": "bash ./vercel.sh",
"clean": "hexo clean",
"deploy": "hexo deploy",
"server": "hexo server"
},

这样 Vercel 在部署时就会执行 vercel.sh 的命令了。

自定义 headers

Vercel 默认的 cache-control: max-age=0,有时不利于用户体验,可以自定义 headers,在项目的根目录下添加 vercel.json 文件,填入以下内容即可。

1
2
3
4
5
6
7
8
9
10
11
{
"headers":
{
"source": "/(.*)",
"headers": [
{
"key": "cache-control",
"value": "max-age=600, must-revalidate"
}
}
}

此外也可以根据自己的需要来进行更细致的控制,在 Project Configuration 可以查看完整的配置说明。

Vercel 还支持 Serverless 功能,包括 Node.js, Go, Python, Ruby 语言,可以轻松开发自己想要的玩法。