Vercel Zeit now自动部署Github为hexo博客加速

Zeit Github Cloudflare Netlify速度对比

Zeit now不知道什么时候改名为 Vercel了，又好像被收购了。今下午发现 zeit的访问速度不错，故此跃跃欲试，看看能不能再次为博客提速。

毕竟在墙外，想要让博客有好的访问速度，还是很难的，国内网络环境特别复杂。这几天用网站测速工具看了看，发现移动线路并不是很理想，差不多一片红。

尽管采用了优化线路的 cloudflare，移动访问速度依旧不是很理想，特别是到了晚上。于是就把 netlify也用了起来，因为印象中对 netlify一直不是很好，一年多前用着就感觉不如不如 Github，可能那时候我是联通网络的缘故吧，昨天才是发现 netlify移动网络挺不错的。

下面两图是两个不同网站对移动线路的测试图，做对比的默认走的是 cloudflare未经优化的网络，可见相比之下， netlify目前在国内的移动网络访问速度还是不错的。

移动netlify-cloudflare_ce8

移动netlify-cloudflare_boce

同样，跟 Vercel或者说 zeit对比， netlify也很给力，如下图。

移动netlify-zeit_ce8

移动netlify-zeit_boce

需要说明的是这个测速，只能当做参考，哪怕过几分钟测试，就会有很大出入。比如上图boce网站测的移动netlify平均不到1s，但过一分钟再次测试，可能就达到了7s，经过自己多次对测试， netlify>zeit>cloudflare，但没有找到好的线路来优化 cloudflare，故此这里是未优化的 cloudflare。

电信网络就稍好些，自己多次对比发现， zeit>cloudflare，这里的 cloudflare是特挑的优化线路。联通的情况是 zeit稍好于Github pages>cloudflare，而联通的 cloudflare线路跟电信的一样。

Vercel 自动部署 Github pages

Vercel 可以通过 Github注册登录。步骤也算简单，跟netlify差不多，在URL为https://vercel.com/dashboard时，点击Import Project，然后选择Import Git Repository下的Continue继续，填入你的Github Pages仓库地址，比如为https://github.com/githubname/githubname.github.io，然后继续授权什么的就可以了。

Vercel免费用户提供每个月100GB的流量，跟Github Pages是一样的，在https://vercel.com/dashboard/usage中可以看到具体使用流量信息。

然后在https://vercel.com/dashboard/domains可绑定自定义域名，建议用 CNAME解析就好，不需要NS接入，解析好后 Vercel会自动申请 Let's Encrypt证书，为了能够确保成功申请，路线选择建议为默认，而不要用其他路线，如境外解析路线。

还可以在https://vercel.com/你的vercel名/你的vercel名/settings/domains中，设置Vercel提供的二级域名重定向到你的自定义域名，不然容易分散SEO权重问题。

Vercel域名重定向

最终搞定后，发现有几个页面点击访问出现404，心里有点失落，电信路线极为优秀的 zeit now，为何会出现404，其他的倒也没有问题。

我第一反应是缓存问题， zeit now是有 CDN节点的，但缓存却不是我们可以控制的。之前遇到有很多奇怪的问题，都是 CDN缓存引起的。

最终还是解决了这个问题，问题出现在文件名的大小写问题上。我昨天为了优化hexo博客，发现如果网址 URL中带有大写的名称，在访问的时候会进行一次301重定向，这无疑也增加了一点时间。

于是我就把文件名改为小写，结果在 Github Pages仓库中，文件名还是以 Cloudflare-CDN-Github-Pages.html这样的形式存在，但主页的 index.html文件中的路径却是 https://www.tangruiping.com/post/cloudflare-cdn-github-pages.html这样的链接存在的，结果点击此页面就出现404了。

前面我还以为是不是文件名路径太长所致，后面发现有更长的文件名都可以正常访问，自然就不存在这个问题。所以想到是不是 Github仓库的文件出现了什么问题，而 netlify也是用的 Github Pages，后面发现居然也是文件名大小写问题导致的404。

8月27号再补充一点，Vercel有时候会罢工，表现为在Github上更新了，而Vercel不会更新，没有任何动静，刚好用了一个月时间，碰到过2次还是3次这种情况了，只需要等上一段时间再更新Github，Vercel就正常更新了。

为Vercel和netlify自定义404页面

因为有了前面自己的原因而导致的404错误，而Vercel和Netlify的默认404页面并不是我想要的，那么就看看能不能自定义这个页面吧！

在主题文件夹下的 \source目录放置一个 404.html文件到此即可，最终执行 hexo g后在 public文件夹的根目录下存在 404.html文件即可，这样Vercel和Netlify的自定义404页面就都搞定了。

根据我自己的测试，现在的Vercel不需要 vercel.json文件，之前的办法还是在主题文件夹下的 \source目录新建一个 vercel.json文件，代码如下，官网文档说明 https://vercel.com/docs/configuration#routes/advanced/custom-404

{
 "version": 2,
 "routes": [
   { "handle": "filesystem" },
   { "src": "/(.*)", "status": 404, "dest": "/404.html" }
 ]
}

Netlify跳转到网站主页

Netlify默认给一个二级域名，如xxx.netlify.app，直接访问此域名并不会跳转到你自定义的域名，因此需要新建一个 netlify.toml 文件，写上如下内容，放到网站根目录，或者放到 themes\这里是主题名称\source即可。

[[redirects]]
from = "https://xxx.netlify.app/*"
to = "https://www.tangruiping.com/:splat"
status = 301
force = true
[[redirects]]
from = "http://www.tangruiping.com/*"
to = "https://www.tangruiping.com/:splat"
status = 301
force = true