Hexo博客使用腾讯云CDN加速及优化

原文地址：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与加速】，单击【内容分发网络】；没有开通的，按提示开通即可，开通完成后就能自动获取腾讯云赠送的流量包；

3. 在【内容分发网络】页面左侧菜单中选择【域名管理】，单击【添加域名】，输入相关配置后，单击【确认提交】；

填写说明：

属性	说明
加速域名	填写你要加速的域名，可以是你的博客站点域名
业务类型	默认即可
源站类型	已经搭好站点的选“自有源”，使用腾讯云对象存储搭建的选“COS源”，一般选择“自有源”
回源协议	已开启 HTTPS 的选择 HTTPS，但要配置 HTTPS 证书，不然部署后访问会提示证书错误
源站地址	填服务器IP，支持多个

4. 提交完成后，在域名管理页面可看到域名记录，包含 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/ 测试，发现确实比以前快很多，速度明显得到了提升；