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.