How to combine two Hugo themes

I need to build a landing page for a project, and a blog to document its progress and other things. Right now, I am using Agency theme for the single-page landing page at, and Casper theme for the blog at Now I want to combine those two and make the blog at I don’t want to change the look of the landing page, but the blog site can be rebuilt if necessary. I wonder what is the best way to combine those two themes together in Hugo, or how to piggyback on the Agency theme for my needs. Other solutions are also welcome. Thanks.

The index [or landing] page uses its own template: themes/<yourtheme>/layouts/index.html. Blog pages generally use the list.html [for the list of blog posts] and single.html [for viewing individual posts] templates. Those live at:




So, it’s definitely possible to have a different appearance for both. Lift the index.html template from one theme and the list.html and single.html templates from the other and add them to your new theme.

Then, you’ll also need to merge the two theme stylesheets into one. Your main problem there would be the possibility [probability!] of conflicting CSS rule names across both themes, which you’d have to sort out by manually renaming classes/ids as needed.

Definitely doable though.

I would probably just accept that there are two sites (see the multilanguage tutorial) and build one below the other:


Site 1 =>

Blog =>


It might be late for this but I hope it helps someone in the future.

I have successful merged the Agency Theme with the Clean Blog theme. You can find it here.

You can see it in action at my personal sitehere.

So I know this is a long way away from this post but I’m curious how you tied the blog and website together. I will be doing the same thing shortly.

my blog is at I will be incorporating a business website with a link to the blog.