Hi!请登陆

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

2020-10-21 81 10/21

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

相关推荐