The Hexo blog is accelerated and optimized using Tencent Cloud CDN

The Hexo Blog uses Tencent Cloud CDN to accelerate and optimize

Loads some resources using a public CDN

Modify the configuration file of the theme (mine is the Next theme) and load some CSS and JS files with the public CDN. I choose JSDelivr as the public CDN platform.

CDNs for other platforms:

• Seven NiuYun
• And 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: Vendors: # Internal path prefix. / / # 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 the 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 refers to the version used by NeXT internally. If the version has been tested, we can find the corresponding version on the public CDN platform and configure it. Set up “JavaScript Third-Party Libraries”

Use gulp to compress resources

Executing the command installation in the Hexo directory:

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

Create gulpfile.js in the root directory of the Hexo blog with the following contents:

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'); // Compress CSS gulp.task('minify-css', function() {return gulp.src('./public/**/*.css').pipe({Compatibility: Compatibility: 'ie8' })) .pipe(gulp.dest('./public')); }); // Compress js gulp.task('minify-js'), function() { return gulp.src('./public/js/**/*.js') .pipe(uglify()) .pipe(gulp.dest('./public')); }); // Compress the public directory HTML file 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')) }); // Compress image 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')); // default task gulp.task('default', gulp.parallel('minify-css','minify-js','minify-html','minify-images'));

Regenerate and compress:

Hexo clean hexo g # performs compression, and two commands can be merged: hexo g && gulp gulp

Configure Tencent Cloud CDN

There are many CDN platforms, such as Ali Cloud, Qiniu Cloud and Youpai Cloud. Then why do I choose Tencent Cloud? The reason is very simple. Tencent Cloud gives free 120GB domestic traffic package for half a year to individual users who have newly opened CDN, with a monthly limit of 20GB, which is enough for individual sites.

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

Operation steps:

1. Log in 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 Delivery Network”. If you have not opened it, you can open it according to the prompt. After the opening is completed, you can automatically get the traffic package given by Tencent Cloud.

3. Select “Domain Name Management” from the menu on the left of the “Content Distribution Network” page, click “Add Domain Name”, enter relevant configuration, and click “Confirm Submission”.

Instructions:

4. After the submission is completed, the domain name record can be seen in the domain name management page, includingCNAME, we need to configure the domain nameCNAME, AliCloud configuration method for reference is provided below;

AliCloud configures CNAME

A. Log in Ali cloud console cloud parsing DNS.

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

C. After entering the parse record page, click the “Add Record” button to set the parse record.

D. To set a CNAME resolution record, select the record type as CNAME. The host record is a domain name prefix that can be filled in arbitrarily (e.g., WWW). The record value is entered as another domain to which the current domain refers. Analyze the line, TTL default can be. If the “CNAME” record conflicts with the “A” record, delete the “A” record and reconfigure it.

E. Verify that the CNAME is in effect

NSLookup can be used to check whether the CNAME is in effect. If the CNAME recorded is the CNAME we configured, the configuration is successful and you have successfully started the acceleration service.

NsLookup-qt = CNAME < Accelerate domain name >

Access the accelerated site

The use of http://ping.chinaz.com/ test, found that it is much faster than before, the speed has been significantly improved;