Nesting Hugo Blog in Hugo Site
Here is the scenario: I wanted to include a blog in this website. That is, the blog http://amitsealami.github.io/blog will be in http://amitsealami.github.io. However, there were a few things I wanted to achieve with it:
- The sites will be using different themes, configurations. In short, the parent and blog site will be separately handled.
- The blog should be AMP enabled
- The blog should have its own sitemap.xml file which won’t be interfering with the original site’s sitemap.xml
AMP is actually the easy part, just include an AMP enabled theme. I went for the hugo solit theme.
I have the following file structure:
As you probably realized, the blog does not have any noticable difference from a regular hugo site. And you are absolutely right. There is not any. All the magic takes place in the
The config.toml file
Here are the changes you should make:
You need to use the absolute URL in
sitemap.xml needs absolute URLs of your blog contents.
publishDir will ensure that when you type
blog folder, the rendered site will be put in the parent, mainsite’s
Running the site
One thing I noticed is that if you run
hugo server under
mainsite, it will not allow you to view the contents of blog which are placed under
public/blog/. This is expected. To view the contents of the blog, you need to go to the
blog folder separately and run
hugo server from there. To check the contents of the mainsite, you need to run
hugo server separately from
To prepare the site, you need to run
hugo from both
mainsite and from
blog respectively. After that, deploy the whole
public folder from
mainsite together as usual. Nothing else will be necessary.