Separate Development Config From Production Config in Hugo

At this time I’ve come to the point where I will need to separate my development config from my production config. Mostly because the webpage reloads about a million times when I tinker with it, and tracking analytics for that would be counterproductive.

My go to for this was Configure Hugo: Configuration Directory. Well, actually. It was Google, but hey. Who’s counting. This has what seems to be a pretty simple way to solve my trouble.

By putting all the common configuration in a config/_default folder we can put development (hugo server) specific config in a config/development folder and production (hugo) specific config in config/production.

Steps to split my config file into dev and prod

1. Create a config folder in the bottom of the site structure, together with the content and static folders, right where the config.toml file already lives.
2. Inside the config folder, create two new folders: _default and production.
3. Move your config.toml file into the _default folder and create a new file in the production folder bearing the same name.
4. Cut and paste parts of the _default/config.toml file into production/config.toml
5. In case there are bits of the devlopment configuration that shouldn’t show up in production, might want to create a file development/config.toml for that part

Things I found out while working

• The config parameter baseURL should be your domain in production, but just / in development. This made my CSS not show up: baseURL = '/' vs baseURL = 'https://your.domain.here/'

Tips to separate your site configurations visually

I’ve put the text for my home link in the config. That way it can say home in production and development when running locally.