What does setting HUGO_ENV to "production" do?

[jrwrigh]

Sub-questions:

1. What are the other “options” (if any)?
2. How does setting this differ from whatever the other “options” are?
3. Did I miss where this is actually documented?

[bep]

Earlier it was just a convention that you used in your templates. But we formalised it some time ago.

I’ll admit when looking for it now, we should do a better job with the docs.

But in general:

• running hugo server sets environment to development
• running hugo sets environment to production
• set it via flag: hugo --environment foo
• you can also set these with OS env variables HUGO_ENVIRONMENT or HUGO_ENV

These are used to pick the right configuration.

You can also use them in your template:

{{ hugo.Environment }}
{{ if hugo.IsProduction
//
{{ end }}

[bep]

An example from the latest release notes:

{{ $css := resources.Get "css/main.css" }}
{{ $css = $css | resources.PostCSS }}
{{ if hugo.IsProduction }}
{{ $css = $css | minify | fingerprint | resources.PostProcess }}
{{ end }}
<link href="{{ $css.RelPermalink }}" rel="stylesheet" />

[jrwrigh]

Thanks for the clarification!

[bluebrown]

Its also useful if you have more tooling in your toolchain. Using a production flag is a common pattern.

If you use postcss for example, which needs node for the build process, you can get use the flag to do some conditional build steps

Look at this postcss config for example

module.exports = {
    plugins: [
        require('precss'),
        require('tailwindcss'),
        require('autoprefixer'),
        ...process.env.HUGO_ENVIRONMENT === 'production'
        ? [purgecss]
        : []
    ]
}

it can be used with the build pipeline

{{ $css := resources.Get . }}
{{ $styles := $css | resources.PostCSS }}
<link rel="stylesheet" href="{{ $styles.Permalink }}">

If you would now build your project with the production flag, postcss would transpile the css file to a slim production version.