Debazeling the blog

Ryan Lopopolo

As of this post’s publishing, the most recent post on the livestream reads:

Recently I’ve been on the “I should write a blog post” to “spend 2 hours updating dependencies across 4 language ecosystems in my blog’s Bazel monorepo” pipeline. I should still write that blog post though #hypstatic #bazel

In early 2022, I converted this site’s build system from its previous iteration, a hand-spun and ad hoc static site generator written in JavaScript which compiled in multiple passes, to Bazel to learn how to be productive with the build system since it was a significant chunk of my org’s focus at Brex.

Right before I tore it down, the git repo this blog lives in was more than 25% Starlark!!! I certainly did not do the simplest thing that could possibly work.

Breakdown of source files in the git repository by language, showing 43.4% Go, 26.1% Starlark, 12.2% JavaScript, 11.9% HTML, 3.6% Python, 1.7% Rust, and 1.1% SCSS.

History

hyperbo.la’s past is littered with different builds of the site. From oldest to newest:

RenderingDatabaseInfraFailure
WordPressMySQLhttpd, mod_php, dyndns.orgHacked
Django, handspun CSSSQLitehttpd, mod_python, dyndns.orgrm -rf’d the DB
Django, BootstrapMySQLA single linode, httpd, mod_python, mod_wsgi, nginx, gunicorn, ad hoc shell scriptsboredom, desire to automate
Django, BootstrapAurora MySQL and clustered Elasticache, then multi-AZ MySQL RDS with DB-backed cachingALB, S3, Terraform, Packer, Ansible, spot instanceshigh cost
Webpack-driven SSG, BootstrapYAML and markdownGitHub Pages, GitHub Actionspage count started crashing Webpack
Custom JS SSG, BootstrapYAML and markdownGitHub Pages, GitHub Actionsdependency hell
A largely golang dev server and SSG compiler, Bootstrap via rules_sass and a custom BUILD.bazel for the Bootstrap repoYAML and markdownBazel, GitHub Pages, GitHub ActionsBazel ecosystem moves too quickly, things were constantly breaking and I needed to keep on top of rules upgrades
Vite, Tailwind CSSYAML and MarkdownGitHub Pages, GitHub ActionsTBD

Why this version is good

Well for one all of the code here is only there to support rendering HTML and there is very little of that code.

Breakdown of source files in the git repository by language, showing 44.5% HTML, 31.6% Go, 23.0% JavaScript, and 0.9% SCSS.

Using modern frontend technologies made switching to Tailwind CSS a couple of hours of work vs. what would have been days. It feels nice to have modern typography, a comfier layout, and to support light/dark mode and also maintain the core app shell and branding.

This is what the blog index page looked like before cutting over to Tailwind, which is essentially the way the site looked for 10 years:

Screenshot of https://hyperbo.la/w/ blog index page showing cards of recent blog posts in the classic hyperbo.la style.

And after the cutover:

Screenshot of https://hyperbo.la/w/ blog index page showing cards of recent blog posts in the Tailwind CSS hyperbo.la style.

Why is this new version bad

I still don’t write. Prior to authoring this post, the last updates on both the blog and the livestream were 2 years before debazeling.