Creating a Simple Static Blog

I love personal websites. It's amazing that people can share content with the entire world just by writing some text and throwing it behind a web server. I wanted to know what that is like, so I set out to create a personal website of my own. As you can see I succeeded in doing so, but getting here wasn't as straight forward as I initially thought it would be. I thought that, being a programmer and knowing a thing or two about web servers, setting up my own website was going to be easy: How complicated can it be to throw some text behind a web server, right?! I was wrong. Throwing text behind a web server can be very complicated (and wasteful). But it doesn't have to be!

The search for a CMS

The first thought that popped into my head when I got started was: I need to find myself a CMS. I had a few requirements: my site should be self-hosted, be lightweight, have no JavaScript in it and it should look pretty. I also wanted to be able to write blog posts in markdown using my trusty text editor. The first CMSes that came to mind were WordPress, Ghost, Jekyll and Hugo. I don't want to get into too much detail, so I'll summarize my judgments here without any nuance: Wordpress is the devil, Ghost is great but too bulky and both Jekyll and Hugo required me to learn about theming and project structure which I deemed too much effort. I just wanted to write some text and throw it behind a web server, but all solutions I saw were sophisticated programs that were designed to "scale", support "modern workflows" or be "easy to use with integrated WYSIWYG editors". I didn't feel like exploring the idea further and gave up on having a website for a while.

Then, a few months back, I learned about writefreely. Writefreely is an open source web application from write.as that lets users create blogs that federate through the fediverse. I had just started to become acquainted with the fediverse and it seemed like a cool idea to me at the time, so me and a friend decided to set up our own instance. It wasn't too hard to set up and once it was running I only needed a couple of hours to add some custom style sheets. I finally had a fully functioning blog that satisfied all of my needs!

After that the holiday season came along and I turned my back on blogging for a while. When I checked on our instance three or four weeks later I was displeased to discover that spammers had created accounts on the instance and were posting spammy garbage. Sure, we could just close registrations. But this event reminded me that hosting any dynamic web application on the public internet is a big responsibility that involves keeping software up to date, monitoring and doing other configuration/maintenance work. Not to mention having to do regular database backups. I didn't feel like having to do any of that, I already have by hands full with self-hosting a bunch of other services. Once again I had found a complicated solution for a simple problem: I just wanted to throw some text behind a web server, remember? Why did I need to use a CMS again?

CMSes seem to offer solutions to a problem that I don't have: I don't mind writing plain html and I most certainly don't need a WISYWIG editor. I also don't need plugins, dynamic code for analytics, pretty yaml or toml configuration files, templates, extensive theming, admin panels, markdown, mailing lists, comment threads or any other common CMS features. I just want to throw some text behind a web server, so why not just write some HTML and do exactly that?

A CMS in ~200 lines

It was decided: I was going to blog in plain HTML. Having figured out what I actually wanted, I went to work. The first order of business was creating a style sheet to make things look good. I made it my goal to use as little CSS as possible and I managed to limit myself to just these 23 lines:

  html {
    font-family: Helvetica, Arial, sans-serif;
    color: #5b4636;
    background-color: #f4ecd8;
  }

  body {
    padding: 1em;
    margin: auto;
  }

  @media only all and (pointer: coarse), (pointer: none) {
    body {
      font-size: 5.5vmin;
    }
  }

  @media only all and (pointer: fine) {
    body {
      font-size: calc(16px + 0.6vmin);
      min-width: 500px;
      max-width: 50em;
    }
  }
 

This is all the CSS I need to have a responsive website that looks pretty (I stole the colors from firefox's reader mode btw). It's such a small amount that I don't mind copy-pasting it at the top of all new HTML pages that I add to my website. This might make it harder to change the styling later, but it has the added benefit that each page is a standalone document. So for example wget PAGE_URL will download a HTML page that looks exactly the same locally as it does on the web without having to download any extra assets.

The next challenge was creating and maintaining the article listing page and the RSS feed for the blog. I don't mind typing HTML pages, but typing out a page and an RSS feed containing excerpts/titles from other files gets old soon and I'd be bound to forget updating its content every once in a while. This seemed like a perfect occasion to write a little bash script, so I did. You can find the script here. What it basically does is read in a file called posts.txt that has html filenames in it, separated by newlines. Using those filenames and the contents of the files it then generates a HTML page (called blog.html) and an RSS feed (called feed.xml).

I keep all of this neatly stored under version control here, so deploying a new version is as easy as running git pull on my web server. I can honestly say that this is the simplest, most user-friendly CMS that I have ever used, and it only took me several months to figure out that this is exactly what I needed 🤓.

So, to conclude this story: websites are just HTML. You don't need fancy programs or WYSIWYG editors to create a website. Just a text editor, a web server and some spare time.