This blog has gone through a couple of redesigns and re-architectures in the past. First iteration was a self-hosted Ghost instance with a default theme, and second was a static site made with Hugo hosted on Netlify. This time around, I was more inspired by the idea of this great website and followed a clean, minimal aesthetic similar to my landing page. Below is a little before and after for comparison.
Before - old version of the blog
After - redesigned version of the blog
Since I noticed my pattern of reworking the blog every few years, I wanted to make the content to be somewhat flexible and easy to extract. So I decided to use markdown and use standard syntax without any framework specific shortcodes. The thought of using headless CMS such as contenful crossed my mind but Netlify CMS is still a great open-source solution to manage a git based workflow. Plus, it has the editorial workflow that seamlessly integrates with Netlify to generate draft previews so that was an easy decision.
Netlify CMS editor
Some of the other features of the site:
- Uploadcare integration - Netlify CMS has a great integration with Uploadcare which is a CDN made for assets. It can do a lot of image optimizations on-the-fly so all of the heavy lifting with regards to image assets are offloaded to that service. I just use their image uploader inside the CMS editor, and it spits out a URL that points to an optimized image. You can inspect any image on this page to get an idea.
- Dark mode support - this was pretty easy to do with CSS variables. Change theme in your system settings to see the color change.
- Small size - every single page is light as a feather. Less than 100kb in size without the additional Netlify auth scripts.
- Auto descriptions - created a small filter that generates excerpts out of post content to be used in meta tags for each post page.
- Automated tag pages - a cool, built-in feature of eleventy.
- Reading time - this small snippet scans the contents of the page and spits out a number in minutes based on a given WPM(words per minute).
- Syntax highlighting - to make code snippets look pretty.
This was a pretty fun and interesting project for me and if you are interested in digging deeper into the source code, please see the Github repo.