[Hexo 博客系列-03] 博客优化

修改字体加载源

修改主题配置文件:

1
2
3
4
5
6
font:
enable: true
# Uri of fonts host, e.g. //fonts.googleapis.com (Default).
host: //fonts.lug.ustc.edu.cn # 中科大
# //fonts.geekzu.org # 极客族
# //fonts.css.network # 捷速网络 香港

压缩资源: gulp

安装 gulp 插件:

1
2
npm install gulp -g
npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp-imagemin gulp --save

在 Hexo 站点根目录下新建 gulpfile.js 脚本文件;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
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');
var del = require('del');
var Hexo = require('hexo');

// 清除public文件夹
gulp.task('clean', function () {
return del(['public/**/*']);
});

// 利用Hexo API 来生成博客内容, 效果和在命令行运行: hexo g 一样
// generate html with 'hexo generate'
var hexo = new Hexo(process.cwd(), {});
gulp.task('generate', function (cb) {
hexo.init().then(function () {
return hexo.call('generate', {
watch: false
});
}).then(function () {
return hexo.exit();
}).then(function () {
return cb()
}).catch(function (err) {
console.log(err);
hexo.exit(err);
return cb(err);
})
})

// 压缩 public 目录 css
gulp.task('minify-css', function () {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.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,
}).on('error', function(e){
console.log(e);
}))
.pipe(gulp.dest('./public'))
});

// 压缩 public/js 目录 js
gulp.task('minify-js', function () {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});

// 压缩public目录下的所有img: 这个采用默认配置
gulp.task('minify-img', function () {
return gulp.src('./public/images/**/*.*')
.pipe(imagemin())
.pipe(gulp.dest('./public/images'))
})

// 同上,压缩图片,这里采用了: 最大化压缩效果。
gulp.task('minify-img-aggressive', 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'))
})

// 执行顺序: 清除public目录 → 产生原始博客内容 → 执行压缩混淆
gulp.task('build', gulp.series('clean', 'generate',
gulp.parallel('minify-html', 'minify-css', 'minify-js', 'minify-img-aggressive')), function (cb) {
});

gulp.task('default', gulp.series(['build']))

然后每次执行 gulp 命令后就会自动执行 clean, generate, [同步执行相关压缩方法]

资源压缩: neat

安装 hexo-neat 插件:

1
npm install --save hexo-neat

在博客配置文件中设置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# hexo-neat
neat_enable: true
neat_html: # 不能跳过 .md/.swig 文件
enable: true
exclude:
neat_css:
enable: true
exclude:
- '**/*.min.css'
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '**/*.min.js'
- '**/jquery.fancybox.pack.js'
- '**/index.js'

不过该插件查看其作者 github 上解释, 暂时不支持对图片的压缩, 所以阁主目前还是使用的 gulp 压缩.

博客 Github + Coding 双线部署

分别在 Github 和 Coding(现移至腾讯云) 上新建博客的 pages 项目, 有不清楚的可以查看网上教程, 关于这方面网上教程讲解的还是比较详细的. 阁主这里主要讲解如何绑定自定义的域名(阿里云), 以及 Github 和 Coding 的 Pages 里的设置.

Github

github 绑定域名比较简单, 在博客 source 根目录下放一个 CAME 文件, 里面写一行 memento.net.cn 自定义的域名, 到时候 hexo d 的时候一起上传发布.
在 Pages 里的设置如下图所示即可:
Github Pages

最后, 在阿里云的域名解析设置里添加两条记录:

records

因为国内访问 github 的速度有些慢, 所以将解析线路改为了 境外;

Coding

Coding 在 pages 设置里, 需要绑定新域名设置如下图所示:
域名绑定

注意: 其中 SSL/TLS 安全证书的申请认证, 需要先将阿里云的域名解析设置里对 github 的境外解析先暂停掉, 否则会出现申请错误的异常. 一些常见的 Coding Pages 问题参考:
Coding Pages 常见问题

SEO: 百度+Google+Bing

等待更新完善
注意:
对于百度搜索的自动链接提交, 如果浏览器安装了 Adblock Plus 等一些屏蔽广告的插件, 有可能会导致自动提交被拦截.


--------------------本文至此结束  感谢您的阅读--------------------

本文标题:[Hexo 博客系列-03] 博客优化

文章作者:Memento

发布时间:2019年03月30日 - 21:03

最后更新:2019年04月24日 - 12:04

原始链接:https://memento.net.cn/post/d2aa0c0e.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

Memento wechat
欢迎您扫一扫上面的微信公众号, 订阅阁主公众号!
坚持原创技术分享, 您的支持将鼓励我继续创作