⭐️ Using hugo environments with Netlify
I’m using Hugo for my blog and I wanted to find a way in which I can view drafts while developing, but hide them on the deployed site.
hugo has a mechanism for that. It is a combination of features.
First you need to set up a config directory instead of only a config file like
config.toml. The docs hugo docs give you a good overview of what to do. I choose a very simple setup for now:
config ├── _default │ └── config.toml └── development └── config.toml
I just copied my already used
config.toml file into the
config/_defaults folder which acts as a base for all environment. You can then overwrite settings in environments you use. I created a
development folder because this is the environment which gets used when you use the
hugo server command. In this file I just overwrite the
buildDrafts setting which looks like this:
buildDrafts = true
I develop my site with the Netlify CLI using the
netlify dev command. Which works great out of the box with the standard setup. But once I switched to the new setup it didn’t detect my site as a hugo one.
So I also needed to overwrite the
netlify.toml by adding this:
[dev] command = "hugo server -w" port = 8888 targetPort = 1313 publish = "dist"
targetPort is needed because
hugo server starts the sever per default on port
1313 and the Netlify CLI proxies to that port.
It works great but maybe the detection of the Netlify CLI can be improved in the future.
Maybe I can also add other environments in the future like using the same approach for branch deploys with Netlify which should be as easy as adding a
config/staging folder and a new
config.toml file with the settings to be overwritten. After that I only would need to change the
netlify.toml like this:
[context.branch-deploy] command = "hugo --gc --minify -b $DEPLOY_PRIME_URL --environment staging"
The important part is
But let’s see if I will need that. I’ll let you know in another post. 😉