Using two themes for two websites, served from the same domain?

support
1

Hello,

I am trying to convert my current site from Jekyll to Hugo. I am not trying to do a 1:1 conversion, but, basically take the contents from the old page to the new page, and integrate it to be slightly more manageable.

I am trying to use 2 different themes (3 actually, but the third is a shortcode) using the git submodule concept to convert my jekyll based site (that was previously using a theme that I converted into Jekyll). Deployment wise, I am trying to accomplish this with Github Pages / CloudFlare Pages (Preferably Cloudflare Plages). My goal is to serve them on the same domain example.org.

I have been reading this thread:

(unfortunately can’t link due to being a new user)

Which has been super helpful so far, but, I am struggling to get the concept to work for my situation for the root folder.

Within this new project, I am wanting to use the following two themes:

With hugo-notice additionally being used for the blog. However, I noticed that I also need to add it to the “root” page for it to process everything.

The urls / domains, that I am trying to accomplish will use subfolders:

example.org/ - hugo-profie
example.org/blog/ - hugo-notice, hugo-theme-stack

Due to my blog previously existing for 7 years, I would prefer to not use subdomains, unless I can redirect all traffic from example.org/blog/ and transparently rewrite, example.org/blog/2020/example-blog-post to blog.example.org/2020/example-blog-post.

So far, I have created two config.yaml files:
config-blog.yaml
config-root.yaml

The blog currently config contains:

baseurl: http://localhost/blog/
languageCode: en-us
theme: ["hugo-notice","hugo-theme-stack"]
paginate: 4
title: $myname Blog
copyright: $myname
contentDir: "content/blog"
publishDir: "public/blog"
staticDir: "static/blog"
permalinks:
    post: /:year/:slug/
    page: /:slug/

Along with other content that is more specific about the sub-page for /blog/, and this is working great and I can serve just the folder using hugo serve --config config-blog.yaml

My Folder Contents look similar to this:

.
├── config-blog.yaml
├── config-root.yaml
├── content
│   ├── _index.md
│   └── blog
│             ├── _index.md
│             ├── categories
│             │       ├──subfolder
│             │       │      └──_index.md
│             │       └──subfolder
│             │               └──_index.md
│             ├── pages
│             │       ├──subfolder1
│             │       │      └──index.md
│             │       └──subfolder2
│             └── post
│                     ├── blog-post1
│                     │       ├──index.md
│                     │       └──image.png
│                     ├── blog-post2
│                            ├──index.md
│                              └──image.png
├── layouts
│   └── partials
│             ├── _index.md
│             ├── footer
│                     └──footer.html
│             ├── header
│                    └──header.html
│                    └──subfolder
│                            └──_index.md
├── public
├── static
└── themes
    ├── hugo-profile
    │   ├── layouts
    │   │   ...
    │   └── theme.toml
    └── hugo-theme-stacks
        ├── layouts
        │   ...
        └── theme.toml

The contents of the /layouts folder is for the blog theme, not for the root page.

When I start to work on the root page however, the config-root.yaml file is the same as:

The only change is that the baseURL is configured to be: http://localhost/ for the time being.

Once I start this using hugo serve --config config-root.yaml´, it automatically starts to read and populate the contents of the content/blogfolder. I have not yet started a hugo serve on theconfig-blog.yaml` file.

So my questions are

  1. How can I prevent the hugo-profile theme from reading or populating the /content/blog folder that will be used by a separate config and theme?
  2. Is there a good way to have the /layout folder only apply to the blog config and a separate one for the root config, or so I need to rework/rethink this idea? I took a look at this blog post" - Hugo - Customizing a Theme , the hugo documentation: Hugo | Customize a Theme
    , but it doesn’t go into more advanced setups with two themes like this. Or maybe I don’t understand it from the documentation.
  3. Should I split this up into two repos or two separate subfolders, and then manage them separately and publish them into the same destination folder? If so, what is the best way to then manage to serve this via a single domain in that situation?

Really appreciate any insight!

2

Apologies for the link breakage, but because I am new - I couldn’t post them, but, wanted to make sure that everything was included in the original post so you had all the info.