本文为 hexo 博客访问优化下篇,主要介绍了使用腾讯云对象存储来加速博客静态资源的访问的方法,上篇主讲选用合适的国内外 CDN 来加速 hexo 博客全局访问速度,两篇文章均是在没有备案域名的前提下进行的 。

上篇:hexo博客访问优化-CDN选用

下篇:hexo博客访问优化-COS使用

前言

本文主要是介绍使用腾讯云对象存储来加速 hexo 网站访问的方法,但本文所提到的插件 hexo-static-cos 适用于所有类似于对象存储的云服务提供商,只要能够存储网站镜像都可以用来加速,包括但不限于自建服务器、CDN、jsDelivr 镜像等,详细情况请看下文介绍。

先复制粘贴个对象存储的介绍吧。

对象存储,也称为基于对象的存储,是一种数据存储,其中每个数据单元存储为称为对象的离散单元。对象可以是离散单元,类似于pdf,音频,图像或视频文件。这些对象实际上可以是任何类型的数据和任何大小的数据。

其实就是弄个类似云盘的东西来当你的图床,顺便存一些其它的静态文件。

然后看看国内各个云服务厂商关于对象存储和 CDN 的免费活动和收费情况(大部分数据来自《米扑博客调研一览表(2018-09-16)》,自己整理收集了一小部分)

服务商云存储CDN
名称免费空间收费价格备注免费流量收费价格备注
七牛云10GB0.148元/GB/月标准存储免费10GB/月10GB/月HTTP 0.24元/GB & HTTPS 0.28元/GBHTTP 免费/HTTPS 收费
又拍云10GB0.129元/GB/月标准存储免费10GB/月,需要挂官方 logo15GB/月0.29元/GBHTTP/HTTS均免费,需要挂官方 logo
腾讯云50GB0.130元/GB/月标准存储免费50GB/月,开通后免费六个月10GB/月0.21元/GBHTTP/HTTS均免费,开通后免费六个月
阿里云5GB0.120元/GB/月5GB免费仅限香港和海外区0.24元/GB无免费
网易云50GB0.123元/GB/月标准和低频存储均免费,个人用户实名通道暂时关闭0.23元/GB无免费
青云10GB0.147元/GB/月标准和低频存储均免费0.23元/GB无免费
Ucloud20GB0.156元/GB/月标准和低频存储均免费0.34元/GB无免费
百度智能云0.119元/GB/月无免费0.20元/GB无免费
华为云0.120元/GB/月无免费0.20元/GB无免费
京东云0.128元/GB/月无免费0.35元/GB无免费
景安云0.150元/GB/月无免费10GB/天0.30元/GBHTTP 免费
滴滴云0.125元/GB/月无免费
猫云20GB0.100元/GB/月标准存储免费20GB/月,需要挂官方 logo30G0.23元/GBHTTP/HTTS均免费,需要挂官方 logo
天翼云0.250元/GB/月无免费0.22元/GB无免费

其中能不备案使用官方提供的域名进行“对象存储 + CDN”加速的有百度智能云、腾讯云、阿里云和 UCloud,其中阿里云的对象存储的官方加速服务和 CDN 服务是独立的,收费也比较贵,其余大部分服务商即使官方不提供域名进行 CDN 组合加速的,默认提供的对象存储的域名也是能直接使用的(虽然没有 CDN 加速但是因为服务器在国内,大部分区域访问速度也不错)。

然后最近很多家都在做双十一的活动(腾讯云有一元钱的礼包哦),这里只列出上面能使用 CDN 组合加速的几家

百度智能云:https://cloud.baidu.com/campaign/Promotion-20191111/index.html

腾讯云:https://cloud.tencent.com/act/pro/cos

UCloud:https://www.ucloud.cn/site/active/cdn-ufile.html

阿里云:https://www.aliyun.com/1111/2019/products#module-6372043750

COS 配置

这里只讲腾讯云对象存储和 CDN 的配置方法,其它云服务厂商大致相同。

购买就不说啦,首先创建存储桶,区域主要看你前面所购买的存储包的位置(每个区域收费都不一样,参见产品定价),由于后面我要使用 CDN 而且要开启鉴权这里就选择私有读写啦,有的厂商 CDN 不能单独设置鉴权,所以这里建议一般还是选择公有读私有写哦。

image-20191112210241327

创建好过后就可以开始设置存储桶了,打开基础设置,找到跨域访问CORS设置,添加上你网站域名;找到回源设置,这里填你网站的域名如www.example.comexample.github.io(这里有一个问题就是腾讯云没文件经常回源失败直接返回 404,所以后面我们还是要手动上传同步一下)。

image-20191112213118056

然后到啦最重要的步骤,打开域名管理,编辑默认加速域名保持如下默认选项即可(但是如果你前面和我一样选的私有读写的话,这里需要点一下添加 CDN 服务授权,然后开启回源鉴权)。

image-20191112215450319

然后加速域名hanabi-1251438221.file.myqcloud.com就是你后面插件里面需要用到的域名了,默认已经帮你配置好了 https(UCloud 的话默认没有 https,需要自己申请证书添加,申请证书的域名验证方式选文件验证就行)。

