WordPress 使用 Github & JsDelivr 加速静态文件

IT资讯
IT资讯
IT资讯
1180
文章
239
评论
2023-09-0518:49:22
评论
189 3288字

一个网站的打开速度至关重要,会直接影响搜索引擎排名和用户体验。如果您的网站加载越慢,用户离去的就会越快,而用户又是我们生存的根本。

当然网站加载速度受很多因素影响,今天我们使用 Github & JsDelivr 加速前端静态文件。此方法比较适用于服务器带宽小、主机在国外、省CDN流量钱。

Github 是著名软件源代码托管服务平台,JSDelivr 是用于开源项目的免费公共CDN,国内由网宿CDN提供节点支持,国外主要有Cloudflare、Fastly提供节点。

WordPress 使用 Github & JsDelivr 加速静态文件

Jsdelivr全球节点分布图

方案思路:

通过 Github 托管代码,然后通过 JsDelivr 公共CDN访问 Github 上面的文件。

安装Git

在你的网站服务器上面安装git

RHEL 或 CentOS系统,你可以使用 yum:

yum install -y git 

debian & ubuntu  下的命令:

sudo apt install git

说明:如果是 Windows 系统直接访问下载安装:

Github官网

配置Git:

git config --global user.name "用户名"
git config --global user.email "Github邮箱"

配置登录公钥并记录公钥:

ssh-keygen -t rsa -C "Github邮箱" #弹出来的提示一直回车即可
cat /root/.ssh/id_rsa.pub #查看刚在生成的公钥

PS: 如果是windows系统证书生成的默认路径在 C:Users用户.ssh 下。

配置Github:

Github官网

1.登录 Github 之后点击右上角头像 然后选择 Settings

2.在 Settings 页面左侧点击 SSH and GPG keys

WordPress 使用 Github & JsDelivr 加速静态文件

Github Setting

3.然后点击 New SSH Key 输入之前生成的公钥:

WordPress 使用 Github & JsDelivr 加速静态文件

Add SSh Keys

到这里就配置完成了,我们可以通过一条命令测试连接配置是否成功。

ssh -T git@github.com

Hi “您的Github用户名” You’ve successfully authenticated,及表示连接成功,说明配置的没问题。

WordPress 使用 Github & JsDelivr 加速静态文件

连接成功-min

创建 Github 仓库

1.登录到 Github 之后点击右上角头像旁边的「+」,选择 new repository 创建新仓库。

2.在仓库创建页面仓库名 ,务必选择 Public 以便可以通过JsDelivr访问。

WordPress 使用 Github & JsDelivr 加速静态文件

Github 新建仓库

通过 Git 同步内容到 Github

如果您对 Git 不太了解,我们建议您先查看下面内容了解 Git

Git入门教程

进入你要托管的网站目录

cd /web/wangshuashua.com #进入站点目录

我们只需要上传一些静态文件比如js、css、图片、字体等,因此我们要在上传的时候排除掉php、html、xml、po等文件。

我们需要在网站目录下创建.gitignore文件,用来排除我们用不到的一些文件,编辑文件内容如下;

创建 .gitignore

touch .gitignore

编辑 .gitignore

vi .gitingnore #编辑文件命令

把以下内容复制到 .gitignore 内容然后输入 :wq 表保存退出。

# 排除文件目录
*.php
*.html
*.xml
*.po
*.mo
*.json
*.txt
*.htaccess
*.zip
*.gz
*.phtml
*.html.gz
*.bmp
*.md
!/wp-content/cache/
!/wp-content/upload/ #这个看您自己需求,因为我图片是交给oss管理了。
!wp-content/cache/

通过 git 同步静态文件到 github.

git init #初始化git
git add -A wp-content wp-includes .gitignore #添加要上传的文件
git commit -m "Up statics" #提交说明,可以自定义
git remote add origin git@github.com:seokwong/wss.git # github后面替换为自己仓库的SSH链接
git push -u origin master #开始上传至Github仓库,过程取决于你文件多少。

如果完成之后您的仓库会发现仓库里面有内容了。

WordPress 使用 Github & JsDelivr 加速静态文件

上传完毕后后

获取静态文件路径

https://cdn.jsdelivr.net/gh/用户名/仓库名/
例如:https://cdn.jsdelivr.net/gh/sdfghewr/wss/wp-includes/css/dashicons.min.css
上面的 sdfghewr 用户名 wss 为仓库名。

如果你有多个分支版本可以在仓库后添加 @commit 编号,例如:https://cdn.jsdelivr.net/gh/sdfghewr/wss@tjetadgert7u453w3523r4r6qwewe53gwerq/wp-includes/css/dashicons.min.css

commit编号获取

仓库页面点击 commit

WordPress 使用 Github & JsDelivr 加速静态文件

替换wordpress静态文件路径

1.通过WP-Super-Cache 替换,配置可以参考下图。

WordPress 使用 Github & JsDelivr 加速静态文件

wp super cace配置CDN支持

2.通过代码变更:

//静态文件CDN加速
if ( !is_admin() ) {
add_action('wp_loaded','yuncai_ob_start');
function yuncai_ob_start() {
ob_start('yuncai_qiniu_cdn_replace');
} 
function yuncai_qiniu_cdn_replace($html){
$local_host = '博客域名'; //博客域名
$qiniu_host = 'CDN加速域名'; //CDN域名
$cdn_exts = 'css|js|png|jpg|jpeg|gif|ico|woff|woff2'; //扩展名(使用|分隔)
$cdn_dirs = 'wp-content|wp-includes'; //目录(使用|分隔)
$cdn_dirs = str_replace('-', '-', $cdn_dirs);
if ($cdn_dirs) {
$regex = '/' . str_replace('/', '/', $local_host) . '/((' . $cdn_dirs . ')/[^s?'";><]{1,}.(' . $cdn_exts . '))(["'s?]{1})/';
$html = preg_replace($regex, $qiniu_host . '/$1$4', $html);
} else {
$regex = '/' . str_replace('/', '/', $local_host) . '/([^s?'";><]{1,}.(' . $cdn_exts . '))(["'s?]{1})/';
$html = preg_replace($regex, $qiniu_host . '/$1$3', $html);
}
return $html;
}
}
  • Copyright ©  PC在线云端  版权所有.
  • 转载请务必保留本文链接:https://nrcs.xyz/networks/11857.html
Orgorg速率最高可达1000Mbps,流畅观看Youtube 4K、TikTok,支持 Windows、Android、iOS、Mac,支持 微信、支付宝 付款!
超高性价比,新用户注册送1元,可直接在商店购买套餐。节点和负载服务器很多,稳定性和速度有保障。有共享流媒体会员。有三端VPN程序。最萌の云 ☁️顶级云服务商,超过50个G口节点,上百台服务器负载加速,稳且快,高峰秒8K。提供网飞等会员共享,超值!限时免费尝鲜!
全球数据中心,多点BGP保证速度,无视晚高峰,全天4K秒开,IPLC专线无惧封锁
全IEPL /青云跨境,高峰时期稳定8K播放,流媒体影视, ChatGPT 解锁保障,客户端无日志保护您的隐私安全,稳定运行5年+
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: