[Hexo]使用CDN让你的Hexo博客拥有飞一般的体验

set-up-cdn-for-hexo

无论是使用 coding 还是 Github 来进行个人博客的托管都会有一个小小的问题,就是访问速度真的是好慢啊QAQ!而如果将很多的资源比如 css、js 以及图片文件使用 CDN 来进行分发,就能使网站的打开速度变得无比顺滑,体验飞一般的感觉!

前言

在阅读下文之前,如果你还不知道 CDN 是个什么东东,为了不大篇幅引用,请移步百度百科:CDN词条进行一些了解~
本文仅仅是为了加速网站的访问,增强用户体验,并不是必须配置的哦!
首先要说一下我这篇文章的适用人群。
首先我们知道,很多的拥有 对象存储 服务的云服务商(如腾讯云),都能够提供静态网站的托管,就类似 coding 和 Github,只是要将每一次生成的静态资源都上传到自己的存储桶中,然后使用 CDN 服务对象存储 中的内容进行分发,这样就可以非常容易地完成个人博客的全站 CDN。
然而!
如果使用国内的 CDN 服务 来进行静态网站托管,域名必须要备案,而根据工业和信息化部关于规范互联网信息服务使用域名的通知,只有过审的域名后缀才可以备案(点此查看可以备案的域名后缀),比如我的域名后缀 .tt 就不在此列😥。

sad-is-so-big

那么就尴尬了😅…
既然我的域名后缀无法备案,那么就没办法直接使用上述方法进行全站 CDN 了。
于是,我使用了一种曲线救国的方式来完成这样的 操作

what-kind-of-process

