How I built this blog

An exploration of minimalism and programming jokes

July 23, 2020 Ā· Felipe Vogel Ā·

NOTE: Youā€™re reading this on a more recent iteration of my blog. This post refers to the first version from 2020.

Of all the grand plans that a fledgling developer inevitably dreams up and expands to impossible proportions, the most urgent is (thankfully) the least impossible: to make a blog.

The humble blog is the doorway into dreams, the launchpad into the infinity of all the earth-shaking projects soon to be realized. (Thatā€™s how it goes in my imagination, at least.)

So I made this blog, and hereā€™s what I learned.

A minimalist static site generator

When it comes to static site generators, Eleventy seems to be the coolest kid on the block these days. But instead I went with zs, which is even more elegantly minimalist. Also itā€™s more obscure and therefore much more hip.

Hereā€™s what I love about zs:

Hereā€™s a snippet from layout.amber (actually itā€™s nearly the whole thing):

import siteheader
article
    h1 #{title}
    div.posttop-subtitle
        #{subtitle}
    div.posttop-date
        {{ lua .zs\postdate.lua }}
    #{unescaped(content)}
footer
    ul.flexrow.center.wrap
        li.back-to-top
            a[href="#top"]
                i.fas.fa-chevron-up
        li.tweet
            {{ lua .zs\tweetbutton.lua }}

So much zen. title and subtitle come from each postā€™s YAML headers. The Lua scripts are plugins that I wrote: postdate.lua looks at the postā€™s filename to extract the date, and tweetbutton.lua creates a tweet link with the current pageā€™s title and URL.

I wrote another Lua plugin to populate the index page with a list of posts, based on the files in the ā€œpostsā€ folder. (In case you havenā€™t noticed, I love Lua for scripting. Not only is it simple and quick to write, but it has a blazing fast startup time, beaten by only a handful of other languages. Incidentally, the creator of zs also made the luash library for more conveniently using Lua in place of shell scripts. Nice!)

Instead of zsā€™s default GCSS, I went with Sass and learned some of its neat shortcuts: nesting, mixins, and doing math on variables.

The upshot

Most of all, I learned that creating something simple from scratch can be more joyful than creating something more complex in a system that you donā€™t understand.

And now writing a new post is a breeze:

Oh, and I had fun finding programming jokes for my mascot owl in the siteā€™s header section.

šŸ‘‰ Newer: Track your reading with read.csv šŸ‘ˆ Older: Make a custom todo.txt for VS Code šŸš€ Back to top