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

support
1

Hey guys,

I am new here and I just made some good research on how to achieve this. There were some good suggestions couldn’t find exactly how to achieve this.

Here are some other questions that treat the same situation but without much of a clear way to achieve it.

Integrate Two Themes - #7 by tania

In here the solution was just to split it into two websites, which is not what I’d go for. How to have two themes for different sections of a site? - #7 by simulacra10
The right solution for what I need is what is briefly described by @moorereason
in here Section vs Separate Site for two different themes - #14 by edison

What I Want To Achieve

What I want to achieve is to have a theme set for the whole website

domain.com

and another theme for

domain.com/notes

To be specific, these are the themes I’m using

Main Theme

https://themes.gohugo.io/themes/hugo-theme-color-your-world/ as the main theme.

Secondary Theme

And This one GitHub - jethrokuan/cortex: Hugo Theme for my Braindump for domain.com/notes
here’s the live demo for it https://braindump.jethro.dev/

Reason to Use Two Themes

The main reason to do this in my case, is due to the drastically different way that the secondary theme deals with the organization of links and back-links which is exactly what I need, it’s a clean view without the menus in the main theme. Yet for the main website the main theme is what I need for every other page.

The way to achieve this is what’s described in here

the way I’d like to achieve this is to generate two different hugo directories, one with each theme, and then somehow deploy them together under one root directory.

Alternative Solutions that Wouldn’t Work For My Needs

Using a sub domain would be an easier way to solve it, but I’d like to avoid it since I’d prefer to have all the traffic from google to my main site.

Two Websites

Same as above, it would split the focus of the traffic into different sites.

Tools Used To Publish

I’ll be using gitlab to host and netlify to publish it with a custom domain name.

What I don’t know is how can I combine both of this directories into one website.

An repository example doing something similar would really help, since what I struggle with is to know how this would look like in practice.

Thank You

Any tips to point me in the right direction would be greatly appreciated thank you!

2

What’s preventing you from doing it as described there?

1 Like
3

Thanks for the reply, What I don’t know how to deal with is the config.toml
since there would be two of them, one per theme since each theme has a sub-directory.

particularly how to deal with the
baseURL = “https://example.com/”
particularly so that gitlab and netlify can correctly use the two different sub-directories with separate themes as one website.

Thank you, any help is very much appreciated!

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
5

Thank you so much for the detailed explanation. I’m going to be setting this up correctly according to your instructions. I’ll report if I got it working or if I run intro trouble with this set up!
Thanks a lot!

6

I already tested it and it worked perfectly thank you! I only want to point out an issue I found for anyone else trying this.

Since I’m using netlify to deploy it doesn’t seem to work deploying with git (github)
Instead I have to use the drag and drop option in netlify
Like mentioned in this article:
Under the heading *#3: Netlify drag-and-drop


(uploading only the public directory)

I have the default netlify.toml config suggested in the hugo docs, but netlify is probably having trouble reading the “public” directory, instead it seems to build the website from content.

Thanks again for the help @pointyfar

7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.