🎈 Abandoning the Static Site

The first version of my website, the site you’re reading this on, was born seven years ago. NodeJS was just released the year prior and I was eager to give it a try. So, I built and released an open-source Node blogging engine—aptly named Simple Blog—which ended up serving as the first true home for my content.

Unfortunately, Simple Blog didn’t last long. I remember it working well but, just a year later, I came across a hot new method for building websites: Static Generation. 🎈☀️ I was immediately convinced that a static site was the best option for me, so I switched. I built and released yet another open-source blogging engine to generate static sites and called it Balloon.

Unlike their dynamic counterparts, static sites don’t require a web server or database. This is because the site is simply a folder of generated HTML (CSS, …) files, allowing them to be hosted on any generic CDN like Surge or Netlify, for free. 🤯

Seriously, how can it get any better than that—a website that requires no maintenance, is extremely fast, and can be hosted for free? Well, like all things that seem too good to be true, there are unforeseen trade-offs lurking in the shadows.

The Pain of Static Sites

Here’s the thing. In the six years of using a static site, I’ve written fewer posts than I did in the single year of using a dynamic site. Why? Because updating static sites is a pain. 🤕 Having to run a local server to preview content makes it difficult to publish updates quickly (especially from mobile devices) and even the slightest change requires re-deployment, resulting in wasted time.

Since then, many technologies have arisen to help ease this pain but none have done an amazing job. Believe me, I’ve tried them all: Hugo, Gatsby, external editors, headless CMSs, GitHub Pages, and Netlify. Some solutions are better than others but they all end up feeling like a huge pile of hacks put together to accomplish what a regular blogging engine provides out of the box—a friction-free and integrated publishing experience. ✨

So I made the decision to ditch my static site (was on Hugo since 2016) and rewrote everything from scratch, one more time. Inspired by the good ol’ days of 2013 I built something very similar to Simple Blog. It’s not open-source this time, as it’s extremely tailored to my needs, but it gets the job done in a similar way.

Allow me to emphasize that point last point: This site is tailored to my needs, which are likely different than someone else’s. If you’re thinking of building something similar, keep that in mind. 💚

Creating the New Site

The new site is a traditional Web 2.0 app. A Go back-end stores blog posts and other content in a Postgres database, and a simple user login system keeps the administrative functions are protected. The whole thing is hosted on DigitalOcean using Dokku and sits behind Cloudflare for DNS and caching, and costs around $10/month—not free, but cheap enough to easily justify.

So what’s it made of?

Here’s an overview of the database schema.

And, here’s the full list of tech involved.

• Go programming language
• blackfriday Go Markdown library
• pongo2 Go library to render HTML pages
• Prisma for Postgres interaction and admin UI
• CodeMirror to act as a Markdown editor
• TailwindCSS for styling web pages
• GitHub Actions for automated deployments
• DigitalOcean droplets and Spaces for hosting
• Dokku for server configuration
• MailJet for newsletter emails
• Cloudflare for DNS and CDN caching

Some of these choices may seem strange or overkill, but they’re the technologies I’m most interested and productive in and that’s all that matters.

In total, it took about a week of evening hacking to get the initial released launched and I’ve already released several updates and improvements in the short time since then. One such update was an email newsletter which, again, is possible with a static site using something like Netlify Functions, but it’s just not the same.

Playing with tech wasn’t the goal of the rewrite, though. The goal was to make writing easier and more enjoyable. The tech doesn’t matter if it didn’t help accomplish the goal. So… did the rewrite actually help get there? 🤔

Crafting a Better Experience

As mentioned, I wanted a more integrated writing and publishing experience, so that’s exactly what I built. At the heart of it all is a side-by-side blog post editor. A CodeMirror instance on the left provides the ability to edit Markdown, while an iFrame on the right displays a live preview of the content. Having the preview is essential because it ensures that whatever gets published won’t contain any unexpected surprises.

It feels weird to praise a feature that’s been possible for decades but, if you think about it, the same real-time editing experience for a static site would be a monumental achievement. Gatsby is trying to do this with Preview but at what cost? How many hoops do you have to jump through to achieve something so basic?

Here’s an example of what I mean. The other day I was browsing a recently-published post on my phone. I spotted a small grammatical error, clicked “edit”, fixed it, and published an update all within seconds. This is an experience that a static site just can’t provide.

Previously, I would have had to go to my computer or log into GitHub on my phone, locate the necessary Markdown file, update it, commit it, then wait for a deploy. This overhead was such a hassle that I would skip these small tweaks altogether.

The rest of the content on the site is also editable. For example, the Projects I’m working on are stored in the database and can be updated via the Prisma Admin interface.

Prisma Admin provides a generic GraphQL Admin UI for the entire database, acting as a great editor for more content that’s not updated often enough to justify creating a custom editor.

A Solid Foundation

At the end of the day, it doesn’t matter whether your website is WordPress, static HTML, or a custom server like the one I’ve described. The only thing that really matters is that it gets out of your way and allows you to focus on the task at hand.

My website provides a living home for the content I produce, whether it’s sharing ideas, talking about new projects, or linking to my favorite books. It’s so rewarding to finally have something I’m proud to work on; something I can continually improve over time and use to showcase the best version of myself. 👨🏼‍💻💄

I’m extremely happy with the current state of things. Before, it felt like I was living in a rundown house, uncomfortable and cold, embarrassed to have friends over. Now, my house is newly-renovated, feels safe and warm, and is something I can see myself working on over time and growing old in.

Thanks for visiting, and happy publishing ✍🏻