Making My Own Theme

...saying that is a bit of a stretch

hugo
hugo / bootstrap / blog

So the theme i used until now was Blackburn, it was nice, but the background was just too white for me.

Now you might say that i should just override the theme’s CSS and be done with it, but I don’t have that kind of aesthetic sense.

I really should have.

But here I am, with a new template, that I built, almost from scratch, so let’s see what I learned in the past few days.

Not much hand-holding

Hugo’s new theme command is nice, but if you don’t know how what’s the difference between a list and a single content page, you are gonna be confused.

The default scaffold it gives you looks like this:

your-theme
|- archetypes
|  `- default.md
|- layouts
|  |- _default
|  |  |- list.html
|  |  `- single.html
|  |- partials
|  |  |- footer.html
|  |  `- header.html
|  |- 404.html
|  `- index.html
|- static
|  |- css // empty folder
|  `- js  // empty folder
|- LICENSE.md // preloaded with the MIT license
`- theme.toml

Looks fine right? It gives me the wrong impression tough.

My biggest gripe is with the partials folder, it gives you the impression that everything before your content and everything after your content has to be in header.html and footer.html respectively.

While this was right a few versions ago, it’s not the case anymore. We have base templates and blocks

I would really recommend just adding your-theme/layouts/_default/baseof.html right off the bat, if you want a starting point here’s the baseof.html I ended up with:

<!DOCTYPE html>
<html lang="en">
  <head>
    {{ partial "head" . }}
    {{ partial "title" . }}
  </head>
  <body>
    {{ block "header" . }}
      {{ partial "nav" . }}
    {{ end }}
    <main role="main">
      {{ block "main" . }}
      {{ end }}
    </main>
    <footer>
      {{ block "footer" . }}
        {{ partial "footer" . }}
      {{ end }}
    </footer>

    {{ partial "javascript" . }}
    {{ template "_internal/google_analytics_async.html" . }}
  </body>
</html>

Hugo’s templating engine is awesome

If you know how it works

Honestly this is the thing that took away most of my time. I would recommend going trough Hugo’s Docs, that being said the Create a theme (wayback link) doesn’t seem that helpful.

Becsuse it isn’t. It’s not even recommending that you read about templating, template lookup order, base template and blocks

You need to read the entire doc end to end at least once, so that when you are creating your theme you can start looking up stuff as you go, at least now you know they exist.

Here is my list of must understands:

Bootstrap 4 is still awesome

For some reason i tought that more would have changed between v3 and v4 of bootstrap, the biggest change I noticed were the spacing utilities, they’re nice to have.

Maybe I’m not enough of a power user

Conclusion

Just because it looks easy it doesn’t mean it is easy. You’d think 4 years of professional software development would’ve taught me that

I closed the tabs already, but there were only about 25.

My Experience With Tracking by $index
Dotfiles