Two Themes As Separate Hugo Directories, Deployed To The Same Website

support
4

Technically, you have two config files because you want Hugo to create two sites, with each site configured to use a different theme.

Some few background information you need to understand:

  1. Read docs here: https://gohugo.io/getting-started/configuration/
  2. Hugo (by default) generates your site into a public/ directory. Whatever is in public/ is what becomes your website. You can tell Hugo to generate your site into a different directory instead, such as otherpublicdir/ by configuring the publishDir
  3. You can have multiple config files in your project, and specify to Hugo which one to use to generate your site.

So, you could have this site layout for example:

.
├── config-notes.toml
├── config.toml
├── content
│   ├── _index.md
│   ├── main1.md
│   ├── main2.md
│   ├── main3.md
│   └── notes
│       ├── post1.md
│       └── post2.md
├── layouts
├── public
├── static
└── themes
    ├── main
    │   ├── layouts
    │   │   ...
    │   └── theme.toml
    └── notes
        ├── layouts
        │   ...
        └── theme.toml

Then in your main config.toml file:

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My Main Hugo Site"
theme = "main"

and in your config-notes.toml file:

baseURL = "http://example.org/notes/"
languageCode = "en-us"
title = "My Notes"
theme = "notes"
contentDir = "content/notes"
publishDir = "public/notes"
staticDir = "static/notes"

When you run hugo, Hugo will use the config.toml file.
When you run hugo --config=config-notes.toml it will use the specified file.

6 Likes