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

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

当然网站加载速度受很多因素影响，今天我们使用 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 系统直接访问下载安装。

Git官网

配置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

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，及表示连接成功，说明配置的没问题。

to Github

创建 Github 仓库

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

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

Github 新建仓库

通过 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 替换，配置可以参考下图。

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

参考：

WordPress 静态文件分离方案

至此就已经完毕了，如果您配置过程中有任何问题欢迎留言反馈。
如果您觉得此配置有问题或者有更好的建议，也请留言指正，我们乐于接受指正。

标签

相关文章