乐趣区

关于hexo:Hexo博客使用腾讯云CDN加速及优化

jiezi

原文地址：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 gulp
npm 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');

// 压缩 css
gulp.task('minify-css', function() {return gulp.src('./public/**/*.css')
        .pipe(minifycss({compatibility: 'ie8'}))
        .pipe(gulp.dest('./public'));
});
// 压缩 js
gulp.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 clean
hexo g
# 执行压缩，两条命令能够合并：hexo g && gulp
gulp

配置腾讯云 CDN

CDN 平台很多，有阿里云、七牛云、又拍云，那我为什么抉择腾讯云呢？起因很简略，腾讯云给新开通 CDN 的个人用户收费赠送半年的 120GB 收费境内流量包，每月限额 20GB，这对于集体站点来说够用了。

腾讯云：https://cloud.tencent.com/

操作步骤：

  1. 登录腾讯云并进入控制台；
  2. 抉择控制台左上角的【云产品】，找到【CDN 与减速】，单击【内容散发网络】；没有开明的，按提醒开明即可，开明实现后就能主动获取腾讯云赠送的流量包；

  1. 在【内容散发网络】页面左侧菜单中选择【域名治理】，单击【增加域名】，输出相干配置后，单击【确认提交】；

填写阐明：

属性 阐明
减速域名 填写你要减速的域名，能够是你的博客站点域名
业务类型 默认即可
源站类型 曾经搭好站点的选“自有源”，应用腾讯云对象存储搭建的选“COS 源”，个别抉择“自有源”
回源协定 已开启 HTTPS 的抉择 HTTPS，但要配置 HTTPS 证书，不然部署后拜访会提醒证书谬误
源站地址 填服务器 IP，反对多个
  1. 提交实现后，在域名治理页面可看到域名记录，蕴含 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/ 测试，发现的确比以前快很多，速度显著失去了晋升；

退出移动版