Hexo博客改造 | Leopold's Blog

前言

为什么要改造

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

Hexo 标签的痛点在哪

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

Butterfly 主题的痛点在哪

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

如何改造

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

改造后的结果

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

步骤

init blog

1
2
3

#博客根目录
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