Optimizing a lightweight hugo powered website

Table of contents

What does it mean to be “lightweight”

I remember coming across bettermotherfuckingwebsite.com and knew that this was where I had to copy the css from. Only being 7 declarations, it made for an easy basis for the global css.

assets/site.css

body{
  margin: 40px auto;
  max-width: 650px;
  line-height: 1.6;
  font-size: 18px;
  color: #1d1d1d;
  padding: 0 10px
}
h1,h2,h3{
  line-height: 1.2
}

Expanding on the basics

.chroma,.codeblock-label {
    font-family: monospace;
    background-color: #efefef;
    font-size: 14px;
    margin: 0 -0.5rem;
    padding: 0.5rem;
}

I will go ahead and add just a tad more, as I like to post some code snippets within my writing. This bit here just lets the text ‘breathe’ some without messing up the typographic line start.

.codeblock-label {
    border-bottom: 1px solid #bbb;
    margin-bottom: 0;
    font-weight: bold
}

Using .codeblock-label I’m able to provide further context to the code snippets, for example a filename can be embedded as html directly into the markdown for the article.

~/evans-secret-diary.md

<p class="codeblock-label" tabindex="0">~/evans-secret-diary.md</p>

External links

a[target="_blank"]:not([href*="okt.wtf"])::after
{
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  margin-left: 0.2rem;
  background-image: url("data:image/svg+xml,%3C...");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

Combining this little css snippet to embed a svg graphic after links that are opening in a new tab with hugo’s shortcodes.

layouts/shortcodes/el.html

<a href="{{ index .Params 1 }}" target="_blank">{{ index .Params 0 }}</a>

Using this shortcode I can embed links into my article’s markdown that tarket _blank. See how over at the official shortcode template documentation . Using this I can still put links to pages like about, and they won’t get the little indicator.

Syntax highlighting

Next up was generating some syntax highlighting css so I can get that linked in for some fancy colors.

$ hugo gen chromastyles --style=trac > assets/syntax.css

Mix and minify

Now that we have hacker style syntax highlighing this blog has all the credit it needs.

layouts/partials/head.html

{{ $syntax := resources.Get "syntax.css" }}
{{ $site := resources.Get "site.css" }}
{{ $style := slice $syntax $site |
            resources.Concat "styles.css" |
            resources.Minify |
            resources.Fingerprint }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">

Link it up in the head and we can get back to authoring some content.

All that fancy css comes in at a whopping 2.84 KB. Also the big thing so far is the entire website functions and reads perfectly fine not only without css loaded… but get this: no javascript.

My blog’s code lives here ~okt/okt.srht.site