Hugo 网站优化(7): 把我图床搬到又拍云了(upyun), 做图床真的很好用

又拍云 CDN 附加功能很多, 作为资源站很爽。

原文链接: https://tangx.in/posts/2023/01/02/hugo-use-upyun-cdn-for-static-site/

费用

又拍云有一个 联盟推广服务,需要在网站上挂又拍云的 LOGO,相当于广告费。 对联盟成员提供

  1. 10G 对象存储

  2. 15G 流量(支持 HTTPS)

  3. 点击我的 又拍云推广链接 , 注册并完成实名认证,即可获得 61 元免费代金券。 基本够一年使用了。

  4. 申请 又拍云联盟支持 , 再送一年对象存储和流量, 换算下来是 67 元代金券, 直接抵扣费用。

回源

我的博客 老麦的书房 是通过 hugo 编译的静态网站, 通过 Github Pages 发布的。 在国内直接访问还是有一定网络要求的。

上了 CDN 之后, 缓存时间 和 回源效率 成了两个大问题。

经测试, 又拍云的时间比腾讯云更短, 图片展示更快。

这点应该是我个人偏见, 按道理说没命中的资源, 是直接去 github pages 取的。

另外又拍云还支持 源站资源迁移 ,换句话说就是把 Github Pages 资源同步到对象存储中, 进一步加速 CDN。

origin-resource-migration

在腾讯云中, CDN -> COS 的回源流量是收费的,虽然不多。

保持一个良好的书写习惯, 图片替换的时候 使用新名字,而直接覆盖 这个功能很好用。

缓存

又拍云在缓存方面还多一个 分段缓存

CDN 服务可提供分段缓存功能配置,开启该功能可有效降低大文件回源率,提升响应速度,与此同时,可以提高文件在 CDN 节点的缓存命中率。特别地,开启该特性之后,CDN 节点会以 Range 请求回源。

multiple-stage-cache

成本控制

基于 CDN 平台的 WebP 自适应方案,智能判断浏览器是否支持 WebP,来决定返回 WebP 格式图片还是原图,从而减少网络传输消耗。

webp-adaption

腾讯云 CDN 没有这个。

图片处理

支持 压缩、 水印 等功能。

image-management

之前我们在 Hugo 网站优化(5): 图片压缩 中提到, 我们网站本身已经使用 pngquant 进行过一次图片压缩。

这里 upyun 还能对 压缩过 的图片再一次压缩。

腾讯云 CDN 没有这个, 但是好像可以到另一个 万象 服务中处理。

水印图片引用

配置完成后, 在使用的时候需要在图片请求地址尾部加上 标签版本名字

例如上面截图中 标签版本名称 是 !v1, 那么图片调用地址对应为

1
2
3
4
5
# 原来
https://static.tangx.in/posts/2023/01/02/image-management-fs8.png

# 处理后, 注意图片尾部地址
https://static.tangx.in/posts/2023/01/02/image-management-fs8.png!v1

总结

又拍云做图床还是很香的。