原文地址:Hexo博客应用腾讯云CDN减速及优化
应用公共 CDN 加载局部资源
批改主题(我的是NexT主题)配置文件,应用公共CDN加载局部CSS、JS文件,我抉择的是 jsDelivr 这个公共CDN平台;
提供其余平台的CDN:
- 七牛云
- 又拍云
- BootCDN
- jsDelivr
编辑 _config.yml
:
# Script Vendors.# Set a CDN address for the vendor you want to customize.# For example# jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js# Be aware that you should use the same version as internal ones to avoid potential problems.# Please use the https protocol of CDN files when you enable https on your site.vendors: # Internal path prefix. Please do not edit it. _internal: lib # Internal version: 2.1.3 jquery: //cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js # Internal version: 2.1.5 # See: http://fancyapps.com/fancybox/ fancybox: //cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js fancybox_css: //cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.css # Internal version: 1.0.6 # See: https://github.com/ftlabs/fastclick fastclick: //cdn.jsdelivr.net/fastclick/1.0.6/fastclick.min.js # Internal version: 1.9.7 # See: https://github.com/tuupola/jquery_lazyload lazyload: //cdn.jsdelivr.net/jquery.lazyload/1.9.3/jquery.lazyload.min.js # Internal version: 1.2.1 # See: http://VelocityJS.org velocity: //cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js # Internal version: 1.2.1 # See: http://VelocityJS.org velocity_ui: //cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js # Internal version: 0.7.9 # See: https://faisalman.github.io/ua-parser-js/ ua_parser: //cdn.jsdelivr.net/ua-parser.js/0.7.10/ua-parser.min.js # Internal version: 4.6.2 # See: http://fontawesome.io/ fontawesome: //maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css # Internal version: 1 # https://www.algolia.com algolia_instant_js: algolia_instant_css: # Internal version: 1.0.2 # See: https://github.com/HubSpot/pace # Or use direct links below: # pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js # pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css
Internal version
阐明 NexT 外部应用的版本,通过测试的版本,咱们在公共CDN平台找到相应的版本并配置即可。NexT 官网也给出了阐明: 设置 「JavaScript 第三方库」
应用 gulp 压缩资源
在 Hexo 目录下执行命令装置:
npm install gulpnpm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
在 Hexo 博客的根目录下创立 gulpfile.js
文件,内容如下:
var gulp = require('gulp');var minifycss = require('gulp-minify-css');var uglify = require('gulp-uglify');var htmlmin = require('gulp-htmlmin');var htmlclean = require('gulp-htmlclean');var imagemin = require('gulp-imagemin');// 压缩cssgulp.task('minify-css', function() { return gulp.src('./public/**/*.css') .pipe(minifycss({ compatibility: 'ie8' })) .pipe(gulp.dest('./public'));});// 压缩jsgulp.task('minify-js', function() { return gulp.src('./public/js/**/*.js') .pipe(uglify()) .pipe(gulp.dest('./public'));});// 压缩 public 目录 html文件gulp.task('minify-html', function() { return gulp.src('./public/**/*.html') .pipe(htmlclean()) .pipe(htmlmin({ removeComments: true, minifyJS: true, minifyCSS: true, minifyURLs: true, })) .pipe(gulp.dest('./public')) });// 压缩图片gulp.task('minify-images', function() { return gulp.src('./public/images/**/*.*') .pipe(imagemin( [imagemin.gifsicle({'optimizationLevel': 3}), imagemin.jpegtran({'progressive': true}), imagemin.optipng({'optimizationLevel': 7}), imagemin.svgo()], {'verbose': true})) .pipe(gulp.dest('./public/images')); // 默认工作gulp.task('default', gulp.parallel( 'minify-css','minify-js','minify-html','minify-images'));
从新生成并压缩:
hexo cleanhexo g# 执行压缩,两条命令能够合并:hexo g && gulpgulp
配置腾讯云 CDN
CDN平台很多,有阿里云、七牛云、又拍云,那我为什么抉择腾讯云呢?起因很简略,腾讯云给新开通CDN的个人用户收费赠送半年的120GB收费境内流量包,每月限额20GB,这对于集体站点来说够用了。
腾讯云:https://cloud.tencent.com/
操作步骤:
- 登录腾讯云并进入控制台;
- 抉择控制台左上角的【云产品】,找到【CDN与减速】,单击【内容散发网络】;没有开明的,按提醒开明即可,开明实现后就能主动获取腾讯云赠送的流量包;
- 在【内容散发网络】页面左侧菜单中选择【域名治理】,单击【增加域名】,输出相干配置后,单击【确认提交】;
填写阐明:
属性 | 阐明 |
---|---|
减速域名 | 填写你要减速的域名,能够是你的博客站点域名 |
业务类型 | 默认即可 |
源站类型 | 曾经搭好站点的选“自有源”,应用腾讯云对象存储搭建的选“COS源”,个别抉择“自有源” |
回源协定 | 已开启 HTTPS 的抉择 HTTPS ,但要配置 HTTPS 证书,不然部署后拜访会提醒证书谬误 |
源站地址 | 填服务器IP,反对多个 |
- 提交实现后,在域名治理页面可看到域名记录,蕴含
CNAME
,咱们须要配置域名CNAME
,以下提供阿里云配置办法供参考;
阿里云配置 CNAME
a. 登录阿里云控制台云解析DNS。
b. 单击要解析的域名,进入解析记录页。
c. 进入解析记录页后,单击【增加记录】按钮,开始设置解析记录。
d. 若要设置 CNAME 解析记录,将记录类型抉择为 CNAME。主机记录即域名前缀,可任意填写(如:www)。记录值填写为以后域名指向的另一个域名。解析线路,TTL 默认即可。如果有提醒 “CNAME”记录与“A”记录抵触
的,把"A"记录删了重新配置就行了。
e. 验证 CNAME 是否失效
能够通过 nslookup
来查问 CNAME 是否失效,若应答的CNAME记录是咱们配置的CNAME,则阐明配置胜利,此时您已胜利开启减速服务。
nslookup -qt=cname <减速域名>
拜访减速后的站点
应用 http://ping.chinaz.com/ 测试,发现的确比以前快很多,速度显著失去了晋升;