Hexo折腾系列——博客访问速度优化

这几天一直在折腾Hexo博客站&＃xff0c;功能上已经整的差不多了&＃xff0c;markdown写作非常舒适。但由于是部署在GitHub Pages 上&＃xff0c;国内访问速度真的一言难尽。于是就在寻找国内有没有免费的静态网站托管平台。首先找到的就是Gitee&＃xff0c;结果却发现免费版不支持自定义域名和ssl&＃xff0c;那显然是用不了了。之后终于找到了腾讯云的Coding平台&＃xff0c;支持免费静态网站部署&＃xff0c;且支持自定义域名和ssl&＃xff0c;基本符合我的要求了。

使用Coding平台部署网站

注册账号

首先当然是要注册&＃xff0c;一开始不知道这平台是腾讯的&＃xff0c;账号跟腾讯云互通&＃xff0c;用了没绑定过腾讯云的微信注册了&＃xff0c;绑定了不少个人信息&＃xff0c;结果却发现不能跟我已有的腾讯云账号绑定&＃xff01;WTF&＃xff0c;最要命的是竟然不支持注销账号&＃xff01;&＃xff08;不愧的tx的尿性&＃xff09;最后没办法&＃xff0c;毕竟还是要用他的工具&＃xff0c;只能放弃这个账号&＃xff0c;从腾讯云控制台重新开通Coding。&＃x1f449;传送门

如果你已经有了腾讯云账号&＃xff0c;一定要在这里点使用&＃xff01;不要直接百度进coding官网&＃xff01;&＃xff08;当然你想重新注册一个账号无所谓&＃xff09;

配置Git仓库

说实话&＃xff0c;Coding看着功能挺多的&＃xff0c;界面看着眼花缭乱的。&＃x1f635;

• 创建仓库

  切换到项目一栏&＃xff0c;点击右上角创建项目

  

  选择DevOps项目

  

• 设置部署公钥

  

  在项目内设置公钥&＃xff08;只能作用于本项目&＃xff09;&＃xff0c;或者在个人设置里添加公钥&＃xff08;全局&＃xff09;均可。

  测试一下公钥&＃xff1a;

  ssh -T git&＃64;git.coding.net


部署项目

获取项目仓库的ssh访问地址&＃xff0c;复制其内容&＃xff1a;

修改博客根目录下的_config.yml文件&＃xff0c;修改deploy部分&＃xff1a;

deploy:type: gitrepo: github: git&＃64;github.com:username/username.github.io.gitcoding: git&＃64;e.coding.net:username/name/name.git # 新增地址branch: master


重新执行hexo d部署命令&＃xff0c;代码即可同时部署到Github和Coding上。

开启Pages服务

在左边菜单中找到持续部署

里面有静态网站和静态网站V2&＃xff0c;这两个我都试用过&＃xff0c;静态网站基本类似Github Page 用这个基本够了。V2是部署到腾讯云的COS对象存储服务&＃xff0c;功能更强大&＃xff0c;可自定义构建流程&＃xff0c;配置腾讯云CDN&＃xff0c;但你需要有备案的域名&＃xff0c;才能使用国内cdn&＃xff0c;否则无法自定义域名。如果你选用境外cdn的话&＃xff0c;速度反而更慢了&＃xff0c;这显然违背了我的初衷。

因此&＃xff0c;权衡之后&＃xff0c;我还是使用了静态网站功能&＃xff0c;虽然不能修改cdn&＃xff0c;但域名不需要备案&＃xff0c;且经测试&＃xff0c;域名解析到新加坡腾讯云服务器&＃xff0c;国内访问速度还可以。

配置自定义域名

创建好静态网站后&＃xff0c;点击设置&＃xff0c;可以配置自定义域名&＃xff0c;而且最多可以绑定5个。

需要注意的是&＃xff0c;他的ssl只支持自动签发&＃xff0c;你点击绑定后后台就自动申请证书了。因此为了确保成功&＃xff0c;一定要先在你的DNS服务商处配好CNAME解析&＃xff0c;等十分钟后再点击绑定。

证书状态显示正常后就能通过你的域名访问了。

分线路解析

至此&＃xff0c;部署工作基本完成了。为了使国内外用户都能拥有较好的访问速度&＃xff0c;我们可以设置分线路解析。境内流量解析到Coding&＃xff0c;境外流量解析到GitHub&＃xff0c;这样一来能使访问速度最优化&＃xff0c;二来能解决百度对github网站的收录问题。&＃xff08;还需时间验证&＃xff09;

目前有很多平台支持分流解析&＃xff0c;比如腾讯云的DNSPod&＃xff0c;阿里的万网。我的域名是在DNSPod买的&＃xff0c;就直接在平台上设置就行。如果你买域名的服务商不支持分流解析&＃xff0c;那也可以通过设置NS&＃xff0c;转接到DNSPod平台。

如上图&＃xff0c;根据不同线路指定不同的CNAME即可&＃xff0c;当然你也可以单独给百度设置一个&＃xff0c;优化爬虫采集。

验证成果

使用站长工具进行ping测试&＃xff1a;

可以看到&＃xff0c;国内外实现了分流解析&＃xff0c;效果还是非常明显的&＃xff0c;国内访问速度提升不少。

压缩静态资源

虽然已经优化了网络链接问题&＃xff0c;但在一些较大的css&＃xff0c;js文件上加载速度还是不尽人意。通过网上查询&＃xff0c;目前发现有3款工具可以进行静态文件的压缩&＃xff0c;一款是hexo-neat&＃xff0c;操作起来非常简单&＃xff0c;另一款是更为专业的gulp&＃xff0c;最后发现的一款是hexo-all-minifier&＃xff0c;他像是hexo-neat的增强版&＃xff0c;也是我现在正在使用的。

