Nesting Hugo Blog in Hugo Site

Written on May 15, 2018

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

Enabling AMP

AMP is actually the easy part, just include an AMP enabled theme. I went for the hugo solit theme.

Site Structure

I have the following file structure:

├── blog
│   ├── config.toml
│   ├── content
│   │   └── posts
│   │       ├── post1.md
│   │       └── post2.md
│   └── themes
└── mainsite

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 config.toml file.

The config.toml file

Here are the changes you should make:

baseURL = "https://amitsealami.github.io/blog/"
publishDir = "../public/blog"

You need to use the absolute URL in baseURL, because sitemap.xml needs absolute URLs of your blog contents. publishDir will ensure that when you type hugo in blog folder, the rendered site will be put in the parent, mainsite’s public/blog folder.

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 mainsite.

Deploying

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.