Hexo blog uses Tencent Cloud CDN to accelerate and optimize

Original address: Hexo blog uses Tencent Cloud CDN to accelerate and optimize

Use public CDN to load some resources

Modify the theme (mine is the NexT theme) configuration file, use the public CDN to load some CSS, JS files, I chose jsDelivr the public CDN platform;

Provide CDNs on other platforms:

• Cloud
• Take the cloud
• BootCDN
• jsDelivr

Edit _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 describes the version used internally by NexT. For the tested version, we can find the corresponding version on the public CDN platform and configure it. NexT official also gave instructions: set "JavaScript third-party library"

Use gulp to compress resources

Execute the command to install in the Hexo directory:

npm install gulp
npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save

gulpfile.js file in the root directory of the Hexo blog with the following content:

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'
));

Regenerate and compress:

hexo clean
hexo g
# 执行压缩，两条命令可以合并：hexo g && gulp
gulp

Configure Tencent Cloud CDN

There are many CDN platforms, including Alibaba Cloud, Qiniu Cloud, and Paiyun. Why did I choose Tencent Cloud? The reason is simple. Tencent Cloud will give a free 120GB domestic data package for half a year to individual users who have newly opened a CDN, with a monthly limit of 20GB, which is enough for personal sites.

Tencent Cloud: https://cloud.tencent.com/

Steps:

1. Log in to Tencent Cloud and enter the console;
2. Select [Cloud Products] in the upper left corner of the console, find [CDN and Acceleration], and click [Content Distribution Network]; if it is not activated, just follow the prompts to activate it. After activation, you will automatically get the traffic package presented by Tencent Cloud;

3. Select [Domain Name Management] in the left menu of the [Content Distribution Network] page, click [Add Domain Name], enter the relevant configuration, and click [Confirm and Submit];

fill in instructions:

Attributes	Description
Accelerated domain name	Fill in the domain name you want to accelerate, it can be your blog site domain name
business type	Default
Source station type	Choose “self-sourced” for sites that have already set up, choose “COS source” for those built using Tencent Cloud Object Storage, and generally choose “self-sourced”
Back-to-origin agreement	It turned HTTPS selected HTTPS , but you want to configure HTTPS certificate, or post-deployment visit will prompt a certificate error
Source station address	Fill in the server IP, support multiple

4. After the submission is complete, you can see the domain name record on the domain name management page, including CNAME . We need to configure the domain name CNAME . The following provides Alibaba Cloud configuration methods for reference;

Cloud configuration CNAME

a. Log in to the Alibaba Cloud console to resolve DNS.

b. Click the domain name to be resolved to enter the resolution record page.

c. After entering the analysis record page, click the [Add Record] button to start setting the analysis record.

d. To set the CNAME resolution record, select CNAME as the record type. The host record is the domain name prefix, which can be filled arbitrarily (for example: www). The record value is filled in with another domain name pointed to by the current domain name. Analyze the line, TTL defaults. If "CNAME" record conflicts with the "A" record, just delete the "A" record and reconfigure it.

e. Verify that the CNAME is valid

You can nslookup . If the response CNAME record is the CNAME configured by us, the configuration is successful, and you have successfully activated the acceleration service at this time.

nslookup -qt=cname <加速域名>

Visit the accelerated site

Use http://ping.chinaz.com/ test and find that it is indeed much faster than before, and the speed has been significantly improved;