Background

Very few themes manage to balance practicality and aesthetics. For example, although the aurora theme looks cool, it displays too little content on a single page, detracting from the focus on content; just want to tinker

This led to the following requirements:

• A single configuration file generates multiple blog themes that coexist simultaneously.
• Consistent routing between sites, facilitating easy theme switching. Since the entire blog is now managed through Git, while it’s possible to use different branches to manage different themes, this approach is very inconvenient for updating articles. Therefore, this solution is not adopted.

Configuration

Since hexo generate can specify a configuration file, this provides a possibility for our solution. This time, we are using Hexo Next 8 and Aurora two sets of themes, with the configuration files organized as follows in the root directory:

1
2
3
4
5

-/
--_config.yml  Global configuration prepared for Aurora
--_configsimple.yml  Global configuration prepared for Next
--_config.aurora.yml  Aurora theme configuration
--_config.next.yml  Next theme configuration

For general themes, using hexo generate --config x.yml would be no problem, but the Aurora theme requires a plugin hexo-plugin-aurora that directly affects the hexo command. This means that the Aurora theme is mutually exclusive with other themes; with it installed, forget about using other themes. Is there really no solution? Due to my limited knowledge of npm, the clumsy workaround I thought of is to uninstall the hexo-plugin-aurora plugin when not needed and reinstall it when necessary, keeping the package.json clean. Summarizing, for the sake of having these two themes, what we need to do:

• Maintain unique dependencies for each
• Use custom build commands

Routing Issue

To unify the routing of multiple sites, for instance, if I am currently on www.zair.top/post/a page and want to switch to another theme, I just need to replace www with s, making it s.zair.top/post/a, thereby realizing a quick theme switch.

The main issue here lies in the .html suffix of the address. Generally, ensuring the following fields in the global configuration files of multiple themes are unified should suffice:

1
2
3
4
5
6

# permalink: :year/:month/:day/:title/ for more details see https://hexo.io/zh-cn/docs/permalinks.html
permalink: /post/:title.html
permalink_defaults:
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

But Aurora isn’t an ordinary theme; it’s a single-page application built with Vue where the address bar input suffix (like /post/a) is all treated as a request parameter, whereas ordinary themes consider it a path to a static page. If it’s hosted on Cloudflare Pages, this issue can be ignored, but for Vercel, one needs to configure it themselves. Specifically, a vercel.json needs to be created in the root directory with the following content:

1
2
3
4
5
6
7
8

{
    "redirects": [
        { "source": "/post/:path*.html", "destination": "/post/:path*" }
    ],
    "rewrites": [
        { "source": "/:path*", "destination": "/index.html" }
    ]
}

The first rule redirects all .html suffixes, to be compatible with general static themes; The second rule proxies all requests back to the root page, which is a necessary configuration for Aurora on Vercel; Although these two rules conflict, Vercel chooses to comply with the former when there’s a conflict, and it works fine.

For many static page hosting sites, there is the feature of Pretty URL, which removes the .html suffix from the URL, but Vercel does not have this feature. If you want to use it, you must configure another vercel.json:

1
2
3
4
5

{
    "rewrites": [
        { "source": "/:path*","destination": "/:path*.html"}
    ]
}

However, Vercel’s configuration file does not support renaming; there can only be one. Therefore, sites with the Next theme can only be hosted on Netlify, which handles the .html suffix very well.

Finally, let me share the deployment configurations on both sites:

This is the configuration for deploying Aurora on Vercel, which is actually two commands:

1

npm install hexo-plugin-aurora && cp index_prod-00ee5e98.js node_modules/hexo-theme-aurora/source/static/js/

The second command is used to override my custom theme js;

Below is the configuration on Netlify: