一个网站的打开速度至关重要,会直接影响搜索引擎排名和用户体验。如果您的网站加载越慢,用户离去的就会越快,而用户又是我们生存的根本。
当然网站加载速度受很多因素影响,今天我们使用 Github & JsDelivr 加速前端静态文件。此方法比较适用于服务器带宽小、主机在国外、省CDN流量钱。
Github 是著名软件源代码托管服务平台,JSDelivr 是用于开源项目的免费公共CDN,国内由网宿CDN提供节点支持,国外主要有Cloudflare、Fastly提供节点。
方案思路:
通过 Github 托管代码,然后通过 JsDelivr 公共CDN访问 Github 上面的文件。
安装Git
在你的网站服务器上面安装git
RHEL 或 CentOS系统,你可以使用 yum
yum install -y git
debian & ubuntu
sudo apt install git
说明:如果是 Windows 系统直接访问下载安装。
配置Git
git config --global user.name "用户名"
git config --global user.email "Github邮箱"
配置登录公钥并记录公钥
ssh-keygen -t rsa -C "Github邮箱" #弹出来的提示一直回车即可
cat /root/.ssh/id_rsa.pub #查看刚在生成的公钥
如果是windows系统证书生成的默认路径在 C:Users用户.ssh 下。
配置Github
1.登录 Github 之后点击右上角头像 然后选择 Settings
2.在 Settings 页面左侧点击 SSH and GPG keys
3.然后点击 New SSH Key 输入之前生成的公钥。
到这里就配置完成了,我们可以通过一条命令测试连接配置是否成功。
ssh -T git@github.com
Hi “您的Github用户名” You’ve successfully authenticated,及表示连接成功,说明配置的没问题。
创建 Github 仓库
1.登录到 Github 之后点击右上角头像旁边的「+」,选择 new repository 创建新仓库。
2.在仓库创建页面仓库名 ,务必选择 Public 以便可以通过JsDelivr访问。
通过 Git 同步内容到 Github
如果您对 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仓库,过程取决于你文件多少。
如果完成之后您的仓库会发现仓库里面有内容了。
获取静态文件路径
https://cdn.jsdelivr.net/gh/用户名/仓库名/
例如:https://cdn.jsdelivr.net/gh/seokwong/wss/wp-includes/css/dashicons.min.css
上面的 seokwong 用户名 wss 为仓库名。
如果你有多个分支版本可以在仓库后添加 @commit 编号,例如:https://cdn.jsdelivr.net/gh/seokwong/wss@46c59ad2ca940f2c094a7646cc24d9035924e60a/wp-includes/css/dashicons.min.css
commit编号获取
仓库页面点击 commit
替换wordpress静态文件路径
1.通过WP-Super-Cache 替换,配置可以参考下图。
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;
}
}
参考:
至此就已经完毕了,如果您配置过程中有任何问题欢迎留言反馈。
如果您觉得此配置有问题或者有更好的建议,也请留言指正,我们乐于接受指正。
2 条评论 “WordPress 使用 Github & JsDelivr 加速静态文件”
$regex = ‘/’ . str_replace(‘/’, ‘/’, $local_host) . ‘/((‘ . $cdn_dirs . ‘)/[^s?'”;><]{1,}.(' . $cdn_exts . '))(["'s?]{1})/';
这两行报错: syntax error, unexpected '"'
?emoji测试