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

**URL:** <https://discourse.gohugo.io/t/two-themes-as-separate-hugo-directories-deployed-to-the-same-website/27899>\
**Category:** support\
**Created:** [August 28, 2020, 11:29pm UTC](https://discourse.gohugo.io/t/two-themes-as-separate-hugo-directories-deployed-to-the-same-website/27899 "2020-08-28T23:29:44Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![santiyounger](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/santiyounger/32/12257_2.png) [@santiyounger](https://discourse.gohugo.io/u/santiyounger)\
**Post date:** [August 28, 2020, 11:29pm UTC](https://discourse.gohugo.io/t/two-themes-as-separate-hugo-directories-deployed-to-the-same-website/27899/1 "2020-08-28T23:29:44Z")

</div>

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](https://discourse.gohugo.io/t/integrate-two-themes/12177/7)

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](https://discourse.gohugo.io/t/how-to-have-two-themes-for-different-sections-of-a-site/1948/7)  
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](https://discourse.gohugo.io/t/section-vs-separate-site-for-two-different-themes/2884/14)

## 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

[Color Your World](https://themes.gohugo.io/hugo-theme-color-your-world/) as the main theme.

## Secondary Theme

And This one [GitHub - jethrokuan/cortex: Hugo Theme for my Braindump](https://github.com/jethrokuan/cortex) for `domain.com/notes`  
here’s the live demo for it [https://braindump.jethro.dev/](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

> [@Section vs Separate Site for two different themes](https://discourse.gohugo.io/t/section-vs-separate-site-for-two-different-themes/2884/14):
>
> I don’t know how to do this.

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!

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [August 29, 2020, 9:04am UTC](https://discourse.gohugo.io/t/two-themes-as-separate-hugo-directories-deployed-to-the-same-website/27899/2 "2020-08-29T09:04:52Z")

</div>

> [@santiyounger](#):
>
> The right solution for what I need is what is briefly described…

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

---

<div class="post-metadata">

**Author:** ![santiyounger](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/santiyounger/32/12257_2.png) [@santiyounger](https://discourse.gohugo.io/u/santiyounger)\
**Post date:** [August 29, 2020, 11:22pm UTC](https://discourse.gohugo.io/t/two-themes-as-separate-hugo-directories-deployed-to-the-same-website/27899/3 "2020-08-29T23:22:12Z")

</div>

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/](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!

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [August 30, 2020, 12:40am UTC](https://discourse.gohugo.io/t/two-themes-as-separate-hugo-directories-deployed-to-the-same-website/27899/4 "2020-08-30T00:40:26Z")

</div>

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/](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:

```auto
.
├── 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:

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

```

and in your `config-notes.toml` file:

```auto
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.

---

<div class="post-metadata">

**Author:** ![santiyounger](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/santiyounger/32/12257_2.png) [@santiyounger](https://discourse.gohugo.io/u/santiyounger)\
**Post date:** [August 30, 2020, 2:01pm UTC](https://discourse.gohugo.io/t/two-themes-as-separate-hugo-directories-deployed-to-the-same-website/27899/5 "2020-08-30T14:01:00Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![santiyounger](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/santiyounger/32/12257_2.png) [@santiyounger](https://discourse.gohugo.io/u/santiyounger)\
**Post date:** [September 3, 2020, 7:36pm UTC](https://discourse.gohugo.io/t/two-themes-as-separate-hugo-directories-deployed-to-the-same-website/27899/6 "2020-09-03T19:36:11Z")

</div>

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_

> **[A Spoonful of Hugo: Troubleshooting Your Build | Alison Hill](https://alison.rbind.io/post/2019-03-04-hugo-troubleshooting/)**
>
> A few troubleshooting strategies to save your sanity

  
(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

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [September 5, 2020, 7:36pm UTC](https://discourse.gohugo.io/t/two-themes-as-separate-hugo-directories-deployed-to-the-same-website/27899/7 "2020-09-05T19:36:15Z")

</div>

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