jsDeliver+Github托管整站静态资源,实现免费CDN

发布于 2020-05-03  1.29k 次阅读


本文于 2022年1月11日 4:23 更新,注意查看最新内容

======2022年1月11日更新======

万万没有想到,两年前写的这篇教程,给两年后博客的更新带来了一点小麻烦。

当时因为考虑加载体验的问题,博客的静态资源很早就放在Github,通过jsDeliver来调用了。

但是后来很长时间不折腾博客,于是就忘了这回事,好几次修主题的小问题,都是直接更新的服务器内主题文件。

结果自然是每次都不成功,之前以为是代码逻辑问题,排查许久都没有个结果,现在才发现问题的方向压根不在代码上。


这次看博客的评论框,就想着把之前遗留的历史问题给解决一下(评论列表默认样式问题),加一行list-style: none就可以解决。

在控制台写的时候一点问题没有,放到style.css里就不生效,百度查找解决方案,说可能是.htaccess缓存和WP Super Cache插件的问题。

.htaccess缓存我应该是有,但是通过更改静态资源后面的版本号,我排除了这个问题。

然后就是WP Super Cache插件,这是一款WordPress的缓存插件,之前有使用过,但是后来就不用了(觉得不方便),自然也排除了这个问题。


百度几番查找和尝试都没有解决这个问题,但是在解决的过程中,我发现我使用的静态资源不在本地,这才想起静态资源托管到了Github。

于是开始在Github直接添加代码,但是同样的,添加之后,直接请求静态资源,发现并没有更新。

这时突然想联系当初发表这个教程的大佬,看看他知不知道这是什么问题(这个时候我觉得是缓存问题,但是不清楚缓存什么时候更新,也没想到可以手动更新),但是发现联系不上。

又想到当初是小易提供的信息,小易可能知道些什么,小易说让我自己搜索刷新缓存,这时我才意识到该去搜索jsDeliver如何刷新缓存,然后便找到了解决方案。

解决

1、将需要刷新的链接,如下:

https://cdn.jsdelivr.net/gh/wbfz89/lkblog/wp-content/themes/Akina-Siren/style.css?ver=2.0.5

改成  https://purge.jsdelivr.net/gh/wbfz89/lkblog/wp-content/themes/Akina-Siren/style.css 即可。

PS:不要携带任何参数,不然可能刷新不成功。

2、将修改后的链接重新请求,即可实时刷新。

刷新成功后,浏览器会返回缓存刷新成功的信息。

PS:重新请求网站时(非静态资源),记得使用Ctrl+F5强制清除缓存。

若发现还是没有更新,可以再次重新请求修改后的静态资源链接。

解决方案来源:《jsdelivr 缓存刷新》

style.css不生效参考方案:《WordPress 解决修改 style.css 不生效问题三步走!》

======2020年5月4日原文======

前言

在小易的推荐下,得知通过jsDeliver+Github能托管网站的静态资源,白嫖免费的CDN,最重要的是jsDeliver在国内有相关节点,速度有保障。

简述

jsDeliver

jsDelivr是一个免费开源的CDN解决方案,用于帮助开发者和站长。

包含 JavaScript 库、jQuery 插件、CSS 框架、字体等等 Web 上常用的静态资源。

GitHub

GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git作为唯一的版本库格式进行托管,故名GitHub。

准备

注册GitHub账号

https://github.com/join

安装Git程序

https://git-scm.com/downloads

国内镜像:

https://npm.taobao.org/mirrors/git-for-windows(淘宝镜像)

https://gitee.com/mirrors (码云镜像)

下载站:https://pc.qq.com/detail/13/detail_22693.html(腾讯软件)

操作

1. 新建github仓库并clone至本地

$ git clone 你的仓库链接 #本地克隆github仓库

2. 将需要的静态资源放到本地git仓库中,并提交到github仓库

$ git add . #添加到库中

$ git commit -m "update" #提交更新(update为自定义信息说明)

$ git push #推送到远程仓库

3. 在GitHub仓库中点击release发布(版本号可以自定义)

这里就不上图了,节省流量,以前一直没发布过,当时还找了一下,如果实在没看到,Ctrl+F5了解一下。

4. 通过jsDeliver引用资源

$ https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径

#栗子:

$ https://cdn.jsdelivr.net/gh/Fofade/cnblogsThemes@1.0/live2dw/assets/z16.model.json #加载1.0版本

#注意如果不加@发布的版本号默认加载最新版本

#栗子:

$ https://cdn.jsdelivr.net/gh/Fofade/cnblogsThemes/live2dw/assets/z16.model.json #加载最新版本

测试

https://cdn.jsdelivr.net/gh/wbfz89/YKCMS/css/bootstrap.min.css #测试时间:2020年5月4号 0:13

经验

若使用不加@发布的版本号,在添加新文件之后,无需重新发布即可调用新添加资源,调用方法还是如上。

参考

《利用jsDeliver+github实现免费CDN》