博客优化小记

博客优化小记


title: 博客优化小记
date: 2020-02-23 17:51:38
updated: 2020-02-23 17:51:38
tags:

  • 博客
  • 随笔

趁着周末把博客优化了一下,主要优化以下几点:

  1. 阅读统计和访客统计
  2. 添加评论
  3. 升级hexo版本和NexT版本
  4. 配置SEO
  5. 静态文件cdn加速
  6. 使用gulp压缩文件
  7. 添加lazyload
  8. 添加站内搜索

阅读统计和访客统计

阅读统计和访客统计使用的都是不蒜子,因为使用的是NexT主题,只需要添加一下配置就可以了。

添加评论

原本评论插件使用的是 disqus,但配置后了之后才发现已经被qi*ang了。改为使用 valine。valine 需要配合 leancloud 用于存储数据。

注意:cleancloud 在创建应用之前,要手动选择华东节点,因为华北节点会报一个 Code : undefined [410 POST https://avoscloud.com/1.1/classes/Comment] 的错误,无法正确加载出评论。

升级hexo版本和NexT版本

之前使用的NexT版本是5.1.2,没有自带 valine ,尝试了各种方法想把 valine 相关的代码复制到这个版本里,但结果都不理想,迫不得已只能升级。

升级hexo比较简单,删掉 lock 文件,删掉 node_modules,在 package.json 里直接把版本号改了,重新 yarn install。升级后没有发现兼容性问题。

升级NexT就比较操蛋了,theme 文件是以源代码的形式从 GitHub 上 clone 下来的,没有在原本版本升级的办法。只能重新clone下来一份,再把配置文件手动迁移过去(复制粘贴),如果之前魔改过 theme 文件,升级简直不要太难。

幸好我之前没有做什么改动和个性化,只需要把原先的配置再重新配置一份就够了。

配置SEO

基本上是参考下面这篇文章进行配置的,没有遇到什么棘手的问题。对 SEO 的配置对我这种流量为0的博客,怎么说呢,自己开心就好,哈哈哈。

Hexo博客Next主题SEO优化方法

静态文件cdn加速

我对博客的一个重要要求,就是访问速度,所有容易拖累访问速度的功能都要思考一下是否必要。所以我的博客一直比较简洁,没有其他花花绿绿的东西,保证速度优先。下面几项都是对访问速度的优化

博客内所使用的图片都是存储在七牛云中的,图片资源无需再优化。这次添加功能引入了不蒜子和 valine,使用 chrome 可以看出这两个 js 文件的加载速度不快。

所以我把这两个文件单独复制出来,上传到七牛云里,并在博客里引用七牛云的链接。

但是发布上去后出现了 http 请求被浏览器 block 的问题。因为我的主站使用的 https,七牛使用的 http(因为七牛的https不能使用免费流量,穷哭o(╥﹏╥)o)。浏览器不允许https请求http。

机智的我灵机一动,使用 nginx 转发七牛云的请求不就行了。所以我在 nginx.conf 添加了以下配置:

location /cdn {
    proxy_pass http://cdn.chaohang.top;
}

把 /cdn 目录下的请求全部转发到 cdn.chaohang.top 这个子域名下,比如:

https://chaohang.top/cdn/min.js 会被转发至 http://cdn.chaohang.top/cdn/min.js

这样子就可以成功绕过浏览器的限制了,因为实际的请求是通过服务器代理的。

Next 官方也提供了一些cdn加速,我们可以在配置文件里配置:

# vendors底下全部都是可使用的cdn
vendors:
  # Internal path prefix.
  _internal: lib

  # FancyBox
  # jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
  # fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
  # fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css
  jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
  fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
  fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css

使用gulp压缩html、css、js

因为 Next 的版本7.0,使用 next-neat 会有问题,所以我选择使用 gulp 做代码压缩,也方便以后扩展。

安装依赖

npm install gulp -g

npm install gulp-clean-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp gulp-babel gulp-imagemin babel-core babel-preset-es2015

npm install -D @babel/core

安装后的包版本如下

"babel-core": "^6.26.3",
"babel-preset-es2015": "^6.24.1",
"canvas-nest.js": "^2.0.3",
"core-util-is": "^1.0.2",
"gulp": "^4.0.2",
"gulp-babel": "^7.0.0",
"gulp-clean-css": "^4.2.0",
"gulp-htmlclean": "^2.7.22",
"gulp-htmlmin": "^5.0.1",
"gulp-imagemin": "^7.1.0",
"gulp-uglify": "^3.0.2",

"@babel/core": "^7.8.4"

在执行过程中可能会遇到一些包版本问题,如有问题请参照我给出的包版本进行调整。

在项目根目录下新建 gulpfile.js 文件

var gulp = require('gulp');
var babel = require('gulp-babel');
var cleancss = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
function css() {
    return gulp.src('./public/**/*.css')
        .pipe(cleancss())
        .pipe(gulp.dest('./public'));
}
// 压缩 public 目录 html
function html() {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'))
}
// 压缩 public/js 目录 js
function js() {
    return gulp.src('./public/**/*.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
}
// 执行 gulp 命令时执行的任务
gulp.task('css', css)
gulp.task('html', html)
gulp.task('js', js)
gulp.task('default', gulp.series(gulp.parallel('html', 'css', 'js')));

在生成代码文件后,使用 gulp 命令压缩文件:

hexo g

gulp

添加lazyload

lazylod可以在用户不查看的时候,不加载相关部分,从而提升网站加载速度。

先是在next目录里clone仓库:

git clone https://github.com/theme-next/theme-next-jquery-lazyload source/lib/jquery_lazyload

再把配置里的开关打开:

lazyload: true

添加站内搜索

Next集成了站内搜索功能,可以先安装依赖

npm install hexo-generator-searchdb --save

然后设置主题配置文件:

local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 3
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

以上就是全部优化过程了,即使没人访问的站,也要好好的优化,这就是一个工(搬)程(砖)师(工)的坚持。

本文首发于我的个人博客 https://chaohang.top

作者张小超

转载请注明出处

欢迎关注我的微信公众号 【超超不会飞】,获取第一时间的更新。

发表评论

电子邮件地址不会被公开。 必填项已用*标注