Today I published my blog with a completely new design, thanks to the devcard from 3rd Wave Media. I am happy with it - it looks nice and clean, it's ready for publishing code, and I can now accept comments on my posts! :-)
The reason was not simply that I wanted to refresh the design
WordPress
The reason was not simply that I wanted to refresh the design. The core problem lies in the technology behind my blog. Years ago I started this blog running on WordPress, which, at the time, seemed the best and easiest option. However, WordPress came with problems: bad performance, and customizations were difficult unless you wanted to start PHP-ing. To fix the performance problems, I added some caching plugins. For SEO, a few SEO plugins. For security, some security plugins—and so on, and so on. The only thing is that I want to keep a blog running. In the end it felt like using a sledgehammer to crack a nut.
Let's be honest, I completely understand that less techie people stick to WordPress because it's easy and you can do a lot without any hassle. But, in my case, as I know how to program and configure systems, I thought it must be possible to get things done in an easier, more streamlined manner.
Static Site Generators produce sites that are blazing fast
Hugo
Because it is simply a blog, without any dynamic content, some years ago I decided to move to Hugo, a static site generator. The idea is that you write your posts in Markdown and Hugo will generate, with a given template, a site for you. Picking a ready-made template from the Hugo website was easy and I was quickly up and running.
The Breaking Point
But after a year or so, a problem arose. Hugo had made breaking changes in their engine. With the new version of the engine I couldn't generate my site anymore. Investigating the problem, I found out that it was difficult to fix. The reason is that if you want to fully understand Hugo under the hood, you need serious time to learn its inner workings. In other words, the learning curve is steep. IMHO: Especially because their template engine is difficult to understand. Therefore, I kept using the old version of Hugo.
However, using a static site generator like Hugo was fun and on top of that, your site is less vulnerable to hacker activity and it is blazing fast! So, I decided, if I want to move on, I will use a static generator in the future. But it must be easier to template, and must not introduce breaking changes.
Finding the Solution: 11ty + Directus
A few weeks ago I decided to move to 11ty. It was very promising because it uses a lot of template languages that are publicly supported. 11ty provides a list of template languages: HTML (.html), Markdown (.md), JavaScript (.11ty.js), Liquid (.liquid), Nunjucks (.njk), Handlebars (.hbs), Mustache (.mustache), EJS (.ejs), Haml (.haml), Pug (.pug) formerly known as Jade, and WebC (.webc).
A dynamic back-end with a static front-end
Instead of picking an 11ty-compatible template, I now decided to take a plain HTML template design that I would use for building my new website with 11ty. This way I learned the inner workings of 11ty. To be honest, it wasn't that difficult. It took me some evenings to get it up and running.
Instead of using Markdown files directly, I decided to use Directus, a headless CMS. This gives me the convenience of a WordPress-like interface for content management without the performance overhead. In short, it looks like the management interface of WordPress, but very flexible. You can also see it as a CMS-oriented database manager. You can connect all kinds of databases like Postgres, MySQL or MariaDB. In Directus you decide what tables you need and the related fields, like a blog table containing the blog posts, a table with the settings for the site, etc. Directus even supports writing your blog posts in Markdown with a full featured editor including a preview. Media such as images can be managed with full image resize and format support. The 11ty site generator connects to Directus using its API interface and from there, the site is generated every time a change is made.
The Result
In short, I now have a dynamic back-end with a static front-end for tonsnoei.nl. For you as a reader, this means faster page loads and a better experience. For me, it means easier content management and fewer headaches with updates. In my opinion, the best of both worlds!
If you have any questions about the solution, leave a comment below. I am happy to help.