我备案了一个符合要求后缀的域名,然后将所有的 css、js 以及图片文件等放到该域名对应的存储桶下,然后在 Hexo 网站中调用这个资源域名下对应的静态资源以达到无备案启用 CDN 的目的。
另外!
对于我们的 Hexo 博客来说:
首先,我们主要只需要将图片资源使用 CDN 来进行分发,如果进行全站 CDN(包括 css, js 等其他静态资源),那么会有一笔额外的流量开支(虽然现在也没多少人访问QAQ,不过蚊子再小也是肉嘛!说不定有一天我火了呢!hhh),况且,自己的 CDN 也未必有公共前端资源来得更快。
然后, HTTP协议对同一个域名的同时下载线程数有限制。主要是为了优化下载速度,防止同一域名下下载线程数过多,导致下载速度变慢。各个浏览器都会遵守这个规定,但是限制的数目可能不一致。基于这个原因,可将资源部署于不同的域名,以达到最大化并发下载。
最后,使用不同的域名可以实现静态资源和动态资源的分离,有利于 CDN 的部署,这段话是抄来改了改的QAQ(作者:ziwozizhan,原始链接:https://blog.csdn.net/ziwozizhan/article/details/53420501),虽然我们的 Hexo 博客全是静态的…
这些都是使用独立的域名进行静态资源部署的优点~
那么!
如果你有我这样的烦恼,或者你想要将静态资源使用不同的域名进行 CDN 部署,那么相信我!你找对了教程!(#^.^#)
事不宜迟,我们赶紧开始吧!


概述

各位客官大家建党节快乐!咚咚咚 敲黑板!Miaia 老师的 Hexo 小课堂又开课啦!
同样的,我们还是先说一下本文配置 CDN 所使用的环境:

* Windows 10 1803
* hexo-v3.7.1 + NexT.Muse v6.3.0
* node-v8.11.2-x64
* git version 2.17.1.windows.2
* 还是小可爱一枚

在本文的配置中,我将腾讯云的对象存储CDN服务搭配使用以进行 CDN 的部署(主要是图片资源)。另外,为了节约部分流量,我分别使用了国内和国外的 前端公共静态库 对国内(coding)和国外(Github)不同代码托管库中部分 css、js 文件进行公共 CDN 加速,这部分在 NexT 主题中已经被完美滴独立开来,非常容易配置。

tencent-cloud-global-facilities

如果你使用的不是 NexT 主题,只要将用到的静态资源链接直接更换即可,同样非常方便。
BTW,海外的静态资源(即Github上的静态资源)由于价格(腾讯云送了我贼多 CDN 流量)和服务商的选择问题(腾讯云海外加速公测申请还没通过),我暂时没有进行 CDN 配置,等待以后配置了也会更新文章,但我估计和国内的没有多大区别hhh~
好啦!介绍完了背景和使用的服务,让我们正式开课吧!


基于腾讯云部署 CDN

在这个章节当中,主要会给大家介绍基于腾讯云对象存储和 CDN 服务来对我们的 Hexo 博客进行 CDN 的部署。
在继续之前有一点需要对大家进行提醒:本文中需要一个已经完成备案的域名,由于各地备案要求不一样,所需备案时间也不一样,但一般都至少需要三个工作日,为了不让大家配着配着扫兴,那么请注意,如果你还没有一个完成备案的域名,你可能不能在阅读本文的同时完成 CDN 的部署,你可以先行ICP备案,然后再来继续这篇文章的教程哟!(^U^)ノ~YO
请大家提前注册好腾讯云的账号哈~放上官网链接:腾讯云(https://cloud.tencent.com/)

对象存储部署

创建存储桶

首先我们打开存储桶列表的页面:存储桶列表
打开后我们可以看到这样的界面:

create-bucket-overview

我们点击上图中右侧红框“创建存储桶”来进行创建,会得到一个框框,在框框离可以看到以下内容:

create-bucket-detail

其中,用红框标注的部分需要被选择为“公有读私有写”,名称可以进行 自定义 ,所属地域为了方便我们自己使用,我们可以 选择离自己比较近的位置 ,填写完成后点击确定,至此,我们已经完成了存储桶的创建。

上传静态资源

在完成存储桶创建后(即点击上图中确定后),页面会自动跳转成下图中的页面,我们在跳转后点击下图红框中的“上传文件”:

bucket-overview

在点击上图中的上传文件后,我们可以下图左侧的框框,与此同时,我们进入到博客根目录下的“public”文件夹,public 文件夹中的内容可能类似下图右侧资源管理器中的列表。
注:public 文件夹中的内容是我们执行 hexo c && hexo g 后获得的文件夹,即上传到 coding 和 Github上的文件夹。
为了使教程受用范围更广,并且不造成混淆,以及方便下文中的配置,此处我将整个博客由 hexo 生成的所有内容(即整个 public 文件夹)全部上传到存储桶中,知道哪些需要哪些不需要的同学可以根据自己的实际情况进行筛选。
我们将下图右侧资源管理器中所有内容全选,用鼠标拖到左侧框框中去,然后点击下方的“上传”按钮,即可进行整个博客资源的上传:

upload-assets

下图是点击“上传”按钮的状态,可以看到页面右上角有上传的进度,根据个人网速和存储桶位置快慢不同,但因为总量不会很大,所以一般都挺快的。

uploading-files

在上传完成后,我们可以看到类似下图这样的一个目录结构:

files-uploaded

存储桶回源配置

我们已经完成了静态资源的上传,接下来为了防止在资源尚未上传到存储桶时,造成页面请求的静态资源 404 ,我们需要为该存储桶配置一下回源功能。
在上文中相同页面,点击下图红框中的“基础配置”标签:

origin-overview

将该标签页拖到最下方,我们可以看到下图红框中的“回源设置”:

find-origin-overview

点击上图中红框内的“编辑”按钮,按下图中配置,请注意,在红色箭头位置填写你自己博客的域名,然后点击保存:

origin-detail

然后我们的回源设置就已经配置完成了:

origin-done

至此,我们对象存储部分已经全部配置完成了,仔细好学的你可能会发现这里有跨域访问CORS设置和防盗链等设置。
恭喜你!都学会抢答啦!
但是!本文是要进行 CDN 的部署,而在下文中,CDN 配置中也有相关内容的配置,并且优先级比存储桶的配置更高,所以偷个懒,索性在 CDN 部署中直接进行配置。
不要心急哦!✿✿ヽ(°▽°)ノ✿ 继续继续!

CDN 服务部署

哇!终于到本文的最核心部分了!虽然少了哪一部分都不能正常运作,但是到这里还是很激动哒!😸

添加 CDN 域名

还是先直接进入到腾讯云 CDN 域名管理的页面:CDN 域名管理
我们可以看到如下页面,点击下图红框中的“添加域名”:

cdn-add-domain-overview

然后我们就可以看到一个拥有“域名配置”和“加速服务配置”这两个标签卡的页面~

cdn-add-domain-detail

其中红框中的部分需要我们进行修改。修改说明如下:

  1. 第一个红框中填写的域名必须已经备案!否则无法添加!并且该 CDN 域名是必要的!请务必注意!
    备案教程请点击此处
  2. 第二个红框下拉栏中请选择“对象存储(COS)
  3. 第三个红框中请选择我们在“创建存储桶”章节中所创建存储桶的 存储桶访问域名

除了红框中的内容,其余所有部分保持默认即可,点击“提交”添加域名,如果填写的没有问题(主要是域名备案问题),我们就可以看到如下弹出框:

cdn-add-domain-success

至此,CDN 域名已经添加成功啦~🤩

配置 CDN 域名

我们需要对该 CDN 域名进行一下简单的配置以完善整个功能。
点击上图中的“更多配置”按钮,我们可以进入到以下页面:

set-up-cdn-overview

在该页面顶部位置,我们可以看到“基本配置”、“访问控制”、“缓存控制”、“回源配置”、“安全配置”和“高级配置”共六个标签页。
我们要对其中的“访问控制”、“回源配置”和“高级配置”三个标签页进行 很多项 的配置。
因为配置项比较多,所以就不一一进行列举了,我分别将每个标签页中内容用红框标注出来,红框中的内容是已经配置完成的样子,并且我会在下方附上这样配置的说明。

访问控制

首先,“访问控制”标签页,一共有三个选项需要修改,分别对应三个红框中的内容:

set-up-cdn-authcontrol

  1. 第一个红框中“过滤参数”,一般来说若资源URL中不同参数代表相同的内容,开启过滤参数,可以有效提升缓存命中率。但对我们的静态站点来说并不需要这个选项,开启反而可能造成问题,一般这里默认是关的,如果它不小心弹开了,把它关闭即可。
  2. 第二个红框中“防盗链配置”就是我们上文存储桶配置中并没有进行的操作,我们务必在这里进行白名单配置,否则如果被别人(一般也不会有…)盗链,那么会消耗你的 CDN 流量,这可都是白花花的银子呀~请在白名单中添加你的博客域名。
  3. 第三个红框中“IP访问限频配置”,这个是为了防止CC攻击,但我们的网站挂在 coding 和 Github 上应该没事?我也不是很懂,但不怕一万就怕万一,还是开启比较好。其中QPS需要稍微调大一点,否则如果你设置为10,而你一个页面请求的静态资源超过10个,那么多余的部分就会有 514 HTTP状态码,如果按照本文进行配置后,你发现你的网页显示不正常,而某些资源的状态码是514,那么很可能就是这里设置的原因

回源配置

然后是“回源配置”标签页,只有一个配置需要打开,如下图红框中所示:

set-up-cdn-origin

其中,回源跟踪301/301的解释请见官方文档:什么是回源跟随301/302,反正挺高级的,感觉开了更好不开也没事O(∩_∩)O哈哈哈哈哈

高级配置

最后到了“高级配置”标签页,这部分的每一个内容都需要配置,并且涉及到申请https证书的部分需要跳转到证书管理进行配置,所以这部分进行详细说明,内容较多但不复杂,请耐心往下看哦~(づ ̄3 ̄)づ╭❤~
我们先看一下配置之前这个标签页是什么样子的:

set-up-cdn-senior-overview

我们正式开始配置啦!


第一个,“带宽封顶配置”,配置完如下图所示:

set-up-cdn-senior-first

第一个的配置比较简单,只需要打开开关即可。打开这个配置的原因是,在某些特殊情况,比如DDoS攻击等,可以抵抗攻击并且减少费用,毕竟,走 CDN 无论流量还是带宽都是算钱的哦!


第二个,“HTTPS配置”,因为我们源站已经开启了https,如果 CDN 没有开启https,那么访问站点时就会提示我们的部分内容不安全,所以我们必须在此配置https。
首先,我们前往腾讯云SSL证书管理页面申请一个新的证书,打开页面后我们可以看到如下内容:

set-up-cdn-senior-second-applyssl-overview

我们点击上图红框中的“申请证书”按钮,并选择下图中左侧的免费证书,点击“确定”:

set-up-cdn-senior-second-choose-ssltype

我们进入到下一个页面,其中,通用名称需要填写添加 CDN 域名章节中添加的 CDN 域名,然后填写自己的电子邮箱,自定义备注名,其余位置保持默认即可。

set-up-cdn-senior-second-applyssl-detail

填写完成后点击下一步,进入到“域名身份验证”页面,由于我使用的域名使用的是腾讯云的云解析服务,使用“自动DNS验证”即可,如果你没有使用腾讯云的云解析,请选择合适的验证方式,然后点击“确认申请”按钮,稍等片刻即可完成申请。

set-up-cdn-senior-second-applyssl-check

然后,我们回到“高级配置”标签页,点击下图红框中的“前往配置”按钮:

set-up-cdn-senior-second-overview

我们会进入到如下界面,按照图示中红框中标注的部分,选择前文添加的域名和申请的证书,然后点击“提交”即可完成https配置:

set-up-cdn-senior-second-detail

让我们再次回到“高级配置”标签页,找到下图所示的“HTTP2.0配置”,并打开“HTTP2.0”:

set-up-cdn-senior-third

最后,同样是在“高级配置”标签页,找到下图所示的“HTTP Header配置”,点击“添加HTTP Header”按钮:

set-up-cdn-senior-fourth-overview

在弹出框中如下图所示填写,然后点击确定即可:

set-up-cdn-senior-fourth-detail

这个配置是因为我们的静态资源中有一些会访问外链,会造成一些跨域问题,必须要进行允许,更专业的解释在这里HTTP Header 配置
哇这么大一堆终于配置完了!!!!!٩(๑>◡<๑)۶>)
放一张配置完的“高级配置”标签页截图:

set-up-cdn-senior-done

呀哈哈!终于腾讯云上的配置结束了,接下来,我们就要在本地对 Hexo 博客进行一定的配置来引用我们部署好的 CDN 服务。


配置博客使用 CDN

首先我们需要思考一下,究竟有哪些文件是公共库中有的,而哪些是只能使用我们自有 CDN 的。
我以自己为例:

  • 第一,我原创文章中的图片都是我自己截取编辑的,肯定在这个世界上是独一无二的,公共库和图床中必定没有,所以要在自有 CDN 中引用;
  • 第二,Next 主题中一些独特的 css、js 文件和一些控件、图标的图片文件,公共库中一般也是没有的,所以也要在自有 CDN 中引用;
  • 第三,那些如 jQuery、velocity 乃至于我上一篇文章中 Valine 评论功能使用的 Valine.min.js 文件,这些都是非常多的人在用的,在公共库中都是有的,那么我们就可以将这部分引用公共库 CDN 中的静态文件。

所以这一章节分为两个部分。
第一是将我们独一无二的静态资源,即上方第一第二,使用上文中我们部署的 CDN 服务。
第二是将一些可以使用公共静态库 CDN 的静态资源,即上方第三,进行链接替换。
终于可以看到效果了!你感到激动吗!!!

配置使用自有 CDN

事实上,我们使用的 Next 主题已经很好地为我们将以上的问题进行分离,方便使用 CDN 。
将 Next 主题中一些独特的 css、js 文件和一些控件、图标的图片文件调用 CDN 非常简单,而自己图片资源需要修改一下我们安装的插件。
首先,我们先打开主题的配置文件 _config.yml ,忘记了的同学,老师提醒你,是在根目录下 themes/next/_config.yml 哦!
在配置文件中搜索:Assets ,可以看到如下内容:

# Assets
css: css
js: js
images: images

我们需要将其修改为:

# Assets
css: https://前文中添加的CDN域名/css
js: https://前文中添加的CDN域名/js
images: https://前文中添加的CDN域名/images

这样我们已经非常容易地将主题中的资源文件使用了自有 CDN 。
然而,在写文章的大家基本应该都是使用了 hexo-asset-image 这个插件来添加图片对吧~
如果不是,在博客根目录下打开 Git Bash ,输入 npm install hexo-asset-image --save 即可安装这个插件。
要知道,这个插件是为我们生成图片链接的,在文章中我们通过 ![图片描述](图片文件名) 这样的方式来添加图片,而每一篇文章都有一个同名文件夹,该文件夹中存储着我们所有的图片,在 hexo g 时生成相应的图片链接。
那么,我们就需要修改生成的文件,来使用我们的自有 CDN。
首先,找到并打开博客根目录下 node_modules/hexo-asset-image/index.js 这个文件。
然后搜索:$(this).attr('src', '/' + link + src); 这行内容,我们可以看到以下内容:

...
if(linkArray[linkArray.length - 1] == srcArray[0])
  srcArray.shift();
    src = srcArray.join('/');
    $(this).attr('src', '/' + link + src);
  }
});
data[key] = $.html();
...

