博客优化小记

2020-11-24 11:09:50 浏览数 (1)

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

  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 添加了以下配置：

代码语言：javascript复制
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加速，我们可以在配置文件里配置：

代码语言：javascript复制
# 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

安装后的包版本如下

代码语言：javascript复制
"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 文件

代码语言：javascript复制
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 命令压缩文件：

代码语言：javascript复制
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

然后设置主题配置文件：

代码语言：javascript复制
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 作者张小超 转载请注明出处

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

gulp 内容分发网络CDN cdn jquery https

0 人点赞