Almost exactly an year ago, I had published Webtrotion. Webtrotion was mainly meant to be used by me, and it is still very much mainly just used by me, and no one else - and that is okay. I made sure to provide enough configurability such that if I wanted to change things around later down the line without directly modifying the code, I could, and hopefully that would help other people adopt the website too.
In the last 2 weeks, I added 3 features: integrated umami tracking, added bluesky as comments functionality Show information for the linked content , and added RSS with content. And Dec 5, 2024, I updated to Astrov5.
Not much has changed honestly on first glance, and the images below are a bit different also because of the changes in original page, but you can see the slight differences here.
Background Context
I had started my personal website back in May of 2023 based off Quarto. But I never enjoyed writing content in Quarto. Sure, I could make it look nice and fancy, but I had to accept the fact, that I would never like writing long-form content in markdown. I really love block based editors. It is a pretty simple UX change, but the fact that I can drag things around and put things side by side, apparently, matters a lot to me. So, when I could not stick to using Quarto and the convoluted yaml system I had, I decided to find ways that allowed me to author in anything else than markdown, and those that were free. Especially because, I just wanted to host them as a static website, I did not need fancy stuff, and I wanted it to be portable enough such that if my plans change, I am not hoisting it around.
Which landed me on deciding on Notion. Sure, I played around with other WYSIWYG editors, but no other editor comes close to Notion, and ultimately, that is why I was looking around in the first place, right? And I found two major camps of options — using Notion’s public site and render it on your own, similar to super or react notion, or use Notion’s API. I wanted to go down the API route. Why? It feels safer in a way. The biggest problem though, is that you cannot render collections through API — and I kinda made peace with it; if I was choosing markdown, I wouldn’t be rendering Notion collections anyway, so why should this make a difference.
Choosing to Develop Webtrotion
Honestly, when I first decided to use Notion as a CMS, there were hundreds of existing options. From GitHub solutions using public pages to platforms like super.so that could render databases (which I still can't), the choices were many. Then there were indie apps claiming to use Notion as a CMS - some popular ones with high price tags, and free ones charging based on the number of websites. I'm glad I chose none of those options. Since I didn't want to make my pages public, most options were automatically eliminated. I'm also relieved I avoided those newer apps because, except for maybe two (the expensive ones), all of them are now defunct - and you never want your blog to be defunct. That's why I use GitHub Pages. While GitHub Pages might not last beyond 10 years, that lifespan is acceptable to me. The typical one-year or six-month lifetime of an indie project, hoping for adoption from the Notion community though, doesn’t sit well with me. So, I decided to find a base repository I could develop that didn't use React (which I wanted to avoid) but worked with vanilla JavaScript and CSS.
Deciding on the Base Repository
Long story short, I found Otoyo’s github repository that did most of what I wanted, in a template format that I didn’t really like. I really like Astro’s cactus template, not because I had used Astro before, but because it was pretty aesthetic 🤷♀️. I knew that I didn’t know enough about the area to start this on my own, so I asked someone on fiverr to merge the two for me. The major change I wanted to make was, I needed to host the complete website, not just the blog component. So, late October, 5 months after I started using Quarto, I asked someone on fiverr to help me out — to combine otoyo’s github repository with Astro cactus’ looks.
And they did it! It didn’t have everything I wanted, but it did have enough for me to get started a month later, thanksgiving of 2023. And here were my initial commits to the repository, mostly focussing on improving the looks and making it look like I wanted to.
Adding Features
Over the past few months, I added multiple features to the setup. While I was making a decision, I did think, what if I found the perfect integration — and then realized that if I was dependent on someone else for a solution, I wouldn’t be able to integrate things that I wanted. So, I set out to do just that. Making it look more like Notion when need be, look a tiny bit better in many use cases, but also integrate some shortcode like functionality.
So, here is a list of all features added above and over what already existed in Otoyo’s and Astro Cactus’ implementation:
Improvements
Performance
-
Webpimage transformation for reduced image size - Cache system that works with github pages
- Preload and LazyLoad strategies for videos
- Twitter and TikTok embed improvements
Access
- Support for slugs in any language (auto and explicit)
- Theme toggle between light and dark mode
- Responsive font sizes (14px mobile, 16px desktop)
- Scroll to top functionality
- Improved accessibility with ARIA labels
- Better semantic HTML structure
- Enhanced keyboard navigation
- Improved print styling and optimization
- Converted checkboxes to icons in ToDo component
Match what Notion Does
- Support for audio blocks
- Support for custom emoji in mentions
- Match colors with exact Notion colors
- Block based linking support
- Support for link mentions and link previews
- Better table of contents with floating functionality (that also works on mobile)
- Improved table styling with Notion-like gray tables
- Tag descriptions support
Additional Features
Setup and Layout
- Stream-like preview for posts (Google Blogger style)
- View transitions support
- Generate OpenGraph images
- Add last updated date option
- Add social links to footer
- Allow font configuration for both text and open graph images
- Support for google analytics and umami
- Command+K (⌘K) or Ctrl+K search functionality
- Support for BlueSky and giscus comments
- Pin posts to top functionality
- Recent posts on homepage option
- Interlinked content section
- Generate RSS, now with content
Content
- Shiki transforms for code blocks
- Popover implementation for links and mentions
- HTML rendering options via shortcodes (@July 4, 2024):
-
<!DOCTYPE html> <!-- iframe -->for iframe rendering -
<!DOCTYPE html> <!-- inject -->for direct body injection
-
- Support for data tables with search and sort functionality
Looking Back
Honestly, I enjoyed this project a lot. It got me back into using JavaScript and experimenting with different interesting styles. I really like Astro, though there's an issue with it being so new - every update might bring unexpected issues that I run into, even within the same major version. And then, I do not like the newer content loaders for Notion, which tend to flatten everything. That's probably the next thing I'll look into.
I really enjoyed this process. I can add custom components and use this website for whatever I want. While it may not support newsletters (like substack) or have an integration with ghost/buttondown, and isn’t as future safe and easy/quick to build as a markdown based website, I think it was worth continuing because I've never updated a site as frequently as I have with this setup.
This project also led me to accept that I don't like writing in Markdown, which has been a significant "accept what I can’t change, change what I can, and know the difference" moment for me. I realized I prefer writing in block based, rich-text editors (so, mostly, Craft and Notion). Notion did launch their Sites 2.0 feature by the way, which offers almost everything you'd want, but it requires a custom domain and additional payments for that custom domain to be connected. I really wanted a static site, and while previous issues like changing slugs are now fixed, it's still a trade-off. You can at least showcase your inline database when using Notion's built-in site feature, though I wish there was a way around some limitations. But I get to do nice code blocks using shiki, and, I get bluesky comments.
All in all, I really liked this experience as I achieved my main goal: having a website that I actually want to write and publish on. That has been the most important outcome.