小网工
没有结果
查看所有结果
  • 登录
  • 首页
  • 建站经验
  • 云服务器
    • 腾讯云
    • 阿里云
  • WordPress
  • 技术教程
  • 网站运维
  • 实用工具
PRICING
SUBSCRIBE
  • 首页
  • 建站经验
  • 云服务器
    • 腾讯云
    • 阿里云
  • WordPress
  • 技术教程
  • 网站运维
  • 实用工具
没有结果
查看所有结果
小网工
没有结果
查看所有结果
首页 Wordpress

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

2020年12月23日
2

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

当然网站加载速度受很多因素影响,今天我们使用 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

  • 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静态文件分离方案

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

标签: cdngithubjsdelivrWordpress
分享Tweet分享
王耍耍

王耍耍

网络工程师、博客爱好者。

有关帖子

WordPress如何修改上传文件的大小限制
Wordpress

WordPress如何修改上传文件的大小限制

2021年3月19日
22
WordPress无插件实现内容主动提交百度
Wordpress

WordPress无插件实现内容主动提交百度

2020年12月23日
39
【解决】WordPress升级/插件/模板安装需要输入FTP信息
Wordpress

WordPress更新/安装出题、插件发生429 too many requests

2020年12月23日
47
【解决】WordPress升级/插件/模板安装需要输入FTP信息
Wordpress

WordPress静态文件分离方案

2020年12月23日
49
【解决】WordPress升级/插件/模板安装需要输入FTP信息
Wordpress

【解决】WordPress升级/插件/模板安装需要输入FTP信息

2020年12月22日
23

评论 2

  1. MeerOst says:
    1年 以前

    $regex = ‘/’ . str_replace(‘/’, ‘/’, $local_host) . ‘/((‘ . $cdn_dirs . ‘)/[^s?'”;><]{1,}.(' . $cdn_exts . '))(["'s?]{1})/';
    这两行报错: syntax error, unexpected '"'

    回复
  2. Goost says:
    1年 以前

    ?emoji测试

    回复

发表评论 取消回复

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

最新内容

建站选择阿里云 ECS 还是轻量云服务器?

建站选择阿里云 ECS 还是轻量云服务器?

2022年4月30日
52
网管必备 Office  强制卸载工具

网管必备 Office 强制卸载工具

2022年4月26日
41
【解决】Edge 浏览器打开提示存在兼容性问题

【解决】Edge 浏览器打开提示存在兼容性问题

2022年3月19日
126
  • 热门
  • 评论
  • 最新
PowerPoint(PPT)里面不能复制粘贴怎么办

PowerPoint(PPT)里面不能复制粘贴怎么办

2022年4月22日
Windows Server 2016服务器配置网卡链路聚合(NIC Teaming)

Windows Server 2016服务器配置网卡链路聚合(NIC Teaming)

2020年12月23日
红米 AC2100 安装 OpenWRT 教程

红米 AC2100 安装 OpenWRT 教程

2022年3月17日
国内镜像源下载速度评测 阿里源、清华源、华为源对比

国内镜像源下载速度评测 阿里源、清华源、华为源对比

2021年1月23日
POP3和IMAP之间的区别

POP3和IMAP之间的区别

7
Windows Server 2016服务器配置网卡链路聚合(NIC Teaming)

Windows Server 2016服务器配置网卡链路聚合(NIC Teaming)

6
【解决】WordPress升级/插件/模板安装需要输入FTP信息

WordPress静态文件分离方案

6
Windows10扁平化壁纸推荐,清新又有淡淡的科技感

Windows10扁平化壁纸推荐,清新又有淡淡的科技感

6
建站选择阿里云 ECS 还是轻量云服务器?

建站选择阿里云 ECS 还是轻量云服务器?

2022年4月30日
网管必备 Office  强制卸载工具

网管必备 Office 强制卸载工具

2022年4月26日
【解决】Edge 浏览器打开提示存在兼容性问题

【解决】Edge 浏览器打开提示存在兼容性问题

2022年3月19日
通过 Python 脚本批量备份 H3C 交换机

通过 Python 脚本批量备份 H3C 交换机

2022年3月17日
  • 关于我们
  • 联系我们
  • 隐私政策
  • 版权声明

© 2022 王耍耍 – All rights reserved 渝ICP备17001054号-4

没有结果
查看所有结果
  • 首页
  • 技术教程
  • 网站运维
  • 实用工具
  • 建站经验
  • WordPress
  • 云服务器

欢迎回来!

登录帐户

忘记密码?

找回密码

输入详细信息以重置密码

登录