hexo-neat使用

hexo-neat使用起来非常方便&＃xff0c;只需在站点根目录安装&＃xff1a;

npm install hexo-neat --save


在站点配置文件_config.yml的末尾添加配置&＃xff1a;

# hexo-neat
# 博文压缩
neat_enable: true
# 压缩html
neat_html:enable: trueexclude:
# 压缩css
neat_css:enable: trueexclude:- &＃39;**/*.min.css&＃39;
# 压缩js
neat_js:enable: truemangle: trueoutput:compress:exclude:- &＃39;**/*.min.js&＃39;- &＃39;**/jquery.fancybox.pack.js&＃39;- &＃39;**/index.js&＃39;


hexo-neat将在hexo g时自动执行&＃xff0c;显示每个文件的压缩率。

• 缺点

  经过测试&＃xff0c;该工具貌似是在hexo生成静态文件之前对source内的文件进行压缩&＃xff0c;对于hexo generate之后生成的css文件没有压缩作用。

gulp工具使用

这款工具是较为专业的静态文件压缩工具&＃xff0c;配置起来较为麻烦&＃xff0c;坑也比较多。

按网上教程配好了却一直报这个错&＃xff0c;最后才发现是版本问题&＃xff0c;gulp&＃64;3的代码格式和gulp&＃64;4不同。

安装步骤

亲测可用

先安装依赖包

npm install -g gulp
npm install gulp gulp-htmlclean gulp-htmlmin gulp-clean-css gulp-uglify-es gulp-imagemin del gulp-minify-inline-json --save-dev


在站点根目录下新建一个 gulpfile.js 文件&＃xff0c;写入以下内容&＃xff1a;

var gulp &＃61; require(&＃39;gulp&＃39;);
var minifycss &＃61; require(&＃39;gulp-clean-css&＃39;);
var uglify &＃61; require(&＃39;gulp-uglify-es&＃39;).default;
var htmlmin &＃61; require(&＃39;gulp-htmlmin&＃39;);
var htmlclean &＃61; require(&＃39;gulp-htmlclean&＃39;);
var imagemin &＃61; require(&＃39;gulp-imagemin&＃39;);
var del &＃61; require(&＃39;del&＃39;);
var Hexo &＃61; require(&＃39;hexo&＃39;);
var minifyInlineJSON &＃61; require(&＃39;gulp-minify-inline-json&＃39;);gulp.task(&＃39;clean&＃39;, function () {return del([&＃39;public/**/*&＃39;]);
});var hexo &＃61; new Hexo(process.cwd(), {});
gulp.task(&＃39;generate&＃39;, function (cb) {hexo.init().then(function () {return hexo.call(&＃39;generate&＃39;, {watch: false});}).then(function () {return hexo.exit();}).then(function () {return cb()}).catch(function (err) {console.log(err);hexo.exit(err);return cb(err);})
});gulp.task(&＃39;deploy&＃39;, function () {return hexo.init().then(function () {return hexo.call(&＃39;deploy&＃39;, {watch: false}).then(function () {return hexo.exit();}).catch(function (err) {return hexo.exit(err);});});
});gulp.task(&＃39;minify-css&＃39;, function () {return gulp.src(&＃39;./public/**/*.css&＃39;).pipe(minifycss({compatibility: &＃39;ie8&＃39;})).pipe(gulp.dest(&＃39;./public&＃39;));
});gulp.task(&＃39;minify-html&＃39;, function () {return gulp.src(&＃39;./public/**/*.html&＃39;).pipe(htmlclean()).pipe(htmlmin({removeComments: true,minifyJS: true,minifyCSS: true,minifyURLs: true,})).pipe(gulp.dest(&＃39;./public&＃39;))
});gulp.task(&＃39;minify-img&＃39;, function () {return gulp.src(&＃39;./public/img/**/*&＃39;).pipe(imagemin([imagemin.gifsicle({interlaced: true}),imagemin.jpegtran({progressive: true}),imagemin.optipng({optimizationLevel: 5}),imagemin.svgo({plugins: [{removeViewBox: true}, {cleanupIDs: false}]})])).pipe(gulp.dest(&＃39;./public/img&＃39;))
});gulp.task(&＃39;minify-js&＃39;, function () {return gulp.src(&＃39;./public/**/*.js&＃39;).pipe(uglify()).pipe(gulp.dest(&＃39;./public&＃39;));
});gulp.task(&＃39;minifyInlineJSON&＃39;, function () {return gulp.src(&＃39;./public/**/*.html&＃39;).pipe(minifyInlineJSON()).pipe(gulp.dest(&＃39;./public&＃39;));
});gulp.task(&＃39;compress&＃39;, gulp.series(&＃39;minify-html&＃39;, &＃39;minify-css&＃39;, &＃39;minify-img&＃39;, &＃39;minify-js&＃39;, &＃39;minifyInlineJSON&＃39;));gulp.task(&＃39;default&＃39;, gulp.series(&＃39;clean&＃39;, &＃39;generate&＃39;, &＃39;compress&＃39;, &＃39;deploy&＃39;));


运行命令&＃xff1a;

gulp # 包含 hexo c & hexo g & hexo d
gulp compress # 只进行压缩


hexo-all-minifier使用

这款工具我最后才发现&＃xff0c;它兼顾了hexo-neat的易用性&＃xff0c;和gulp的功能。

安装