Organisation and Configuration for two static sites in the same folder

I need to have two different themes in the same site, and I have been recommended to just have two separate static sites.

I just need someone to check that i have gotten the organisation and configuration correct. This is what the root directory will look like:

content/
data/
layouts/
static/
themes/
config.toml
section2/
.../archetypes/
.../content/
.../data/
.../layouts/
.../static/
.../themes/
.../config.toml```

(the items with three dots in front of it is in "section2" directory)

The following is what the two config files look like:

/config.toml

```contentdir = "content"
layoutdir = "layouts"
publishdir = "public"
builddrafts = false
baseurl = "http://example.com/"
canonifyurls = true```

/section2/config.toml

```contentdir = "section2/content"
layoutdir = "section2/layouts"
publishdir = "section2/public"
builddrafts = false
baseurl = "http://example.com/section2"
canonifyurls = true```

Assuming this is correct so far, the thing that i am having difficulty understanding is "content" and "public", specifically the difference between the two and understanding what "public" is, does, and where its located.

I’m new here, so everything might me wrong.

The content dir is the place where you store your *.md files you’re writing your content in. The public dir is the location hugo is building your site - all files here must be copied to your webspace. Your public dir is empty until your first build.

You will get two different sections by adding their dir to content:

content/
content/section1/
content/section1/sec1post1.md
content/section1/sec1post2.md
...
content/section2/
content/section2/sec2post1.md
...

To get different “themes” (hugo calls it a layout here) you need to give hugo some templating files in your themes dir.

themes/
themes/layouts/
themes/layouts/section1/
themes/layouts/section1/single.html
themes/
themes/layouts/
themes/layouts/section2/
themes/layouts/section2/single.html

But this only gives you different views for a single item (calling site.tld/section1/sec1post1 after upload) For getting your posts (secXpostY) shown in different places you’ll need a template themes/layouts/section1/index.html for a list view of all content in section1. And you should use just one config.toml, I think there is just one executed when calling hugo.

This is the way @moorereason told by putting complexity in theme (I hope…) - it’s just the one way I know. I have just no idea how to get this by deployment…

Yes this is one way to do it, but people have recommended to just set up two separate sites, and I think I would prefer this too. The only trouble I am having is knowing how to then setup the config file(s) and the baseurl(s) to make both separate static sites work under the same domain name.

OK, I’ll give it a new try after reading your other thread.

Make one site with your first layout with all your needed folders and files (layout, content, config.toml, …). This will generate a public folder. (call this site1 for here)

Now switch to another folder, create a new site will all folders and files - this will give you another public folder. (and this site2)

Now set in your config.toml for site1:

baseURL = "yourdomain.tld"

and in your config.toml for site2:

baseURL = "yourdomain.tld/site2"

Then upload the site1-public dir to your webspace. Create a new folder inside it called site2 (or whatever you have chosen in your config.toml for site2) and upload the site2 public dir into this subfolder.

But doing it this way it might get hard to create links dynamically between your two sites. I think it’s not possible to create two different sites by just calling hugo one time - for deployment in this version you might create a script for calling hugo on both (site1 and site2), merging your public dirs in the correct way and upload the files. You have to decide, which option you will take - I can’t see a recommendation in his words…

So my OP was correct?

Thanks for this, just what I needed to know.

This is very important to know, so thanks for this.

Yes, if I decide to choose separate sites first then it may be that I switch to putting the complexity in the theme later on. However I will go away and think about it first. I will be referring to your post:

So thanks very much for this.

Thinking about it, another issue came to me. I can’t see a way to get a complete sitemap in a two-page-setting.

It might be possible to nest your two sites, but creating them in different directories is IMHO a more simple way without interferences.

I’m glad I could help you :slight_smile:

Do you mean a “two-site-setting”?

Yes, this was a short look to my native language :wink: I meant two-site-setting of course.

You mean, its a more simple way to do it like this:

Is this what you mean?

Not exactly. You’ve got two options:

  1. Create two different sites in two different folders and merge (maybe by specifying the publishdir in the correct way for one or both of your sites) the output.
  2. Use the section1 section2 method and write different layouts for them and create just one site.

The structure of folders you suggested in your first post in this thread - I don’t believe that this will work without problems. You’ve got nested folders but two completely separated sites in it, sounds strange for me.

Just play around for while with very simple layouts, just some kind of a “hello world” and find out what fits best to your needs.

The main reason for originally wanting to use two separate sites is that Section2 is going to get updated regularly whilst the rest of the site is going to rarely be changed. Is this a good enough reason to use separate sites, or is the more a job for Git Subtree?? Im thinking mainly in relation to rebuilding the site every time a change in Section2 occurs, would there be little disadvantage to just use a single site and just rebuilding the site again every time there is an update/change??

I’ve never used git, so I’m not the one to answer this.

But the build time for Hugo is so short, I wouldn’t get the idea to split my site, there is just no reason for it.

And it’s been discussed before some times, one of the next versions of Hugo will maybe be able to create just the changed parts and not build the complete site again and again.

So, it depends. How big is your site?

Generally speaking, Hugo is surprisingly fast, so I would recommend building a single site to start with. Don’t over-complicate this thing before you even get started.

1 Like

Assuming that I have chosen the single site option, I have two different themes, can you explain how I should organise the Source directory.

I dont know whether both themes should go together in the Themes folder, or whether they should be put in the Static and Layouts folder, with both themes’ Static files going in the Static folder, and both themes’ HTML files going in the Layouts folder.

Choosing a single site option means you have one theme. Hugo is not able to use two different themes in one site.

Read the docs about creating a theme and use the file structure given in my first reply. You can use different stylesheets in different layouts and you may save them in a static folder.

Look around at the themes showcase and the linked repositories to get a feeling for organizing your source.

Ok this clears up that confusion.

Yes, thats what I was using as my guide. What is throwing me off is that your file structure uses a “themes” folder which in turn has “layouts” subfolder (and presumably static folder?). My question is should I put the static folder and layouts folder in the themes folder or should they be in the root folder (which I think is the conventional structure)??

Okay, now I see. I developed my own theme separate (to get it maybe sometimes on git for others) and haven’t written it.

Also there is a mistake in it, all “themes”-folders have to be corrected to themes/YOURTHEMENAME/..., sorry for that.

Right… but what should be below themes/YOURTHEMENAME/... if there is a Layouts and Static folder in root??

Read this to check which template file is processed when using a theme in themes and providing additional files in your root

Thank you for this, this sets me in the right direction, but at no point does Hugo Docs explain what the difference between

/layouts/
/themes/layouts

Its says if one folder is empty it then uses the next one in priority. It doesnt say when to use one over the other, or the advantages of using one over the other, just like if you have TWO themes with two different static folders and two different html, where to actually put this, or where you could or should put this.

This whole entire thread exists because Hugo Docs simply doesnt explain properly how to actually use Hugo.