Hexo 博客进阶

发表于 更新于

文章简介

本文介绍 Hexo 博客的一些进阶操作。

  • 解决 Github Pages 不被百度抓取的问题；
  • 使用 gulp 压缩资源，实现访问加速。
  • 在博客中添加音频和视频；

    Github Pages 不被百度抓取的方法

    并通过域名 CNAME 实现国内外分流，

    Coding Pages

    CODING 静态网站服务 - CODING 帮助中心

私有的 OSS

以阿里云oss为例
开通子目录首页

1
npm install --save hexo-deployer-oss

_config.yml 配置

1
2
3
4
5
6
deploy:
  type: oss
  accessKeyId: <your accessKeyId>
  accessKeySecret: <your accessKeySecret>
  bucket: <your bucket>
  region: <your region>

其中 region 以北京地区的 oss 为例填 oss-cn-beijing

使用 gulp 压缩资源

使用 gulp 压缩资源，提高访问速度。

1
2
npm install gulp-cli -g
npm install gulp gulp-htmlclean gulp-htmlmin gulp-imagemin gulp-clean-css gulp-uglify --save-dev

项目根目录新建gulpfile.babel.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
import * as gulp from 'gulp'
import cleancss from 'gulp-clean-css'
import uglify from 'gulp-uglify-es'
import htmlmin from 'gulp-htmlmin'
import htmlclean from 'gulp-htmlclean'
import imagemin from 'gulp-imagemin'
import babel from 'gulp-babel'

gulp.task('minify-html', () => {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean({
      protect: /<\!--%fooTemplate\b.*?%-->/g,
      edit: (html) => { return html.replace(/\begg(s?)\b/ig, 'omelet$1'); }
    }))
    .pipe(htmlmin({
      removeComments: true,
      collapseWhitespace: true,
      collapseBooleanAttributes: true,
      removeEmptyAttributes: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true,
      minifyJS: true,
      minifyCSS: true,
    }))
    .on('error', (err) => {
      console.log('html Error!', err.message);
      this.end();
    })
    .pipe(gulp.dest('./public'))
});
gulp.task('clean-css', () => {
  return gulp.src('./public/**/*.css')
    .pipe(cleancss())
    .pipe(gulp.dest('./public'));
});
gulp.task('minify-js', () => {
  return gulp.src('./public/js/**/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./public'));
});
gulp.task('minify-images', () => {
  return gulp.src('./public/images/**/*.*')
    .pipe(imagemin())
    .pipe(gulp.dest('./public/images'))
});
gulp.task('default', gulp.parallel('minify-html', 'clean-css', 'minify-js', 'minify-images', (done) => {
  done();
}));

由于是 es6 语法， 需要使用 babel 转译。

1
npm install --save-dev gulp-babel @babel/register @babel/preset-env @babel/core

创建.babel.json 文件，添加内容如下：

1
2
3
4
5
6
{
  "presets": [
    "@babel/env"
  ],
  "plugins": []
}

终端执行如下命令即可：

1
hexo g && gulp

如有报错，可以尝试删除node_modules文件，然后重新执行npm install。

在博客中插入音频与视频

音频

更快捷的方案一

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=430 height=86 src="XXX"></iframe>

更强大的方案二（Github）

视频

更快捷的标签方式

iframe 将web页嵌入到另一个网页

1
<iframe width="854" height="480" src="//player.bilibili.com/player.html?aid=51918958&cid=90895494&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

更强大的 hexo-tag-dplayer 插件

1
npm install hexo-tag-dplayer --save

PDF

1
2
3
4
<object data="mypdf.pdf" type="application/pdf"
        width="800" height="1200" typemustmatch>
  <p>You don't have a PDF plugin, but you can <a href="myfile.pdf">download the PDF file.</a></p>
</object>

参考资料

从对象到iframe - 其他嵌入技术 - 学习 Web 开发 | MDN
使用 Gulp 压缩 Hexo | 栾铸显的博客
引入gulp压缩整站资源进一步提高写作效率 - 说IT