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:
- Itās tiny but very extensible through shell scripts.
- Its Amber templating is simple and clean.
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:
- Create a Markdown file with the date in the filename (such as ā2020-07-23-zs.mdā).
- Set the title and subtitle in the YAML header.
- Write the content.
- Rebuild the site with zs (also compile my Sass; I do both at once with a batch script).
- Push to Github, and my site on Netlify automatically updates.
Oh, and I had fun finding programming jokes for my mascot owl in the siteās header section.