# Distinguish production from development

**URL:** <https://discourse.gohugo.io/t/distinguish-production-from-development/2855>\
**Category:** support\
**Created:** [March 6, 2016, 5:27pm UTC](https://discourse.gohugo.io/t/distinguish-production-from-development/2855 "2016-03-06T17:27:45Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![fale](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/fale/32/112_2.png) [@fale](https://discourse.gohugo.io/u/fale)\
**Post date:** [March 6, 2016, 5:27pm UTC](https://discourse.gohugo.io/t/distinguish-production-from-development/2855/1 "2016-03-06T17:27:45Z")

</div>

I’d like to include a partial (google analytics) only for production environment and not on the test environment (because it alters completely the statistics). How can I do so?

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [March 6, 2016, 5:44pm UTC](https://discourse.gohugo.io/t/distinguish-production-from-development/2855/2 "2016-03-06T17:44:05Z")

</div>

This is how I do it:

> <https://github.com/bep/bepsays.com/blob/master/layouts/partials/head_master.html#L70>

Not perfect, as it depends on always running with -D when in dev, but I have a startup script in dev that I always use, so it works for me.

---

<div class="post-metadata">

**Author:** ![fale](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/fale/32/112_2.png) [@fale](https://discourse.gohugo.io/u/fale)\
**Post date:** [March 6, 2016, 5:58pm UTC](https://discourse.gohugo.io/t/distinguish-production-from-development/2855/3 "2016-03-06T17:58:13Z")

</div>

Thanks 🙂 it’s a nice way

---

<div class="post-metadata">

**Author:** ![rdwatters](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rdwatters/32/2848_2.png) [@rdwatters](https://discourse.gohugo.io/u/rdwatters)\
**Post date:** [March 6, 2016, 7:12pm UTC](https://discourse.gohugo.io/t/distinguish-production-from-development/2855/4 "2016-03-06T19:12:30Z")

</div>

@fale

If you want to use a purely js-based approach, this is what I’m currently working with:

```javascript
<!--layouts/partials/google_analytics.html-->
<script>
(function() {
  if (window.location.hostname === "localhost") {
  	console.log("Local dev, so no Google Analytics.");
    return;
  } else {
    (function(i, s, o, g, r, a, m) {
      i['GoogleAnalyticsObject'] = r;
      i[r] = i[r] || function() {
        (i[r].q = i[r].q || []).push(arguments)
      }, i[r].l = 1 * new Date();
      a = s.createElement(o),
        m = s.getElementsByTagName(o)[0];
      a.async = 1;
      a.src = g;
      m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-URGAHERE-1', 'auto');
    ga('send', 'pageview');
  }
})();
</script>

```

Although @bep, I find it interesting that this works because I didn’t need to tweak it in order for the js to run. That is, it’s been a bit since I wrote this and have learned much about Hugo since…and I’m curious as to why everything in the script tag isn’t scrubbed out by Hugo.

---

<div class="post-metadata">

**Author:** ![inwardmovement](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/inwardmovement/32/5396_2.png) [@inwardmovement](https://discourse.gohugo.io/u/inwardmovement)\
**Post date:** [February 23, 2018, 7:28pm UTC](https://discourse.gohugo.io/t/distinguish-production-from-development/2855/5 "2018-02-23T19:28:32Z")

</div>

Thanks @bep for [this workaround](https://discourse.gohugo.io/t/distinguish-production-from-development/2855/2?u=inwardmovement). Could Hugo provide a proper way of conditionally switching between dev and production in templates someday?

A dedicated build option would be better than depending on `-D`, at least.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [February 23, 2018, 7:30pm UTC](https://discourse.gohugo.io/t/distinguish-production-from-development/2855/6 "2018-02-23T19:30:14Z")

</div>

> [@inwardmovement](#):
>
> A dedicated build option would be better than depending on -D, at least.

Maybe, but you can also be inspired by how the Hugo docs site does it. Look in the base template there.

---

<div class="post-metadata">

**Author:** ![sjardim](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sjardim/32/5361_2.png) [@sjardim](https://discourse.gohugo.io/u/sjardim)\
**Post date:** [February 23, 2018, 8:08pm UTC](https://discourse.gohugo.io/t/distinguish-production-from-development/2855/7 "2018-02-23T20:08:19Z")

</div>

I do it on Netlify by using Environment Variables.

```
{{ if eq (getenv "HUGO_ENV") "production" }}
  ... code
 {{ end }}
```

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [February 23, 2018, 8:48pm UTC](https://discourse.gohugo.io/t/distinguish-production-from-development/2855/8 "2018-02-23T20:48:26Z")

</div>

Yes, that construction is great. That way you can set

```auto
env = "something"

```

In config.toml and override it in OS env.

---

<div class="post-metadata">

**Author:** ![inwardmovement](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/inwardmovement/32/5396_2.png) [@inwardmovement](https://discourse.gohugo.io/u/inwardmovement)\
**Post date:** [February 27, 2018, 10:31am UTC](https://discourse.gohugo.io/t/distinguish-production-from-development/2855/9 "2018-02-27T10:31:05Z")

</div>

> [@sjardim](#):
>
> ```
> {{ if eq (getenv "HUGO_ENV") "production" }}
> ...
> {{ end }}
> 
> ```

Indeed that works perfectly and seems the good way, thanks!

But I can’t manage to set an environment variable in config.yml, didn’t find [Configure with Environment Variables](https://gohugo.io/getting-started/configuration/#configure-with-environment-variables) useful, can you help on this @bep?  
I tried `env: something`, `env: key=value` and

```
env:
 key: value

```

---

<div class="post-metadata">

**Author:** ![leandro](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/leandro/32/3399_2.png) [@leandro](https://discourse.gohugo.io/u/leandro)\
**Post date:** [September 26, 2018, 8:16pm UTC](https://discourse.gohugo.io/t/distinguish-production-from-development/2855/10 "2018-09-26T20:16:12Z")

</div>

I was looking for a solution to the same problem and I had an idea that work for me:

```
{{ $isDevelopment := false }}

{{- if in (string .Site.BaseURL) "localhost" -}}
    {{ $isDevelopment = true }}
{{- end -}}

```

Note: This solution will not work if you are running the `hugo server` command with the flag `--bind [YOUR_IP_ADDRESS]`

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [September 27, 2018, 3:21am UTC](https://discourse.gohugo.io/t/distinguish-production-from-development/2855/11 "2018-09-27T03:21:22Z")

</div>

To piggyback off of @rdwatters solution, this will disable Google Analytics even if hostname is not `localhost` by looking for the `livereload.js` script:

```auto
<script>
  (function () {
    var scripts = document.getElementsByTagName("script");

    for (i = 0; i < scripts.length; i++) {
      if (scripts[i].outerHTML.includes("livereload.js")) {
        console.log("Development environment detected, Google Analytics disabled");
        return;
      }
    }

    (function (i, s, o, g, r, a, m) {
      i['GoogleAnalyticsObject'] = r;
      i[r] = i[r] || function () {
        (i[r].q = i[r].q || []).push(arguments)
      }, i[r].l = 1 * new Date();
      a = s.createElement(o),
        m = s.getElementsByTagName(o)[0];
      a.async = 1;
      a.src = g;
      m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-XXXXX-Y', 'auto');
    ga('send', 'pageview');
  })();
</script>

```

_Edit: made syntax more terse_

---

<div class="post-metadata">

**Author:** ![leandro](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/leandro/32/3399_2.png) [@leandro](https://discourse.gohugo.io/u/leandro)\
**Post date:** [September 27, 2018, 4:22pm UTC](https://discourse.gohugo.io/t/distinguish-production-from-development/2855/12 "2018-09-27T16:22:31Z")

</div>

I discovered a simpler way, using only the variable `.Site.IsServer`

```
{{ if .Site.IsServer }}
  do something
{{ end }}
```

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [September 27, 2018, 8:27pm UTC](https://discourse.gohugo.io/t/distinguish-production-from-development/2855/13 "2018-09-27T20:27:39Z")

</div>

Thanks for the tip @leandro, now I’ve updated my google analytics partial to be

```auto
{{ if not .Site.IsServer }}
  {{ with .Site.Params.googleanalytics }}
  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  
  ga('create', '{{ . }}', 'auto');
  ga('send', 'pageview');
  </script>
  {{ end }}
{{ end }}

```

---

<div class="post-metadata">

**Author:** ![rdwatters](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rdwatters/32/2848_2.png) [@rdwatters](https://discourse.gohugo.io/u/rdwatters)\
**Post date:** [September 27, 2018, 9:25pm UTC](https://discourse.gohugo.io/t/distinguish-production-from-development/2855/14 "2018-09-27T21:25:34Z")

</div>

This is a better solution than what I proposed above, @zwbetz, since it was well before the `.IsServer` method was part of Hugo 🙂

---

<div class="post-metadata">

**Author:** ![deathbaba](https://avatars.discourse-cdn.com/v4/letter/d/ed655f/32.png) [@deathbaba](https://discourse.gohugo.io/u/deathbaba)\
**Post date:** [May 17, 2019, 7:05pm UTC](https://discourse.gohugo.io/t/distinguish-production-from-development/2855/15 "2019-05-17T19:05:21Z")

</div>

Since version 0.53 the following code works perfectly:

```
{{ if eq hugo.Environment "production" }}
<yourhtml />
{{ end }}
```

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [June 8, 2020, 8:00pm UTC](https://discourse.gohugo.io/t/distinguish-production-from-development/2855/16 "2020-06-08T20:00:53Z")

</div>

> [@deathbaba](#):
>
> ```auto
> {{ if eq hugo.Environment "production" }}
> <yourhtml />
> {{ end }}
> 
> ```

Now you can even do:

```auto
{{ if hugo.IsProduction }}
<yourhtml />
{{ end }}

```