WordPress折腾笔记——使用Github+jsDelivr加速所有本地静态资源

/ 0评 / 6

刚刚才记录了Github当图床并使用jsDelivr CDN加速图片加载一文,接着也把本地JS+CSS使用CDN分发的方法草草地码一下吧

思路和操作方法是借鉴了CentOS7安装使用github上传/更新项目

配合使用的插件是 WP Super Cache

还是一样的思路,文件存储至Github并使用jsDelivr加速,我使用的CentOS7系统为例

安装git,配置自己的Github邮箱和用户名,不能落下英文引号

yum install -y git #安装git
git config --global user.name "Github用户名"
git config --global user.email "Github邮箱"

配置登录公钥并记录公钥

ssh-keygen -t rsa -C "Github邮箱" #这一步之后弹出提示一路回车不管
cat /root/.ssh/id_rsa.pub #输出刚刚创建的公钥复制一份,等会用到

浏览器上登录好Github,依次点击右上角头像-Settings-左侧的SSH and GPG keys

到这一步点击右上角的new SSH key,title中填入说明信息,建议使用root@服务器IP地址以便区分

测试服务器与github的SSH连接,提示You've successfully authenticated即测试成功

ssh -T git@github.com

创建仓库……省略,我这里创建了个reshub

进入WordPress站点目录,我这里目录就是pishifu.org

cd /home/wwwroot/pishifu.org #进入站点目录

进入Github仓库,获取SSH链接,一会用到

网站目录下执行touch .gitignore创建.gitignore文件,编辑文件内容如下,因为我们只需要用Github存储本地的CSS、JS、ttf、woff等资源,所以其他无关紧要的文件内容使用.gitignore进行排除,太大的文件就不要浪费Github的资源啦

# hult
*.php
*.html
*.xml
*.po
*.mo
*.htaccess
*.zip
*.gz
*.phtml
*.html.gz
*.png
*.jpg
*.jpeg
*.bmp
!/wp-content/cache/
!wp-content/cache/

就绪,准备开搞

cd /home/wwwroot/pishifu.org #进入网站目录
git init #初始化git
git add -A wp-content wp-includes .gitignore #添加要上传的文件
git remote set-url origin git@github.com:PIUIFU/reshub.git # origin后面替换为自己仓库的SSH链接,第一次会要求输入用户名密码,只需要一次
git commit -m "Upload" #提交说明,可以自定义
git pull https://github.com/PIUIFU/reshub #第一次提交先pull一次,后面地址为自己的github仓库地址
git remote add origin git@github.com:PIUIFU/reshub.git #添加SSH方式连接
git push -u origin master #开始上传至Github仓库

上Github仓库检查资源已经上传之后应该是这样的

现在进入WP Super Cache插件,其他缓存选项酌情使用,看CDN选项卡

勾选开启CDN支持,站点地址URL为网站地址,包括目录使用默认的wp-content,wp-includes即可,排除默认.php就好,Off-site-URL的填法才是重点,也就是静态资源替换的地址前缀,格式是https://cdn.jsdelivr.net/gh/Github用户名/Github仓库名@commit

例如我的Github用户名是piuifu,仓库名是reshub,commit是ec80f06ae994f634cb6ef7c4dc1bf4cf6ac0ff13,那么我的地址前缀就是https://cdn.jsdelivr.net/gh/piuifu/reshub@ec80f06ae994f634cb6ef7c4dc1bf4cf6ac0ff13

commit的获取方式就是点击自己的仓库,找到右侧的修改时间即可

因为jsDelivr的CDN访问master分支不会更新内容,所以github内容有更新时加上commit可以强行使用jsDelivr访问最新的内容

每当主题或插件有更新或者卸载删除时,都使用git命令进行更新然后重新获取commit替换即可,git更新服务器文件到仓库的过程简单了许多

git add -A wp-content wp-includes #添加要更新的文件或目录
git commit -m "upload" #更新描述
git push origin master #开始提交文件

为了自己使用更方便一点,还可以写一个小脚本加入crontab计划任务来定时更新

#!/bin/bash
cd /home/wwwroot/pishifu.org
 #进入网站目录
git add -A wp-content wp-includes #添加需要更新的文件或目录
git commit -m "Upload"
 #提交更新描述
git push origin master
 #开始提交文件
git rev-parse HEAD > 1.txt #获取提交后最新的commit写入网站根目录下的1.txt文件中

复制以上内容直接保存在/root目录下的autogit.sh,执行chmod +x autogit.sh添加执行权限,先进入https://github.com/settings/emails取消勾选Keep my email addresses private,接下来以CentOS7系统以及宝塔面板为例,进入计划任务添加

因为宝塔面板计划任务执行时并非root用户以及root目录,所以在执行命令前需要加上sudo命令,如上图已添加了每天0点整执行一次的任务,执行完成后访问网站根目录下的1.txt即可获取最新的完整commit,最后填入WP Super Cache的CDN选项中即可

使用Firefox一目了然地看一下资源加载情况

可以看到基本所有的图像、JS、CSS等资源都通过CDN访问了

Over

发表评论

电子邮件地址不会被公开。 必填项已用*标注