Static Site Generator

Chilling at home with a surprising moment of wtf do I do. I latently watch these indiewebs and I am always delighted to see these small, quirky and creative sites. So I thought I should do one of my own.

As a rite of passage, I've implemented my own static site generator. It's written in python, I tried to avoid getting help with the code. That means no Jinja, no BeautifulSoup and no Lark or Pandoc. Of course, I don't want to use any existing systems I like such as Pelican.

I don't have such issues with related tooling, I am using click, pytest and hatch.

So this script accepts a butchered version of markdown on one end, outputs this site on the other.

Finite state automatons

It works based on a couple finite state automatons and it was surprisingly easy to put together. Finite state automatons are great for parsing regular languages, but I don't want to get to the hardcore theory as there are more capable folks of explaining it (e.g. Wikipedia).

Basically, you are processing these files line by line or character by character. Then you'll notice - oh yea, random text this is a paragraph, I am within a paragraph. Change my state to paragraph, take a look at the next line. Next line, since I am in a paragraph state, I'll accept this line and add it to the bunch. Next line, what's this? It's empty. Guess I stop being in a paragraph state.

I am surprised how "not-fun" explaining this is. It's a lot of busywork and spaghetti code. But I am happy with the result.

Features

This list will be updated as I realize I need more and more features to write my musings. Right now we got:

  • lists (ba-dum-ts)
    • nested too!
  • code (both single quotes and triple quotes.. no indent though)
  • links (only full [bla](https://bla.com))
  • paragraphs
  • headers
  • bolds, italics, bold italics
  • jekyll style yaml metadata
---
title: Static Site Generator
date: 07-08-2024
slug: hgsg
---
  • images

See - take a look at this hario Hario

Visuals

I am not a visual person. But plain HTML doesn't appeal to me either. So I've picked basic bulma CSS. The container element is great, because it automatically applies good practices to plain elements within it, so I don't need to think about much when parsing and rendering.

I might play with the colors later.

Hosting

So I was thinking how to get this online for free. First step was kinda easy, let's avoid the big git players and let's checkout codeberg. I dig it, let's-a-go - repo.

There are the big players like Netlify, Vercel or GitHub pages. Since I am going quirky, I try to avoid them.

I've checked out Surge.sh. It's dead simple once you have npm, but you won't be able to get custom domain with https for free. Static.app has similar issues.

I tried to go with Digital Ocean Static option. I know, not exactly a small site, but I wanted to give it a shot. However, you are kinda out of luck if you don't have GitHub or GitLab. And no, I don't want to send it to docker nor create my own DigitalOcean registry.

I thought about Neocities - but I already have my domain and they won't let me use it. $5 per month for what? I still like the project though, might pay them later.

And then I finally noticed, that codeberg has their own pages feature. So here we are.

Git

Another feature is the ability to automatically push changes from CLI. It's not exactly working and you can easily shoot yourself in the foot. I commited some weird paths (like . or ../pages/) and I "crashed" codeberg as they started returning 500 on my repo. Whoopsie.

Anyway, check for diffs, modify some paths and the build command is ready.

See ya next time.