hexo博客中使用多主题并在vercel中自动部署

从yilia主题换到fluid主题后，我还是舍不得我在yilia做的美化，所以就想到使用双主题一起走。
结果就是困难总比办法多。。。。

【注】做双主题已经是一段时间之前的事了，当时懒得写文章，现在迁移的时候出了bug才想起来写，所以记忆可能出现某些偏差，请谨慎操作。
(*^▽^*)

参考文章

实现思路

当我们使用hexo generate生成网站html的时候，hexo通常会按照默认主题里面的_config.yml来进行生成。
那么我们只要使用不同的config文件分别生成就可以实现多主题了，比如：

假如我们有_config_homepage.yml，我们就可以用以下命令来用这个配置生成主题

1
hexo --config _config_homepage.yml g

我们可以将生成的另一个主题放在博客的子目录下，这样就不会冲突了

操作步骤

  • 1.安装需要使用的新主题（正常安装流程即可）

  • 2.分离配置，复制一份_config.yml，将其命名为另一个名字，我这里命名为_config_homepage.yml
    接着还得创建新的资源目录source，我这里直接在根目录创建了source_homepage，

  • 3.修改新的配置文件_config_homepage.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
# Site
# 部分选项置空，防止和采用的theme冲突
title: Homepage
subtitle: 'Homepage'
description:
keywords:
author:
language: EN
timezone: ''

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://www.boredliam.top/homepage/ # 改到新目录
root: /homepage/ # 改到新目录
permalink: posts/:abbrlink.html
permalink_defaults: :title/
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
# 这个public_dir是最终生成html文件的地方，像我这样就在boredliam.top/homepage这里访问双主题
source_dir: source_homepage # 改到新的资源目录
public_dir: public/homepage # 改到新的资源目录（必须在博客的public文件夹内）
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: yilia # 我使用的副主题是yilia

原来的_config.yml修改为新的主题即可

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: fluid
  • 4.写新文章

创建新文章的命令和以前相同，只不过hexo后面要加上配置文件的声明，如在homepage中创建一篇新文章：

1
hexo --config _config_homepage.yml new "xxxxx"
  • 5.开始部署
1
2
3
4
hexo cl
hexo --config _config.yml g
hexo --config _config_homepage.yml g
hexo d

这里的hexo --config _config.yml g也可以写hexo g，因为都是按默认配置部署。
由于所有渲染内容都在原博客的public文件夹下，所以这里对应的是同一个github仓库，只需要hexo d就能同时把两个主题渲染的页面推送过去。

但是部署完成后可能出现homepage额外渲染blog中的内容，这是因为文章信息储存在db.json中，可以通过hexo g后加上rm db.json来解决

vercel部署

我切换到vercel自动部署之后发现，vercel的自动部署不会渲染homepage中的内容，手动部署了之后虽然生成了html文件，但是访问依旧显示404
vercel的自动部署默认只执行hexo generate，所以只要想办法加上渲染homepage的命令即可
vercel通过调用npm run build指令来进行部署，build的内容可以在package.json中更改，我的更改如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo --config _config_homepage.yml generate & hexo clean && hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
 ......
  },
  ......
}

将命令改为了先执行hexo --config _config_homepage.yml generate，再执行一次hexo clean（因为此时不使用db.json），最后再执行hexo generate
这样我们就完美实现了双主题+自动部署

（md终于改好bug了）

study > blog-building
#Computer Network #blog
hexo博客中使用多主题并在vercel中自动部署
https://www.boredliam.top/posts/156955.html
作者
BoredLiam
发布于
2025年7月19日
许可协议