Github Pages双线部署至又拍云存储和Vercel

发表于 2020-09-16 更新于 2024-04-05 分类于 WEB 阅读次数： Disqus：

其实几个月以前我就将整站迁往了又拍云存储，最近趁着更新了hexo版本，兴致正浓，进一步对速度进行了优化，将博客进行了双线部署，国内部署至又拍云，国外使用Vercel提供的服务，现在速度应该是更完美了。

单独使用CDN服务的局限

Github Pages在国内的直连速度大家都懂的，在这之前我使用了又拍云的CDN进行加速（方案在这个post内提到过），速度确实有一定的提升，但是这种方案也存在几个明显的缺陷：

每次hexo g -d部署至Github Pages之后，需要去又拍云网站上手动刷新缓存，否则在缓存期内访问到的页面依旧是更新之前的，这个实在是很麻烦。
对日pv较低的个人博客，加速效果有限。由于流量很低，其他用户第一次访问时，对应的CDN节点大概率是没有你网站的缓存的，需要去源站(Github)回源，而这个过程是很慢的，影响体验。
虽然又拍云CDN提供了源站资源迁移的选项，介绍说可以将源站静态资源无缝迁移到又拍云存储，但测试下来其迁移逻辑不是很明确，效果感觉一般。

综上，之后我一直在寻找更优的方案，就是我接下来要介绍的直接部署至又拍云存储。

部署至又拍云存储

又拍云优势

在进一步介绍之前，先说说我个人为什么采用又拍云吧，个人认为它的核心优势是

免费。在网站底部挂一个又拍云logo即可拿到每月10G存储空间+15G流量，对个人站足够了。
提供免费的https加持
国内访问速度优异

部署至对象存储的优势

相比之前的Github Pages+CDN加速的方案，我后面直接采用了将整站部署至又拍云的对象存储服务中，这样做的好处在于

内容更新之后，不用手动刷新缓存，又拍云会自动刷新CDN节点缓存
又拍云将对象存储服务与CDN服务进行了无缝衔接，无需再手动配置，轻松实现全站接入CDN
即使CDN节点需要进行回源，去其自家对象存储服务回源应该也是更快的

操作步骤

在云存储服务管理中新建服务，应用场景选择网页图片，添加一个操作员并记录下密码，其他选项保持默认即可。
在域名管理中添加自己的域名，随后去DNS服务商中将自己的域名解析至又拍云提供的CNAME。
性能优化中，推荐打开智能压缩，将Gzip和Brotli压缩等级调为3；打开页面压缩和HTTP 302 调度。
HTTPS配置中，推荐配置证书并开启强制访问；同时推荐开启 HTTP/2 + Server Push，具体需要使用Server Push推送哪些css和js可以使用开发者工具观察网络加载timeline，我的配置如下图所示。
在没有充分理解防盗链的情况下，建议不要打开访问控制中的防盗链，如果配置的不对会导致从搜索引擎点进博客时，第一次无法正常加载，需要手动刷新才正常。建议将图片文件等上传至另一个对象存储服务中，然后对图片所在的对象存储开启防盗链，而存储博客页面主体的云存储部分可以不开启防盗链。
边缘规则中我添加了404页面跳转和www跳转。
1. 404页面跳转
2. www跳转，即输入www.tang.su时跳转至tang.su

部署至Vercel

关于Vercel的介绍，以及怎么部署至Vercel网上已经有很多介绍了，我不想再赘述了。

之所以想再额外部署至Vercel，主要是因为虽然又拍云提供了所谓的全球加速功能，但我使用网站国际速度测试时发现海外节点访问速度还不够极致，而Vercel海外访问速度更好，同时Vercel对国内访问速度也比较友好，这样即使国内访问时被分流到了国外线路，拿到了Vercel的地址，也还能有一个能接受的速度。

最终方案

采用DNS进行分流
www.tang.su和tang.su都默认解析至又拍云存储CNAME地址
同时对于国外线路，均解析至Vercel提供的地址
在又拍云中采用边缘规则实现www跳转，在Vercel的Project Settings-Domains配置www跳转。