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

IT资讯

1233
文章

274
评论

2023-09-0516:35:20

评论1,016 3320字

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

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

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

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

Github Setting

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

Add SSh Keys

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

ssh -T git@github.com

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

连接成功-min

创建 Github 仓库

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

2.在仓库创建页面仓库名，务必选择 Public 以便可以通过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仓库，过程取决于你文件多少。

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

上传完毕后后

获取静态文件路径

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静态文件路径

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

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;
}
}