因为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/
转载时须注明出处及本声明