博客優化小記

趁着週末把博客優化了一下，主要優化以下幾點：

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

作者張小超

轉載請註明出處

歡迎關注我的微信公衆號 【超超不會飛】，獲取第一時間的更新。