Setting up My Blog as Procrastination for Writing

2020-10-30

I’ve been meaning to set up my blog for about three years. This time around I decided to push through and instead of using the setup to delay my writing more, use it as a force. Once it’s up and published I no longer have to configure it, make it look a specific way, figure out some new tooling, it’s already there. Ready to publish. Now the site is up before the content is created, step one completed.

Over the last 3-4 years, I have created and implemented my personal website at least 3 times. One of them was with Hugo, a static site generator that allowed me to host it as a static site. I spend days on my own custom theme to make it look the exact way I wanted. I’m not a frontend software engineer so this produced numerous challenges. One reason to do this was that I didn’t like any of the existing themes, so I decided to create my own. Bootstrap, a quite popular CSS framework wasn’t really my thing. All bootstrap sites look the same to me. So I tried Bulma, which I liked, but fiddled around with for far too long. I did like the result but it was a long and sometimes painful journey.

Fast-forward a year, or maybe one-and-a-half, and I just ditched whatever I had created earlier. I wasn’t happy with it. Not the theme I created per se, but also the static site framework. I forgot a little how it worked and having every part created myself, it required understanding what’s what to be able to make a small change. In fact, I just should’ve started writing for the blog, I ended up re-learning the framework, finding a (newer) theme I liked better. But at the end of the day still didn’t get anything done. Yes, the title of this blog post is real. After ditching it I started over with a clean slate.

What Changed -or- Something Cool Happened

The creator of Elixir open-sourced a simple library called Nimble Publisher that takes markdown files and compiles them to modules. “Why is this cool?” you might ask. While it is probably not as fast as a truly static site, it comes very close as Elixir (or Erlang) modules are loaded in memory. This means whenever you request a page, all the computer has to do is dump the right page from memory. The content still needs to be rendered on the server, which is not needed for a static site, but this should really be plenty fast. Another big plus, for both a static site generator and this solution, is that you can write your posts and pages in Markdown. You don’t need a database or fancy editor to make a good-looking page. A benefit of having Elixir backing my blog is that I’m familiar with it and I like to play with it. Instead of learning about some site generator, I’m just applying the things I’m already familiar with. Thankfully there was also a very nice blog post by David Bernheisel explaining how he set it up which I used as inspiration.

All that was left was making it look good. Going through my old attempts didn’t make me happy, I forgot mostly how the frameworks worked and I was actually longing for something that felt more like a library. You just sprinkle a little of it and suddenly your website looks good enough. I read a couple of good things about Tailwind CSS. It’s a utility-first CSS framework. Going through the initial learning curve wasn’t too bad and I noticed I’m not constantly switching between HTML and CSS to prototype a webpage. I was just adding and removing classes in the HTML first and only later abstracted tiny parts of that away in CSS. A blogpost that helped me do it was Why Tailwind by @swyx.

I’m quite happy with the result and this blog post is proof that getting it out helped me write a post. I still need to fix some small things and tidy it up, but please let me know what you think and send me your feedback!