How to serve different files depending on environment

I’m not sure if this is an environment or config related question. Perhaps it’s just a template question.

I would like to use certain JS files during development. Before I deploy, I want to minify these files and test them locally. How would I go about doing this?

Example:

{{if .Site.IsServer}}
  <script src="/js/navigation.js"></script>
  <script src="/js/smoothscrolling.js"></script>
  <script src="/js/autocomplete.js"></script>
  <script src="/js/search.js"></script>
{{else if in prod env <-- not sure what to put here}}
  <script src="/js/navigation.min.js"></script>
  <script src="/js/smoothscrolling.min.js"></script>
  <script src="/js/autocomplete.min.js"></script>
  <script src="/js/search.min.js"></script>
{{end}}

In Hugo 0.53 we introduced a concept of environments and config dirs per environment (I/we have been a little lazy in the docs department, it’s been Christmas).

But for your particular use case, I think it’s common to use a simple if/else:

{{if .Site.IsServer}}
// do development stuff
{{ else }}
// do production stuff
{{ end }}

In 0.53 terms, the above would translate to:

{{if hugo.Environment | eq "development" }}
// do development stuff
{{ else }}
// do production stuff
{{ end }}

Or maybe even:

{{if hugo.Environment | eq "development" }}
// do development stuff
{{ end }}
{{if hugo.Environment | eq "production" }}
// do production stuff
{{ end }}
2 Likes

Thanks for this. To follow up, how do I specify dev or prod mode?

It has sensible defaults (server = development), but you can do:

hugo --environment=mycustomenvironment

If you follow the links in https://gohugo.io/news/0.53-relnotes/ there are some more info.

1 Like