WordPress使用jsDelivr+Github实现免费全球CDN加速

简介

相信很多开发者对jsDelivr和GitHub并不陌生,对于能把静态资源通过jsDelivr对其实现免费的CDN加速场景,有很多WordPress站长可能不知道如何对其进行使用,那么今天辉哥就教大家WordPress使用jsDelivr+Github实现免费CDN加速。

说明:该想法和构思仅为辉哥个人想法和实现,最终操作和实现还得看技术怎么样,如果本篇内容您觉得无用或过于简单,请自行翻阅更多关于该相关内容的文章。

PS:请详细阅读下面的场景及方案

需求场景:服务器配置差,但是用户访问量多,cdn加载量大,静态资源较多

解决方案:使用jsDelivr+Github实现免费CDN加速

想法及说明:最近辉哥博客访问量激增,服务器的配置也并不高,虽说套了CDN,但是毕竟服务器还有其他网站在运行,用户同时访问的时候并发就会很高,就算CDN能帮助解决很大部分的请求,但是还是有部分内容需要回源,再加上CDN流量包用完了,老用户购买非常贵,这该如何是好呢?于是辉哥想到了jsDelivr和Github,平时在开发前端内容时,需要加载很多Js,例如JQuery,届时很多开发者会从jsDelivr上直接进行引用,以此辉哥想到了,如果把WordPress的静态文件放到GitHub上再使用jsDelivr进行缓存,然后使用jsDelivr的CDN链接进行引用,那么用户在访问网站的同时,只从服务器加载少量动态资源,大量静态资源全部通过jsDelivr的CDN进行加载,这样既能减少服务器的请求,也能减少CDN流量的使用,何乐不为呢!

为什么使用jsDelivr?

jsDelivr是一个提供含JavaScript库、jQuery插件、CSS框架、字体等Web上经常使用静态资源的服务,采用全球CDN加速,确保每一个地区的使用者都能得到最好的链接速度,大陆地区使用国内CDN加速jsDelivr可将不一样的JavaScript或CSS libraries集合在一块儿使用,jsDelivr提供包扣npm GitHub WordPress等项目的镜像服务。最重要的是jsDelivr在国内使用的是网宿的CDN节点延迟低。下面放出一张jsDelivr测试国内延迟的截图。

官方网站:https://www.jsdelivr.com
加速地址:https://cdn.jsdelivr.net

示例:

好比将GitHub仓库中的bootstrap.min.js文件利用jsDelivr加速

GitHub原始地址

https://github.com/twbs/bootstrap/blob/main/dist/js/bootstrap.min.js

jsDelivr加速地址

https://cdn.jsdelivr.net/gh/twbs/bootstrap@main/dist/js/bootstrap.min.js

若是按版本分类,Releases一个v4.6.1版本,那GitHub中的连接地址为

https://github.com/twbs/bootstrap/blob/v4.6.1/dist/js/bootstrap.min.js

jsDelivr的加速地址就是

https://cdn.jsdelivr.net/gh/twbs/bootstrap@v4.6.1/dist/js/bootstrap.min.js

若是GitHub中有多个版本,而要忽略版本直接加载最新版本,可使用latest标签

jsDelivr忽略版本加载最新版本

https://cdn.jsdelivr.net/gh/twbs/bootstrap@latest/dist/js/bootstrap.min.js

准备

说明:辉哥使用的是WordPress+b2主题,其他主题与该主题操作类似,下面辉哥的操作及演示都是基于WordPress+b2主题下进行的,而Git和WebStorm工具可自行使用其他工具代替

WordPress网站

b2主题

Git(非必须)

WordPress使用jsDelivr+Github实现免费全球CDN加速-辉哥博客
WordPress使用jsDelivr+Github实现免费全球CDN加速-辉哥博客

Windows安装Git便捷版,并配置环境变量

按照下面这篇文章将ssh keys添加到你的GitHub上,流程是复制生成的ssh keys文件里面的内容,打开https://github.com/settings/keys,点击新建SSH秘钥,输入名字将秘钥粘贴进去即可

WordPress使用jsDelivr+Github实现免费全球CDN加速-辉哥博客
WordPress使用jsDelivr+Github实现免费全球CDN加速-辉哥博客

IDEA配置码云Gitee的详细教程

WebStorm(非必须)

WordPress使用jsDelivr+Github实现免费全球CDN加速-辉哥博客
WordPress使用jsDelivr+Github实现免费全球CDN加速-辉哥博客

IntelliJ WebStorm 2021.3.1 绿色便捷版

辉哥最终效果

教程(内容可能过长,请耐心阅读)

PS:jsDelivr缓存的内容不能超过50MB,请仔细检查自己上传的资源是否大于50MB,如果大于请自行删除无用的文件,jsDelivr只能缓存静态资源,注意是静态资源,如果不知道什么是静态资源,请百度!如果在该流程中遇到Git的错误,请百度解决!

1、创建GitHub仓库

2、将网站根目录/wp-content/plugins文件夹和themes文件夹下载到电脑上

3、在WebStorm中拉取GitHub仓库

3.1、找到仓库中的代码SSH复制git开头的链接

3.2、打开WebStorm,点击右上角的从VCS获取,版本控制选择git,URL填入上面步骤3.1中复制的链接,目录可以自定义,然后点击克隆

4、将步骤2中下载的网站文件复制到WebStorm下

4.1、选择本地下好的网站文件然后Ctrl+C复制

4.2、点击左上角仓库名,然后Ctrl+V粘贴

5、将文件添加到Git本地缓存仓库如果粘贴后自动弹出让你添加,直接点击添加即可,届时可以忽略该步骤操作

6、提交修改到GitHub

7、查看是否提交成功

7.1、最简单的办法就是刷新Github页面就能看到

8、获取jsDelivr链接,在上面为什么使用jsDelivr的示例中就有说到。下面再次演示一下,示例文件:smartideo.css

8.1、找到并打开smartideo.css文件,这是我们看到链接为:https://github.com/haahs/Res/blob/master/wp-content/plugins/smartideo/static/smartideo.css

8.2、换成jsDelivr的链接就是:https://cdn.jsdelivr.net/gh/haahs/Res@master/wp-content/plugins/smartideo/static/smartideo.css

9、替换网站文件里面的链接,下面简单示例

9.1、PHP替换示例

9.2、CSS替换示例

PS:其他文件按照上面的示例替换就行了

结尾

其实原理很简单,操作上辉哥使用了简单的操作方式并省略了一部分不必要的操作,在操作过程中可能会遇到各种问题,届时可以在下方评论区留言,或者加入辉哥博客交流群,QQ群号为:1058158596,我会尽量帮助你们解决!

如果使用的主题不是B2也是可以操作的,甚至说使用该操作任何程序都可以(只要加载静态资源),如果还是不懂可以留言或者联系辉哥!

文章链接:https://www.haah.net/archives/7234.html
文章标题:WordPress使用jsDelivr+Github实现免费全球CDN加速
文章版权:辉哥博客 (haah.net) 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!
本文最后更新发布于2021年12月17日 23时55分44秒,某些文章具有时效性,若有错误或已失效,请在下方留言或联系辉哥:m@haah.net

给TA买糖
共{{data.count}}人
人已买糖
技术文档网站教程

Alist V2对接MySQL

2021-12-14 21:56:33

技术文档系统教程

Linux宝塔面板7.7专业版破解方式

2021-12-21 19:24:57

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
我是底线可爱胖!冲鸭~