我的Hexo博客多主题同时部署的实现思路(Butterfly+安知鱼)

前言

最近看到好多Hexo博客都在使用安知鱼主题,不得不说,这个主题确实好看,满满的科技感。

并且它是一款基于hexo-theme-butterfly修改的主題,对本来就使用Butterfly主题的我来说,配置起来也是特别方便。

但是博客对Butterfly做了些绑定主题的修改,所以不想直接替换为安知鱼主题,所以就萌生了一个博客多个主题同时部署的想法,正好可以把之前的Halo博客给替换掉了。

这样insectmk.top域名跟insectmk.cn域名的博客不仅内容一致,还能有所区别,简直是太合适了!!!

开始

安知鱼

首先,根据主题安装|安知鱼主题官方文档安装主题,这里推荐使用npm安装的方式,使用以下步骤进行安装:

  1. 在博客根目录下打开cmd执行以下内容:

    1
    npm i hexo-theme-anzhiyu
  2. 安装pugstylus渲染插件,当然,如果之前使用的是Butterfly主题,那一定是安装了的:

    1
    npm install hexo-renderer-pug hexo-renderer-stylus --save
  3. 复制安知鱼配置:复制node_modules/hexo-theme-butterfly/_config.yml到博客根目录并更名为_config.anzhiyu.yml,当然,你还需要根据基础配置|安知鱼主题官方文档来修改你的配置,这个配置文件与Butterfly主题的配置文件内容大体一致,可以将相同配置内容粘贴过来。

配置分离

目前我们的博客已经有两个主题了,当然,如果加上Hexo的默认主题的话也就是三个。

想要博客生成两个静态网站,并且这两个静态网站互不冲突并且同时存在,就需要进行配置分离啦。

首先说一下我的解决思路,之前的主题(Butterfly)配置就不做修改了,只做扩展,也就是默认使用的是Butterfly的配置,如果需要编译安知鱼主题的话,则需要在hexo命令上指定扩展的配置文件。

我们在博客根目录下新建一个_config.anzhiyu.build.yml配置文件,这个文件用于替换根目录下_config.yml配置的部分内容和一些插件的开关,我的_config.anzhiyu.build.yml配置文件内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
# 冲突配置
title: "InsectMk的个人空间"
subtitle: "今天特别开心!"
description: "每天都要微笑" # 签名
keywords:
- "个人博客"
- "InsectMk"
author: "InsectMk"
language: zh-CN
timezone: Asia/Shanghai #中国的时区
email: "3067836615@qq.com"

# 多博客区分配置
url: https://insectmk.top
public_dir: public_anzhiyu
theme: anzhiyu

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
# 发布
deploy:
# Gitee上传
- type: git
repo: https://gitee.com/insectmk/hexo-blog-anzhiyu.git
branch: master
message: # 'blog update'
# Github上传
- type: git
repo: https://github.com/insectmk/hexo-blog-anzhiyu.git
branch: master
message: # 'blog update'

# 部分插件的关闭
## 首页轮播图
swiper:
enable: false # 开关

好了,到了这一步,配置分离已经完成了,我们可以通过在博客根目录下执行以下两组命令来分别生成Butterfly主题的博客与安知鱼主题的博客:

Butterfly:直接像以前一样Hexo三连即可

1
2
3
4
5
6
# 清理静态网站文件夹
hexo clean
# 生成静态网站
hexo generate
# 部署到Git
hexo deploy

安知鱼

指定配置文件的Hexo三连,越靠右的配置优先级越高。

指定配置文件会在项目根目录生成一个_multiconfig.yml配置整合文件,可以将这个文件加入.gitignore忽略文件哟~

1
2
3
4
5
6
# 清理静态网站文件夹
hexo clean --config _config.yml,_config.butterfly.yml,_config.anzhiyu.yml,_config.anzhiyu.build.yml
# 生成静态网站
hexo generate --config _config.yml,_config.butterfly.yml,_config.anzhiyu.yml,_config.anzhiyu.build.yml
# 部署到Git
hexo deploy --config _config.yml,_config.butterfly.yml,_config.anzhiyu.yml,_config.anzhiyu.build.yml

优化

如果每次都这样一行一行执行是很累的,我们可以定义两个部署脚本,一个用于发布Butterfly主题,一个用于发布安知鱼主题,我的Windows脚本内容如下:

Butterfly主题部署脚本,deploy.bat

1
2
3
4
5
6
7
8
9
10
@echo off
call hexo clean
# 这个是豆瓣插件啦,没有的就不加了嗷,https://github.com/mythsman/hexo-douban
call hexo douban
call hexo generate
# 这个是Algolia在线搜索哟,没有也不加噢
call hexo algolia
call hexo deploy
pause

安知鱼主题部署脚本,deploy-anzhiyu.bat

1
2
3
4
5
6
7
@echo off
call hexo clean --config _config.yml,_config.butterfly.yml,_config.anzhiyu.yml,_config.anzhiyu.build.yml
# 这个是豆瓣插件啦,没有的就不加了嗷,https://github.com/mythsman/hexo-douban
call hexo douban --config _config.yml,_config.butterfly.yml,_config.anzhiyu.yml,_config.anzhiyu.build.yml
call hexo generate --config _config.yml,_config.butterfly.yml,_config.anzhiyu.yml,_config.anzhiyu.build.yml
call hexo deploy --config _config.yml,_config.butterfly.yml,_config.anzhiyu.yml,_config.anzhiyu.build.yml
pause

注意事项

  1. Butterfly安知鱼图标规则不一样噢,需要在_config.anzhiyu.yml配置文件中重新配置一下,不要盲目复制啦。
  2. 两个主题的部署脚本不能同时执行哟,它们会同时操作.deploy_git文件夹,会报错的!需要分别执行!

最后

我的两个主题分别部署在了Butterfly主题安知鱼主题,可以看看有啥区别哟~

参考

Hexo 的多主题自动化部署

安知鱼主题官方文档