Hexo 生成 [1]

需要使用 npde.js 与 npm 安装依赖,参考 nvm 管理 node 版本与淘宝 cnpm 解决 npm 网络故障

创建生成

1
2
3
4
5
6
7
8
9
10
11
12
13
# 全局安装 hexo-cli
npm install hexo-cli -g

# 使用 Hexo 创建生成
mkdir ~/hexo-test
cd ~/hexo-test
hexo init

# 生成静态资源
hexo g
# 运行
hexo s
# 浏览器输入 http://localhost:4000 即可访问 Hexo 默认主题

更多站点相关设置(站点名…)

主题 even [2]

1
2
3
4
5
6
7
8
# 博客根目录运行
git clone https://github.com/ahonn/hexo-theme-even themes/even

# even 主题需要
npm install hexo-renderer-scss --save

# 修改博客根目标的站点文件 _config.yml 的 theme 字段
# 修改为 theme: even

更多 even 主题设置

gulp 压缩提速

使用 gulp 压缩博客静态资源,提升访问速度

1
2
# 安装需要
npm i gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify -s

博客根目标创建配置文件 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
# gulpfile.js 配置内容如下

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');
// 压缩 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,
collapseWhitespace: true,
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input /
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除 <script> 的 type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除 <style> 和 <link> 的 type="text/css"
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function () {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('build', gulp.parallel('minify-html', 'minify-css', 'minify-js'
//build the website
));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 测试
gulp build

# 添加别名
# zsh 是 .zshrc
# bash 是 .bashrc
echo 'alias hd="hexo cl
hexo g
gulp build
hexo d"'>~/.zshrc
source ~/.zshrc
# 运行 hd 会先后执行
# hexo cl 删除
# hexo g 生成
# gulp build 压缩
# hexo d 部署

博客部署参考 搭建博客(2)Nginx 部署与 acme.sh 申请 SSL 证书

更新记录

2019-03-24 配置文件 gulpfile.js 使用 gist 外链

参考拓展

1 Hexo 中文文档
2 hexo-theme-even