Static Site Generators
So my current fascination is static site generators—programs that you can feed, for example, a set of plain-text blog files, and have them rendered into a folder full of “static” HTML files that can be deployed directly to a webserver with no “moving parts.”
Websites made of static files are nice, both because those files are very easy to cache for a significant speed up at load time, and because the number of places security holes could be hiding is greatly reduced. This blog uses an SSG called Eleventy.js.
# Why don’t you just use ______?
I didn’t want to use a standard blog platform for a couple of reasons: first, hosting it myself gives me ultimate control of the content I produce, forever. I’m not interested in having someone else monetize my work with ads or paywalls. I don’t need the extra features those platforms would present to me—I’m not worried about SEO or growing my readership; I have ADHD, and if I’m honest with myself, I’m not sure this attempt at a blog will last any longer than the previous ones.
Second, I like making things myself, even when I’m kinda sorta reinventing the wheel. It may take more time, but I always give familiar skills a good stretch, and I almost always learn something new. I find the process kinda, like… meditative, and fulfilling, and I love how what I produce at the end fits me and my process like a glove. Being able to write in Markdown in vim and save my entire site in a self-hosted Git repository feels extremely comfy to me.
And finally third, which is sort of a fusion of the previous two: doing it myself lets me experiment much more easily. Adding a light/dark mode switch like the one in the top right corner to a standard-issue blog template would have taken me a lot more work. But since I designed this entire site from scratch, it only took me a handful of lines of code that go right where I want to put them. And all the little icons around the site—it was fun playing around with CSS shapes again, instead of just slapping down SVGs or PNGs or whatever.
# My Setup
The best description of my setup would be the actual code since it’s bound to evolve at least somewhat from anything I could write here. I’ll go over some of the trickier bits here though.
The cleanest way I found to set a default page template in Eleventy.js was to
create a file at globals/layout.js which masks what would otherwise have been
generated by the system up to that point. At time of writing, it’s pretty
short, just one line:
module.exports = "post.njk";
post.njk is the layout template file for the page for an individual post.
The same goes for the default page titles inside globals/eleventyComputed.json:
{
"pageTitle": "{{ title | safe }} – {{ metadata.title | safe }}"
}
Figuring out the most optimal way to set up the history pages took a little
doing. What I’ve settled on for now is putting them under /archive/ with
/archive/1/ being blurbs from the first five posts (once I’ve written that
many, of course).
I haven’t actually made the little heart-shaped “Like Post” button at the
bottom work yet, but the current plan is to make a little script that logs the
post’s title to a text file and returns a 204, then when I want to get like
counts I can just do sort likes.txt | uniq -c. No funky injectable
databases—if there’s spam, I can just delete the lines from the file and
maybe insert a little check to drop entries if there are any obvious patterns.
That’s it for now, I guess? See ya 