Multiple Hugo Themes For Different Paths In Same Site #

Background #

I decided recently to publish a few of my notes online but wanted to keep it simple and naturally thought of using hugo for it. Now, I could simply setup another subdomain (e.g. notes.shantanugoel.com) but wanted to avoid doing so, and rather use something like shantanugoel.com/notes. This is possible but it’d use the same blog theme that I am using on my main domain shantanugoel.com. So I set out to find a way to use a main blog theme for my site while using a separate notes theme for the /notes path.

Solution #

1. Create a separate folder to hold the content for the notes #

🦄  ls
archetypes/
config/
content/
data/
layouts/
notes/ <<---I created this folder
public/
resources/
static/
themes/

2. Split the hugo configuration #

The split would have:

A default configuration that is used for all parts of the site
A configuration used only for the main site (Primarily specifying the theme and any specific theme parameters)
A configuration used only for the notes site (Primarily specifying the theme and any specific theme parameters + changing the baseURL, and the directory from where to pick up the content and where to publish it)

This is how it looks like

🦄  exa -a --tree --level=2 config
config
├── _default
│  └── hugo.toml
├── main
│  └── hugo.toml
└── notes
   └── hugo.toml

🦄  bat .\config\main\hugo.toml
───────┬────────────────────────────────────────────────────────────────────────────────────────────────────────────
       │ File: .\config\main\hugo.toml
───────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────
   1   │ [module]
   2   │ [[module.imports]]
   3   │   path = 'github.com/shantanugoel/hugo-theme-terminal/v4'
   4   │
   5   │ theme = "hugo-theme-terminal"

🦄  bat .\config\notes\hugo.toml
───────┬────────────────────────────────────────────────────────────────────────────────────────────────────────────
       │ File: .\config\notes\hugo.toml
───────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────
   1   │ title = "Shantanu's Notesverse"
   2   │ contentDir = "notes"
   3   │ publishDir = "public/notes"
   4   │ baseurl = "https://shantanugoel.com/notes"
   5   │
   6   │ [module]
   7   │ [[module.imports]]
   8   │   path = 'github.com/shantanugoel/hugo-book'
   9   │
  10   │ theme = "hugo-book"
  11   │
  12   │ [params]
  13   │   BookComments = false
  14   │   BookSection = "*"
  15   │
  16   │ [menu]
  17   │ [[menu.before]]
  18   │   name = "Blog"
  19   │   url = "https://shantanugoel.com"

3. How to use it #

Now, you can build the different parts of the site using the -e parameter for hugo to specify the environment. E.g. main site can be built using hugo -e main and the notes site can be built using hugo -e notes. Same can be done for any other hugo commands as well.