Hexo博客改造

前言

为什么要改造

• 由于我对博客美化进行了改造，导致更新主题后，自己的美化都失效了，更新主题的成本太大，荒废精力。
• 博客未启用自动部署，每次部署都需要在本地渲染 public 文件，异地编写成本太大，反而降维。
• npm、配置文件混乱，未使用的插件也写入了 package.json 中，对后续自动部署造成不必要的影响。

Hexo 标签的痛点在哪

• 某些标签语法的确美化页面，但对于以后移植性而言，它做不到兼容，因此，我强调 去Hexo标签化 ，尽量减少使用非 Markdown 渲染代码，减少日后移植难度。

Butterfly 主题的痛点在哪

• 配置文件项多，配置文件内容随版本更新变化大。
• 配置文件的部分选项没有开关，原作者意识到需要将非核心组件移除时已经太晚，而且移除需要修改配置文件（这是在写配置文件的时候没有考虑好，最起码你得支持向下兼容，更新太混乱！）对以前的用户非常不友好。

如何改造

• 整理npm、整理配置文件
• Vercle自动部署。
• 主题使用npm引入方式，编写脚本，通过 cp 命令，将改造代码复制到主题对应文件处，自动部署时启动此脚本。

改造后的结果

• 插件清晰，可随时update。
• 自动部署，异地更改只需要在 GitHub 上提交就热更新。
• 主题可随意大胆更新，不影响自己美化部分。

步骤

init blog

#博客根目录
hexo init myBlog
cd myBlog

npm

我的配置，根据自己使用情况配置。

# 主题
npm i hexo-theme-butterfly --save

# 地图
npm i hexo-generator-sitemap hexo-generator-baidu-sitemap hexo-baidu-url-submit --save

# 功能性 - 文章
npm i hexo-filter-nofollow hexo-wordcount hexo-abbrlink --save

# 功能性 - 访问
npm i hexo-generator-feed  hexo-generator-search hexo-generator-searchdb hexo-generator-cname --save

# 功能性 - Pug
npm i hexo-renderer-pug hexo-renderer-stylus --save

# 功能性 - 压缩
npm i gulp-htmlmin gulp-clean-css gulp-htmlclean gulp-imagemin gulp-uglify --save

# 其他
npm i terser node-snackbar --save

# butterfly 抽象插件
npm i hexo-butterfly-artitalk --save

配置文件内自行去主题官网找，都有。

美化改造

博客根目录创建文件夹 extra ，自定义美化文件复制到此文件夹下，比如我需要hexo编译时使用到script，需要自定义美化的js文件为 btns.js。

前提一，获取此文件相对地址：extra/js/btns.js

前提二，复制到主题内的相对地址：node_modules/hexo-theme-butterfly/scripts/tag/btns.js

自动部署

需要连接GitHub，并import（vercel不会配的看我置顶文章）。注意私有化仓库！注意私有化仓库！注意私有化仓库！

根目录编写复制脚本 generate.sh

#!/bin/sh
cp -r extra/js/* node_modules/hexo-theme-butterfly/scripts/tag && hexo ge

在 vercel 中：

• FRAMEWORK PRESET : 选择 hexo

• BUILD COMMAND : 输入 sh generate.sh

• Root Directory ： 选择博客根目录

以上三点必须满足才可，或者自行更换相对文件地址。

或者不选择脚本，直接在 BUILD COMMAND 中输入脚本的内容也行，建议配一个启动脚本，以后改这个脚本文件即可，一劳永逸。