A good tech stack for an over-engineered blog
I’ve wanted to start writing for a long time.
Though I have been a superuser of Obsidian, it was always a personal journal more than a blog. Also, obsidian-publish checks all the boxes and some more, but costs a lot for simple personal blog.
So just like any other engineer would do, I started to do some research on most cutting edge technology for a blog. Here are the feature requirements that I could come up with :
General Requirements
- Generates static pages → free to host
- Generates graph → essential aesthetic
- Internal linking →
[[ wikilinks ]]style for brownie points - Fast search through whole blog
- Page previews on hover 🫵
- Backlinks
- Customizable themes and functionality (basically rules medium out)
- Code syntax highlighting
- Andy Matuschak style sliding window mode - double brownie points
- MDX support to add custom components
Personal Requirements
- NextJS under the hood is ❤️
- Consumes obsidian vault and gives statically generated site
- Elegant and aesthetic
A few hours of research boiled down to two contenders:
- Quartz by Jacky Zhao
- Gatsby Digital Garden by Mathieu Dutour
While there is no apple-to-apple comparison of these two projects, I chose Quartz because:
- It’s regularly maintained by Jacky (kudos! 🤜 🤛)
- It easy to setup, checks most of the boxes
- Looks and feels great 😻
Though most of the codebase feels alien to me, but I managed to somehow play around and make some tweaks.
Closing: An Ideal Blog
If you want to look at how innovative can you be with a blog design, play around with
Josh Comeau’s blog
Also check out this amazing digital garden from
Maggie Appleton
In an ideal world, I would have spent a couple of weeks to build this in house (we built a similar MDX engine for EdMad). Do let me know if you find this exciting, and we can spin up a github project 🚀!
Update
Recently came across Nextra, made by Shu Ding, who is the creator of SWR. It would be interesting to see a digital-garden implementation written with Nextra.