这部分代码就是生成图片链接的部分,我们将其修改为:

...
if(linkArray[linkArray.length - 1] == srcArray[0])
  srcArray.shift();
    src = srcArray.join('/');
    $(this).attr('src', 'https://前文中添加的CDN域名/' + link + src);
  }
});
data[key] = $.html();
...

保存文件,重新生成!哇哦!居然成功了诶!!!

配置使用公共静态库

我们使用的 Next 主题已经很好地为我们将以上的问题进行分离,同样方便使用公共静态库。
首先,我们先打开主题的配置文件 _config.yml ,在配置文件中搜索:Script Vendors,搜索结果下面一大片全都是可以使用公共静态库的部分,直接在冒号后填写我们要替换的公共静态库链接即可。因为每个人使用的功能都不太一样,这里我就不一条一条填写了,为大家提供几个好用的我自己在用的前端公共静态库。国内篇适合 coding 配置,国外篇适合 Github 配置,特殊篇请看说明。

国内篇

国内有很多很多的静态库,我看了不少评测,最终选择的是 BootCDN 这个前端公共库。
官方网站地址是http://www.bootcdn.cn/,只需要在其中进行搜索,基本都是有的!

bootcdn

国外篇

国外的静态库也同样很多,但是很多就没有那么全,在这里我推荐 cdnjs 这个前端公共库。
官方网站地址是https://cdnjs.com/,只需要在其中进行搜索,基本也都是有的!

cdnjs

特殊篇

搜索过的童鞋可能会发现,我们上文中使用到的 Valine 在上面两个库中居然暂时都没有???
那么我们对 Valine 有一个特别的选择,这个公共库对于国内外访问都蛮快的,如果有什么上面两个没有,也可以到这里搜索一下。
这家公共库名字叫 jsDelivr ,官网地址是https://www.jsdelivr.com/,同样拥有搜索功能,很容易就可以找到啦!

jsdelivr


总结

告诉大家一下检查是否生效的方法,只需要在浏览器内右键-检查,选择 Network,然后刷新页面,查看下方静态资源的链接就可以啦!比如这样:

check-success

本文的战斗时间真的非常长…其实我当中跑出去旅游了一段时间hhh
我每次在写文章的时候都会重新配置一遍,因为担心自己会写错误导大家…
当然…很可能还会漏掉一点什么或者错掉一点什么…欢迎指出!感恩!!!
哇呜!居然写了这么长的一篇文章qaq,真的好多图片啊!
小伙伴们可以给我分享一下推荐一下给身边要建博客的小伙伴们吗!谢谢大家!!!♪(・ω・)ノ

坚持原创!欢迎客官给我打赏买小裙子吖!✿✿ヽ(°▽°)ノ✿