因为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上
即可。
版权属于:作者名称
本文链接:https://www.sitstars.com/archives/78/
转载时须注明出处及本声明