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

2023-12-28 12:26:52

使用公共 CDN 加载部分资源

修改主题（我的是NexT主题）配置文件，使用公共CDN加载部分CSS、JS文件，我选择的是 jsDelivr 这个公共CDN平台；

提供其他平台的CDN：

编辑 _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/

操作步骤：

登录腾讯云并进入控制台；
选择控制台左上角的【云产品】，找到【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/ 测试，发现确实比以前快很多，速度明显得到了提升。

码农公寓

使用公共 CDN 加载部分资源

使用 gulp 压缩资源

配置腾讯云 CDN

操作步骤：

访问加速后的站点

相关文章