Github+Hexo博客搭建小白教程（六）
点击上方“果果小师弟”，选择“置顶/星标公众号”
干货福利，第一时间送达！
八、 博客优化
1. nmp速度优化
为啥要进行npm优化？因为利用nmp下载插件的下载速度着实是有点慢。
由于下面内容会安装较多的插件，建议先更改npm仓库地址，以便能更快的安装插件
阿里的淘宝团队在国内做了个跟npm仓库一样的镜像叫cnpm。
淘宝镜像与npm官方包的同步频率目前为10分钟一次，来保证尽量与官方服务同步。
所以二者可以说是一样，不用担心有什么差别。
通过改变地址来使用淘宝镜像（推介）
npm的默认仓库地址是 https://registry.npmjs.org/
可以使用以下命令查看当前npm的仓库地址
npm config get registry
可以使用以下命令来改变默认下载地址，从而达到不安装cnpm就能采用淘宝镜像的目的，然后使用上面的get命令查看是否设置成功。
npm config set registry https://registry.npm.taobao.org
安装CNPM
安装cnpm，命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装后，使用以下命令测试是否安装成功
cnpm -v
成功后，以后都使用 cnpm 代替以前 npm 来执行命令！
2. 图片懒加载
知识小课堂：图片加载方式有两种，一个是预加载，另一个就是懒加载，那你了解什么是预加载和懒加载吗？下面来学习一下。
参考：图片预加载与图片懒加载（缓载）的区别与实现
图片预加载：顾名思义，图片预加载就是在网页全部加载之前，提前加载图片。当用户需要查看时可直接从本地缓存中渲染，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，这样浏览者可能以为图片预览慢而没兴趣浏览，把网页关掉，这时，就需要图片预加载。当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验。
图片懒加载（缓载）：延迟加载图片或符合某些条件时才加载某些图片。这样做的好处是减少不必要的访问数据库或延迟访问数据库的次数，因为每次访问数据库都是比较耗时的即只有真正使用该对象的数据时才会创建。懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
预加载与懒加载的区别之处：
两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预载则会增加服务器前端压力。
使用图片懒加载需要安装插件：hexo-lazyload-image
在站点根目录执行下面的命令：
npm install hexo-lazyload-image --save
之后在站点配置文件下添加下面的代码：
lazyload:
enable: true # 是否开启图片懒加载
onlypost: false # 是否只对文章的图片做懒加载
loadingImg: # eg ./images/loading.gif
最后执行hexo clean && hexo g && hexo s就可以看到效果了。
3. 代码压缩
方法一：gulp代码压缩
因为hexo生成的html、css、js等都有很多的空格或者换行，而空格和换行也是占用字节的，所以需要将空格换行去掉也就是我要进行的“压缩”。
有人说空格换行能占多少字节？确实占不了多少，但是一个人访问是这么多字节，那么一百人，一万人呢？加起来这量就不少了吧，这都是流量啊！这也是很多css/js文件的后缀为.min.js或.min.css的原因。虽然我们可能没那么多访问量，但是能减小一点资源文件的大小也是对访问速度有那么一点提升的。
我们采用gulp代码压缩方式。
使用方法:
1.进入站点根目录下依次执行下面的命令：
# 全局安装gulp模块
npm install gulp -g
# 安装各种小功能模块 执行这步的时候，可能会提示权限的问题，最好以管理员模式执行
npm install gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
# 额外的功能模块
npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del @babel/core --save
2.在Hexo根目录新建文件gulpfile.js，并复制以下内容到文件中，有中文注释，可以根据自己需求修改。
var gulp = require("gulp");
var debug = require("gulp-debug");
var cleancss = require("gulp-clean-css"); //css压缩组件
var uglify = require("gulp-uglify"); //js压缩组件
var htmlmin = require("gulp-htmlmin"); //html压缩组件
var htmlclean = require("gulp-htmlclean"); //html清理组件
var imagemin = require("gulp-imagemin"); //图片压缩组件
var changed = require("gulp-changed"); //文件更改校验组件
var gulpif = require("gulp-if"); //任务 帮助调用组件
var plumber = require("gulp-plumber"); //容错组件（发生错误不跳出任务，并报出错误内容）
var isScriptAll = true; //是否处理所有文件，(true|处理所有文件)(false|只处理有更改的文件)
var isDebug = true; //是否调试显示 编译通过的文件
var gulpBabel = require("gulp-babel");
var es2015Preset = require("babel-preset-es2015");
var del = require("del");
var Hexo = require("hexo");
var hexo = new Hexo(process.cwd(), {}); // 初始化一个hexo对象
// 清除public文件夹
gulp.task("clean", function () {
return del(["public/**/*"]);
});
// 下面几个跟hexo有关的操作，主要通过hexo.call()去执行，注意return
// 创建静态页面 （等同 hexo generate）
gulp.task("generate", function () {
return hexo.init().then(function () {
return hexo
.call("generate", {
watch: false
})
.then(function () {
return hexo.exit();
})
.catch(function (err) {
return hexo.exit(err);
});
});
});
// 启动Hexo服务器
gulp.task("server", function () {
return hexo
.init()
.then(function () {
return hexo.call("server", {});
})
.catch(function (err) {
console.log(err);
});
});
// 部署到服务器
gulp.task("deploy", function () {
return hexo.init().then(function () {
return hexo
.call("deploy", {
watch: false
})
.then(function () {
return hexo.exit();
})
.catch(function (err) {
return hexo.exit(err);
});
});
});
// 压缩public目录下的js文件
gulp.task("compressJs", function () {
return gulp
.src(["./public/**/*.js", "!./public/libs/**"]) //排除的js
.pipe(gulpif(!isScriptAll, changed("./public")))
.pipe(gulpif(isDebug, debug({ title: "Compress JS:" })))
.pipe(plumber())
.pipe(
gulpBabel({
presets: [es2015Preset] // es5检查机制
})
)
.pipe(uglify()) //调用压缩组件方法uglify(),对合并的文件进行压缩
.pipe(gulp.dest("./public")); //输出到目标目录
});
// 压缩public目录下的css文件
gulp.task("compressCss", function () {
var option = {
rebase: false,
//advanced: true, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
compatibility: "ie7" //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
//keepBreaks: true, //类型：Boolean 默认：false [是否保留换行]
//keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
};
return gulp
.src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css
.pipe(gulpif(!isScriptAll, changed("./public")))
.pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
.pipe(plumber())
.pipe(cleancss(option))
.pipe(gulp.dest("./public"));
});
// 压缩public目录下的html文件
gulp.task("compressHtml", function () {
var cleanOptions = {
protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略处理
unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/gi //特殊处理
};
var minOption = {
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
removeComments: true, //清除HTML注释
minifyJS: true, //压缩页面JS
minifyCSS: true, //压缩页面CSS
minifyURLs: true //替换页面URL
};
return gulp
.src("./public/**/*.html")
.pipe(gulpif(isDebug, debug({ title: "Compress HTML:" })))
.pipe(plumber())
.pipe(htmlclean(cleanOptions))
.pipe(htmlmin(minOption))
.pipe(gulp.dest("./public"));
});
// 压缩 public/medias 目录内图片
gulp.task("compressImage", function () {
var option = {
optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染
multipass: false //类型：Boolean 默认：false 多次优化svg直到完全优化
};
return gulp
.src("./public/medias/**/*.*")
.pipe(gulpif(!isScriptAll, changed("./public/medias")))
.pipe(gulpif(isDebug, debug({ title: "Compress Images:" })))
.pipe(plumber())
.pipe(imagemin(option))
.pipe(gulp.dest("./public"));
});
// 执行顺序： 清除public目录 -> 产生原始博客内容 -> 执行压缩混淆 -> 部署到服务器
gulp.task(
"build",
gulp.series(
"clean",
"generate",
"compressHtml",
"compressCss",
"compressJs",
"compressImage",
gulp.parallel("deploy")
)
);
// 默认任务
gulp.task(
"default",
gulp.series(
"clean",
"generate",
gulp.parallel("compressHtml", "compressCss", "compressJs","compressImage")
)
);
//Gulp4最大的一个改变就是gulp.task函数现在只支持两个参数，分别是任务名和运行任务的函数
3.以后的执行方式有两种：
直接在Hexo根目录执行
gulp或者gulp default，这个命令相当于hexo cl&&hexo g并且再把代码和图片压缩。在Hexo根目录执行
gulp build，这个命令与第1种相比是：在最后又加了个hexo d，等于说生成、压缩文件后又帮你自动部署了。
值得注意的是：这个加入了图片压缩，如果不想用图片压缩可以把第154行的
"compressImage", 和第165行的 ,"compressImage"去掉即可
4. 打造稳定快速、高效免费图床
本文讲解的图床是基于七牛云的。
啥是图床？有啥用？比如你的博客要插入图片、音乐、视频。那么如何插入呢？一般我们只需要把图片、音乐、视频的链接放到你的博客就可以了。那么链接从何而来？就需要一个软件，把图片上传上去，然后自动生成链接就可以了。这个软件有很多，我们这里使用七牛云。它有免费的10G容量供我们使用。对于写博客来说完全够用。
1.进入七牛云官网。注册、登录。进入管理控制台。
2.找到
对象存储,点击立即添加。3.新建一个存储空间。
4.点击
上传文件。5.上传成功后，就可以复制链接了。
6.到这里我们就可以在我们的博客引用外链，显示图片了。当然也可用于公众号。
但是七牛云给我们使用这种链接只有一个月的时间。一个月之后就会回收域名。
8.我们需要用我们自己的二级域名来绑定七牛云进行访问（最好不用www开头的二级域名来绑定，因为www开头的域名，我们都是作为主域名的）
9.解析二级域名、配置CNAME，在这个地方复制你的CNAME。
10.到你买域名的地方去配置。我是在阿里云上面买的，下面以阿里云为例
11.做到这一步就已经完成了。成功之后这个地方显示
12.第三步、使用自己的域名访问
微信公众号：果果小师弟
关注可了解获取更多的免费资料;
如果你觉得文章对你有帮助，转发分享，欢迎赞赏最后
10T资源大放送！包括但不限于：C/C++，Linux，Python，Java，PHP，人工智能，PCB、FPGA、DSP、单片机、等等！在公众号内回复「更多资源」，即可免费获取，期待你的关注！！！