因为CDN费用和域名问题(国内使用CDN需要备案域名),而且感觉这玩意很麻烦,所以很长时间内我的网站都是裸奔状态。后来决心正式做站,考虑到流量问题,才正式决定使用CDN给自己的域名加速,在这篇文章内就详细介绍了我是如何使用CDN的。不过这一方案仍然存在域名与费用问题。本文介绍一个免备案、0费用的方案——jsDeliver+github。

原理

首先说明一下加速的具体原理:简单来说,网站引用大量的静态资源(比如图片,css,js,font等等),如果直接放到服务器上,会增加服务器的流量压力,拖慢网站运行速度。而如果我们把它们传至云端,服务器运行时就不需要加载这部分资源,借助CDN,各地的访问速度也会有很大提升。

github不必多说,可以说是一个非常安全的存储库,但它的问题就是国内访问速度太慢。jsDelivr 是一个免费开源的 CDN 解决方案,最大特点是支持github加速。二者结合就有了免费、快速的CDN。

那么jsDeliver如何使用呢?很简单,在仓库路径前加上jsDeliver的CDN域名即可,即:

https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径
# 版本号可忽略,默认加载最新版本

举个例子,上图是我以前在github上存的一张图,如果直接访问,那么加载速度会非常慢,大家可以试一下:

https://github.com/caly5144/tuchuang/blob/master/2019/07/23/DurP97cffECPidNN.jpg

加上CDN后,速度有了明显提升:

https://cdn.jsdelivr.net/gh/caly5144/tuchuang/2019/07/23/DurP97cffECPidNN.jpg

网站加速教程

接下来我们详细说明一下如何加速,全程无需任何代码,确保小白也能看得懂。(PS:其实也可以把它当成一个图床解决方案,百度GitHub+jsDelivr+PicGo可以看到大把教程)

所需软件

首先,确保你安装了以下软件

  • Visual Studio Code(其实任何一个编辑器都可以,但是我比较喜欢它的多文件批量搜索和替换功能)
  • GitHub Desktop,这是Github官方桌面客户端,主要用于github同步,如果你会git的话那就没必要下了。
  • Chrome,同样的,其实任何一个可以F12的浏览器都可以。

然后,我们以一个网址导航源码为例:webstack

可以看到静态资源文件夹足足有11M之多,对服务器来说压力挺大的。

静态资源传至github

首先点击github网站右上角的“+”号,创建一个新仓库。

我这里仓库名填为asset,注意权限要是公开的。

创建完之后,打开GitHub Desktop,登录并点击clone repository

仓库就选择asset,本地路径随便填(我这里是E:\python\git\asset)。

然后这个仓库就会被clone到本地。打开源码,把源码中的assets下的文件全部拖到E:\python\git\asset中。

接着回到GitHub Desktop,可以看到已经提示有文件发生改变了。接着在左下角的框中(提示summary的那个框)填入任意文本,我这里是first。然后点击Commit to master

接着右上角的Public branch就会变为可点击状态,点击后就会进行同步。

这样,我们就把源码的静态资源传到github的asset仓库中了。

CDN加速

为了更好的对比CDN加速效果,我们首先看一下没有CDN时的加载速度。打开chrome,按下F12,切换到Network。可以看到,打开首页加载了2M的资源,访客需要2.86秒才能看到网站内容,42.13秒才能加载完所有资源。

接下来进行优化。把源码文件夹拖到VScode中,然后打开index.html

大致看一下,首页只引用了一个图标,这个页面的功能时跳转到不同语言界面,所以引用资源比较少。我们先不急着改,再看一下404.html,发现同样只引用了一个图标。

那么对于这一层的html页面,根据它们的路径格式,就可以批量修改了,按下ctrl+shift+H,把"./assets/替换为"https://cdn.jsdelivr.net/gh/caly5144/asset/即可

接着我们进入cn文件夹内看一下index.html的引用路径,依此可以进行下一波替换,即将"../assets/替换为"https://cdn.jsdelivr.net/gh/caly5144/asset/

这样下来,应该所有的静态资源路径都已经替换了,我们打开网站测试一下。网站能正常打开,而且加载速度提高了一倍,可喜可贺。

sources选项卡中,可以看到我们的服务器(www.sitstars.com)中只提供了一个index页面,其他资源都是CDN或者其他网站上的。

那么,我该如何确定是否加载完全了,或者说,如果有资源未成功加载,我们该去哪里找?

很简单,切换到Console选项卡,如果有资源未加载会报错的(这里的404是我为了演示故意设置的)。接着根据未成功加载的资源名,在vscode中按下ctrl+shift+f进行全局搜索,看一下相应的引用代码,进行修改。

这样修改—测试—再修改,几步之后就网站加速成功了。

handsome加速

根据上述思路,我们可以把handsome主题下的静态文件上传至github,获得加速效果,我已经传好了6.0.0版本,大家可以随意使用:https://cdn.jsdelivr.net/gh/caly5144/CDN/blog/handsome/6.0.0/

使用方法:把上述链接填到主题后台设置->速度优化->将本地静态资源上传到你的cdn上即可。

Last modification:March 16th, 2020 at 03:46 pm