wordpress:用七牛云cdn图床镜像加速博客网站

wordpress用七牛云CDN图床镜像加速博客网站

前言

网站服务器的阿里云1M的小水管。在加载图片比较多的网站真的非常的头疼,在给网站优化的过程中了解到现在利用CDN来为网站加速已经是普遍了。那么本站用到的是七牛云,七牛云给我的印象还是非常不错的,每个月免费的10G流量,对于规模不大的小站来说,是完全够用了,速度上对于我服务器原本的带宽来说提升真的是巨大的,而且由于内容的资源是从CDN上拿的,也直接减轻了服务器在高访问量下的压力。

那么话不多说,正式进入主题了。

  1. 选择添加资源,在对象存储中点击立即添加
    wordpress:用七牛云cdn图床镜像加速博客网站 WordPress技巧 第2张
  2. 输入一个空间名字,这名字可以自由的选择,但是不能是中文。访问控制选择为公开空间,最后点击确认创建。
    wordpress:用七牛云cdn图床镜像加速博客网站 WordPress技巧 第3张
  3. 打开你创建的空间,比如喵容选择的是 huasheng,然后打开最上方的“镜像存储”,接着把镜像源填写为自己的域名,比如喵容的 喵容丨和你一起描绘生活的美好,简明有味的硬件测评 (我的站没有WWW,如果你的域名有WWW请自行加上),另外建议勾选下方的robots.txt
    wordpress:用七牛云cdn图床镜像加速博客网站 WordPress技巧 第4张
  4. 选中个人控制面板,点击秘钥管理
    wordpress:用七牛云cdn图床镜像加速博客网站 WordPress技巧 第5张
  5. 把AK和SK秘钥保存到文本文档以作备用。
    wordpress:用七牛云cdn图床镜像加速博客网站 WordPress技巧 第6张
  6. 点击左侧的添加资源,然后选择右下角的融合CDN加速,此功能需要往七牛云预存10元才能激活,根据提示绑定你的域名,比如大肥虫我绑定的就是 shaoxianchong.com,
    wordpress:用七牛云cdn图床镜像加速博客网站 WordPress技巧 第7张
  7. 点击自己的空间,在域名设置的下方会显示出立即绑定一个域名。这是重点!千万不要绑定自己的网站的域名,要绑定一个二级域名,什么是二级域名?如果你不懂也没关系,听大肥虫说的做就行。举个例子,比如我的网站地址是玩机大肥虫丨实用有趣的应用分享,简明有味的硬件测评,那么我这里填写的地址可以是**.shaoxianchong.com,比如tu.shaoxianchong.com,abc.shaoxianchong.com都可以。看出来规律了把,就是把WWW换成任意字母就行。
    wordpress:用七牛云cdn图床镜像加速博客网站 WordPress技巧 第8张
  8. 打开左侧已经创建好的CDN加速空间,比如喵容的是tu.shaoxianchong.com,然后在域名信息的下方有一个CNAME地址,我们需要把此地址解析到你的域名。
    wordpress:用七牛云cdn图床镜像加速博客网站 WordPress技巧 第9张
  9. 喵容以万网的域名解析为例为大家做说明。A处填写CNAME;B处填写你在第8步设置的二级域名,比如我设置的是http://tu.shaoxianchong.com,那么我在B处就要填写字母 tu;C处选择默认D处填写第10步显示的CNAME地址;E处默认10分钟。设置完毕,点击保存即可。
    wordpress:用七牛云cdn图床镜像加速博客网站 WordPress技巧 第10张
  10. 打开你的wordpress后台,选中插件,搜索安装 WPJAM 七牛镜像存储插件,安装成功并启用。大肥虫的图片里是已经启用状态的七牛云插件wordpress:用七牛云cdn图床镜像加速博客网站 WordPress技巧 第11张
  11. 你的七牛云插件,在七牛设置里填写我们之前存到文本文档的信息。七牛域名:填写自己绑定的二级域名,如我的玩机大肥虫|实用有趣的应用分享,客观简明的硬件测评 七牛空间:之前在七牛设置的空间,例如大肥虫的空间名字叫做 huasheng,我就需要填写 haushengACCESS KEY:填写刚才保存到文本文档里的AKSECRET KEY:填写刚才保存到文本文档里的SK最后别忘了点击保存更改,一般到这一步,你的wordpress就镜像成功,其他选项,如本地设置、缩略图设置你可以根据自己的需要设置
    wordpress:用七牛云cdn图床镜像加速博客网站 WordPress技巧 第12张
  12. 再次查看图片的地址,已经是http://tu.shaoxianchong.com开头的了。说明镜像加速成功。wordpress:用七牛云cdn图床镜像加速博客网站 WordPress技巧 第13张

个人博客

更多前端技术文章美术设计wordpress插件、优化教程学习笔记尽在我的个人博客喵容 - 和你一起描绘生活,欢迎一起交流学习,一起进步:https://www.miaoroom.com

站内文章推荐:

「2018年前端面试知识点」最新汇总

超级好用的开发工具,程序员实用工具整理

干货分享:vue2.0做移动端开发用到的相关插件和经验总结

前端中跨域的几种方案

vue中Axios的封装和API接口的管理

参与评论