(Minimalist) Material Design template for Hugo using Amber

I am about to have a few months ahead of me that I want to use to think, make things and share.

Working at Google can be quite frustrating in that we have ton of really advanced technologies and tools coupled with almost unlimited computing power but that also brings in the picture really specific technology stacks that we cannot use externally — we can only hope the general knowledge of them can help us deal with the outside world. Because I am highly familiar with Borg for instance Kubernetes is a no-brainer for me, there are other examples like that but not as many as I would like there to be.

When I decided to write a blog, I wanted to use a static website
generator that I could put anywhere, preferably on Github pages directly.

A static website has a number of advantages over dynamic and self-hosted ones:

• They are blazingly fast
• They work well for blog-type websites
• They are more easily secured. Not that I really need it here but that’s
  always something I’ll take and care about.
• They can usually be written in markdown or other wiki-style scripts that I’ve gotten quite used to at work thanks to writing abundant documentation.

I remembered coming across Hugo while looking at Go libraries online so I gave it a shot.

I could have gone with a ready-made template (there are hundreds of them), but the goal was for me to build stuff.
So I went on to the Hugo documentation and came across amber templates which are one of the most beautiful thing I’ve seen in a while.

Amber templates

They allow you to write html as it should have been from the start… They make html great and fun again, and that’s no small deed.

Take this simple blog article example template:

can be rendered as

You can look at the base.amber template if you want but this snippet should be enough to convey the simplicity of the template engine syntax.

Every tag gets closed automatically as per its indentation and content.

You can assign attributes to tag in a map-assignment like syntax

[attr=”value”]

set class names using a natural dot syntax:

section.main-section

and access template rendering arguments using the

#{.}

syntax familiar to all Gophers.

This is simply grandiose and also apparently based on HAML and Jade which I didn’t know about until now.

It also solves an issue I had with the default Go templates for Hugo: the generated html is ugly as hell…. In fact I thought of making a Hugo plugin to prettify the output so that I could look at the generated source code of my website without having my eyes bleeding… The fact that Amber forces indentation of tags like Python makes the generated html prettier by default so no need for a plugin, I can use my time for something else :-)

Material design

Google’s Material Design Lite is a set of CSS and javascript files that (dixit the official site):

lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible.

I couldn’t find any existing theme with Material Design + Amber templates on the Hugo themes list so I thought this would be a good learning experience. To use the material design library, just include the right css and javascript files in your templates header:

So why medium?

Feels weird to explain how great this all static website thing is but writing about it on Medium no? Yes and no. As a matter of fact I first published this article on Github pages and started serving it via a custom domain I bought but I wasn’t very happy about a few things:

• Github pages do not support custom domains over HTTPS :-(
• Hugo was creating a bunch of pages stubs for me which I didn’t care about (tags mostly)
• I had to manage lots of different git repositories as I was writing the articles, updating the theme, making sure it worked with the default example website to show it nicely on Hugo themes (I never ended up adding it there btw because I didn’t like the navigation/structure imposed upon me), too many chances to shoot myself in the foot, I didn’t like it.

I will continue to use Github pages to host one-off pages, demos, etc but Medium is where I’ll try to focus my thoughts, try to share with the world in a structured, polished and hopefully useful way.

You can still find the source of the theme I created originally on Github, considering how scarce the documentation is for amber templates + Hugo (the only documentation is how to use includes really…) I hope it can be quite useful, when I find time I’ll send a PR to the Hugo docs with what I learned.