Hugo and HTML comments

I found joy again in blogging with Hugo.

I think it’s a fantastic framework with powerful templating features thanks to html/template and text/template libraries (written in Go like Hugo, hence the “go” in Hugo).

Nothing is perfect, though, even Hugo. For example, Hugo strips all HTML comments by default.

Who cares about HTML comments anyway?

I do. Whether it’s for debugging purposes or making the code more readable, HTML comments are useful (not saying there are no other usages, but these are the most popular).

It’s excellent to isolate problems and temporarily disable sections. While you still can isolate things this way with Hugo, it seems any markup wrapped with HTML comments disappears. I find it less transparent.

Moreover, HTML comments are not only useful for debugging or code presentation, but they’re also essential for conditional comments:

<!--[if lt IE 9]> <p>Your browser is lower than IE9</p> <![endif]-->  

This way, you can also load styles and scripts only for specific browsers.

It could be a nasty side effect when porting a theme from another web galaxy or just making your theme for your next project.

But you can use HTML comments

Fortunately, there are workarounds, for example:

{{ "<!--[if lt IE 9]>" | safeHTML }}
<p>Your browser is lower than IE9</p>
{{ "<![endif]-->" | safeHTML }}

HTML comments do not silence build errors

You might deduce weird usages from Hugo’s default behavior with HTML comments.

It’s not like you can wrap everything with HTML comments and hope it will silence code. It won’t:

    <!-- take the {{ $redPill }} -->

If $redPill is not defined, you’ll get an error.