======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账号
安装Git程序
国内镜像:
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
经验
若使用不加@发布的版本号,在添加新文件之后,无需重新发布即可调用新添加资源,调用方法还是如上。