Study Guides | | Am I viewing localhost?

Study Guide: Am I viewing localhost?

When working locally, it’s easy to get confused while switching quickly between development and production views of your site. All that’s really needed is a glance at the URL, but errors slip in when you think you’re looking at the development version, and don’t notice that you’re not.

In Hugo, one quick way to avoid the mixup is to add alternate css for the builtin local development server. This is easy to do because Hugo sets the builtin variable hugo.IsServer to “true” whenever the site is served by the builtin development server.

Directions

Add the following CSS to the head section of the appropriate template file, typically something like /templates/partials/head.css.

{{- if hugo.IsServer -}}
<style>
  body {
    background-color: #d3d3d3;
  }
</style>
{{- end -}}

Depending on your design, the above CSS can make the pages too ugly to work with. I usually prefer to add a thin colored line at the top, and leave the rest of the design untouched. For good measure, it can’t hurt to throw a colored border across the bottom of the page.

{{- if hugo.IsServer -}}
<style>
  body {
    border-top: 3px solid red;
    border-bottom: 3px solid red;
  }
</style>
{{- end -}}