接着我们打开 CDN 控制台的域名管理进行进一步配置,等待部署完成过后,点击管理打开域名的详细配置界面,打开访问控制,因为我们加速的全是静态资源,所以建议把过滤参数打开,防盗链也建议设置一下白名单为自己网站的域名,IP访问限频的话看情况开启,主要是防御CC。

image-20191112223443939

打开缓存设置,因为我们主要缓存图片等静态资源,所以可以把时间设置长一点,减少回源流量的开销,我这里设置了一个月,分资源设置的话请看文档(比如你想单独设置 css 和 js 文件只缓存一天)。

image-20191112223738245

到这里设置就基本结束啦,如果你前面设置的是公有读私有写的话,可以直接去看下一部分 COS 使用

如果你和我一样设置的是私有读写的话,请继续看。这里说一下下我为什么要开鉴权,因为 COS 直接回源的话相当于你源站的一个镜像站了,直接打开能进行访问的,我担心会分走我博客的权重被搜索引擎错误收录,所以开启了鉴权(只允许直接访问图片和 css 等静态文件,禁止访问 html),腾讯云这里 CDN 鉴权是单独设置的,有的厂商(比如百度智能云和 UCloud)的鉴权只能在对象存储的控制台设置,就在那边进行相关的设置吧,一般是在对象存储控制台的“Policy权限设置”里面,添加指定策略即可。

好的我们打开 CDN 控制台的安全配置,里面有一个鉴权配置,点击打开,模式随便选一个,秘钥和有效时间随便填一个,鉴权对象选择指定文件类型不鉴权,建议添加以下静态资源项目,或者你也可以选择指定文件类型鉴权,然后只填写.html;.htm

.jpg;.png;.jpeg;.gif;.webp;.bmp;.ico;.svg;.icon;.tga;.imb;.js;.css;.json;.txt;.md;.csv;.xml;.log;.conf;.vue;.ttf;.otf;.woff;.woff2;.eot;.sfnt;.mp3;.mp4;.avi;.mpeg;.rm;.ra;.ogg;.wav;.wmv;.rmi;.aac;.rmvb;.mkv;.flv;.swf;.mov;.movie;.map

添加完后效果如下

image-20191112230511267

COS 使用

首先文件管理推荐使用官方的客户端,操作方便,登陆方式等详情见官方文档。你还可以像下面这样设置同步文件夹,不过如果你设置了回源域名的话一般没有的资源都会自动镜像源站,回源失败的时候才需要手动上传或同步。

image-20191112231241886

然后我们打开本地 hexo 的目录安装插件 hexo-static-cos

npm install hexo-static-cos --save

打开主题配置文件_config.yml添加以下内容

# qcloudcos
qcloudcos:
  enable: true # 是否开启对象储存
  domain: usersubject.file.myqcloud.com # 对象储存或 CDN 域名,无需填写 http/https
  onlypost: false # 是否只替换文章内资源
  priority: 10 # 插件执行优先级,数值越小越先执行,默认为 10
  img: true # 是否替换 html img 标签,下列项目同理
  link: true
  script: true
  audio: false
  video: false
  source: false
  track: false
  area: false

其中 domain 改为前文提到的加速域名hanabi-1251438221.file.myqcloud.com,如果你只想加速文章内的图片就把onlypost设置为true,下面的img也设置为true,如果你还需要加速博客内的 css 和 js,则需要把onlypost设置为false,下面的img link script也设置为true,其他的以此类推,根据需要开启,然后你博客内的对应静态资源链接就会在hexo g时自动生成为腾讯云对象存储的地址了

其实还可以直接使用 jsDelivr 来充当加速域名,具体可以看看这位敲厉害的大佬的博客哦《JsDelivr 全站托管》,我也是看了过后才知道居然还可以这样诶,不过感觉白嫖 jsDelivr 有点太无情啦哈哈

注意事项

使用本文方法和插件有一个前提,你文章内的图片资源地址必须是相对于博客根目录的链接,比如你在博客 markdown 文件内引用图片的格式为

![example](/assets/img/example.jpg)

或者如果你启用了 hexo 的 post_asset_folder 功能的话你的图片引用格式应该为

{% asset_img example.jpg This is an example image %}

如果为以下几种格式时必须安装 hexo-asset-image 插件且将本插件的 priority 设置为 11

![example](example.jpg)
![example](postName/example.jpg)
![example](/postName/example.jpg)

另外如果你要替换 css 和 js 等静态资源那你博客主题内引用静态资源的链接也必须是相对于博客根目录的(一般主题都是这样)

到这里节结束啦,博客的配置比较简单,而关于对象存储和 CDN 的更多详细设置请多多阅读对应的官方文档,如腾讯云的《对象存储-控制台指南》和《内容分发网络-用户指南

附件 - 对象存储调研一览表:objectStorage.xlsx



程序   笔记
本文作者:七夏浅笑
版权声明:本站文章除特别声明外,均采用 CC BY-NC-SA 3.0 CN 协议进行许可