My Digital Zen Garden

I've become more interested in minimalism, which is why I now own but a single white t-shirt and a single pair of jeans. This philosophy has many appeals. It simplifies life, it flies in the face of traditional consumerism, and it's so much easier to clean your house when you don't have furniture. I think in part this mantra appeals to me because everything has become so complicated and bloated. Or maybe it's because I'm turning into an old man who yells at kids to get off his lawn and misses the golden years when everything was dumber. Regardless of the reasons, as a part of my ascetic pilgrimage I've been exploring simplifying web development. There's a certain charm to the simplicity of the early days of the web which I wanted to recapture. On top of that, modern browser APIs are stable and there's a lot you can do with a little vanilla HTML, CSS, and JavaScript.

I had also become frustrated with the complexity surrounding a simple text based blog. I've tried many solutions over the years. WordPress is a bloated wasteland. GitHub Pages worked fine but I ran into periodic hiccups whenever I dusted off the blog and tried to run Jekyll locally. I also encountered a few annoying quirks with how custom domain setup worked. I've tried Next.js, but it felt like such massive overkill and the amount of automatic code splitting, routing behavior, React rendered views, and behind the scenes optimizations made it hard to reason about what was happening (I am very stupid).

In the end, I just wanted something simple. I hardly have any spare time these days, and the last thing I wanted to do when I have a few minutes to think about blogging is to spend it wrestling with the tech I decided to use.

So, with my newly discovered ascetic beliefs in hand, I decided it'd be fun to rewrite this blog to use the most fundamental web technologies I had at my disposal. No frameworks, no dynamic server side rendering, code splitting, preloading, or any of that. Just plain HTML and CSS.

Structure

I wanted a very basic site structure, with a home page and blog posts. To add a new post, just create a new HTML file at the source root. To link between the pages, just add a hyperlink. This was so refreshingly simple.

Styling

I wanted to keep the styling simple while still providing readable text on different devices. CSS now provides rem units as a clean mechanism for relative lengths. This is nice for accommodating small form factors like mobile phones. I also wanted a font that was standard but didn't attack my eyeballs while reading it. I landed on the following simple CSS block: 

<style>
    body {
        font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
        font-weight: 300;
        letter-spacing: .01em;
        line-height: 1.6
    }

    .container {
        max-width: 36rem;
        padding: 0 1rem;
        margin: 3rem auto 6rem;
    }
</style>

This achieved my goal, was concise, and easy to understand. Since I'm keeping this simple, I just copy and paste the <link> for my stylesheet to each blog page I write. This is dead simple. I considered adding in normalize.css, since it's a popular option for normalizing differing cross browser styling defaults, but I decided I didn't care to spend the bandwidth to download 2.1 kB and the browser quirks were acceptable.

Hosting

The web hosting landscape can be complicated to traverse these days. There are kitchen sink IaaS offerings like AWS and bare-bones Linux VM offerings like Linode. In the middle there are PaaS offerings like Heroku. What to choose?

My requirements for hosting were simple. Brain-dead setup, low (or no) maintenance, and ideally free. A lot of hosting services offer a free tier (AWS, GCP, Heroku, DigitalOcean), so that was an easy requirement. The simple setup was a bit less common.

After searching around, I stumbled upon DigitalOcean's App Platform. This seems to be a new PaaS style offering on DigitalOcean's product sheet which provides more auto-configuration and out-of-the-box setup than their traditional IaaS Droplet product. I've never used any DigitalOcean products, but I found a how-to article that specifically walked through setup for a static site which can monitor a GitHub repo and auto-deploy on code commit. This was perfect and fit exactly what I was looking for, and the auto-deploy simplified updating my blog significantly. The setup itself was a few clicks. Very nice.

DNS

I've used this blog as a place to experiment in the past. Most recently I had built a blog implementation on Next.js, and deployed it to Vercel (their all-in-one hosting solution). Vercel includes domain registration and DNS management. I had transferred my personal blog domain from GoDaddy (barf) to Vercel, since it simplified the app configuration on that platform.

Once I decided I was going old school, I needed to move my domain to a more traditional registrar. I had heard Namecheap echoed a thousand times as the best place to house domains. So that's what I used. It took a couple of days to complete but the transfer process was simple to initiate. No problems.

DigitalOcean provides DNS (but not registration), and managing a domain for an App is built in. It was straightforward to configure name servers on DigitalOcean and point to them from my registrar. In a few minutes I had my blog domain configured for my static site.

Enlightenment Achieved

So that's it! I am happy with the end product. It is stupid simple and incredibly easy to update. It costs me nothing, and I can now sit and stare at my beautifully minimal blog and sip my tea in perfect harmony.

← Back to home