A Blog with "Boring" Technology

Earlier this year, I’ve decided that I want to write about my thoughts and experiences on my blog. However, it’s the end of the year already, so what happened?

I was looking for the solutions available, I can have my own blog on WordPress, but for me it’s over-bloated, and not easy to customize (I don’t want to design a WP theme). Also, I have to worry about a host or pay to add my custom domain, which is not what I want. There’s also community-oriented publishing platforms like Medium and dev.to. I love the editor of Medium, though it doesn’t support RTL, and it has that “Pay to read” thing which I hate (can be disabled? No?). For dev.to, I don’t like the design.

Then I decided that if I don’t like any of the solutions available, I should make my own.

Most Important Requirement

It should be fast to the user, I can either host my site on a supercomputer or can make it Statically Generated. Which is literally just HTML, it can be hosted on CDN, no need for DB connections, no rendering in the backend, no fetching data, just plain old HTML.

First Trial—Using Hot Technology: React

Yes, I’ve been there too. I do love React and I can build anything with it, but let’s be honest, React is designed to be rendered on the front end—before React Server Components—it has its use cases, but it’s overkill for a static blog! Why I need to ship hundreds of kilobytes of JS just to have a static website? I’ve tried with both NextJS and Gatsby, both had long building time even for handful pages site, in addition to the bloat of the JS, just to have an SPA behaviour?

Second Trial—Using Hot Technology: Svelte

A that time I’ve been already learnt Svelte, it’s fascinating, it changed some of my views about the UI libraries. The interesting part is that it has 0 runtime cost on the front end! Yes, because it compiles the components to a vanilla JavaScript that manipulates DOM directly—that’s said, it has some limitations compared to the Virtual DOM counterparts, but it’s a trade-off to be considered.

I’ve built a few parts of it. It’s nice I don’t face the limitations in my use case, so I ignore them. However, there’s one thing that annoyed me, the build time, it needs some time to warm the bundler up (I use Rollup, but still too much), not only that, it scrapes all the pages (in /routes/) and visits all links to generate the whole website. All that to have fast navigation between pages? Not worth it.

There’s also Elder.js, it uses Svelte templates but compiles them directly without starting the whole server app. But that was enough, I still have to build too much from scratch.

Final Trial—Using Boring Technology: The G’old Jekyll

I avoided it because I wanted to use “hot” technologies, even though it was very mature and fast enough, it builds the website with a handful of pages in about a half-second, which is very fast, and keep in mind, there’s support for incremental generation, which will become handy when I will have thousands of pages.

It has one issue though, the SASS compiler, it takes time to build from source—the first build—on Netlify, I don’t like it, and I don’t use it—I use PostCSS which is really powerful and fits all the needs. So I ended up having my own Jekyll fork, it’s identical but without the sassc gem dependency.

What About Hugo?

Yes yes, we all know Hugo is the fastest SSG at the moment and widely supported. It’s written with Go, it uses Go templates to build the pages, it’s not bad, but I decided that I want something less powerful and can be used across different platforms—Liquid is a decent option, even if I decide to change the implementation to something else, I can still reuse the same Liquid and Front Matter on different platforms.

Another reason to use Jekyll is that I want to continue my career path working with Ruby, if I needed an extension for my website, I can enjoy writing my plugins with Ruby.

The Working Solution

I ended up with Jekyll, it also well suited for blogging, has tons of features and plugins to support such websites. For the front end, I designed it with Tailwind CSS—It’s the only hot new technology here. It is super productive and with it, it’s possible to design anything in your mind, without the need to write CSS from scratch or override Bootstrap classes.

I hosted this on Netlify, they have the Netlify CMS, which is a good solution for JAM Stack-based blogs.

And the final piece of the puzzle is; Turbolinks, it’s a really nice and simple solution, now the website feels fast and navigates just like an SPA without dealing with the complexity of the SPA.

Some Inline JavaScript is OK

Even though I kept the JavaScript code minimal, I needed to write some JavaScript for instance to toggle dark/light mode. I’ve just written it inline in the HTML, I didn’t want to deal with bundling/minification/compressing again, just to keep things as simple as possible, if I needed more JS, I will worry about that later.

Final Words

I’ve talked about my experience choosing a good fit for personal blogging, I wanted something to get up and running as fast as possible without the need to reinvent the wheel. We agree that software development is collaborative work, we always build on and use each other’s work.

Finally, I ended up with Jekyll, with Tailwind for the design, and Turbolinks for feels-fast navigation.

If you have a comment, or you want to discuss something, tag me on Twitter.