It’s been nearly a year since my last blog post! Time flies, huh?
My site has changed quite a bit since the last blog written. I completely rewrote it and actually ‘designed’ it: It now got this cool pixelated retro-like look instead of my previous “just throw some rounded-md and shadow-lg everywhere” design. I’ve also learned a lot more about web developments and tools. We’re now powered by React, and it’s typed with TypeScript! I’m pretty happy with how things turned out, but the blog system isn’t launched with the new site because I’m unhappy with how the previous one worked. I finally got around to reimplementing it, and that’s what this post is about!
Why reimplement?
To put it short, it sucks. The previous blog system was really just some quick and dirty hack. I used dynamic imports to load markdown files as needed, and react-markdown to convert them to HTML on the fly. This means it can’t be crawled or indexed by search engines. Even worse, there was no real blog listing page, I kind of just throw them all inside the home page and hoped for the best. It also didn’t have a proper way to handle metadata like titles and dates. Not to mention that it doesn’t support RSS, which is a must-have for any blog. The only reason it works is because I don’t have that many posts yet. As the number of posts grows, this system would become increasingly unmanageable.
The new system
The new system is built around a prebuild step that generates a blog manifest, static HTML pages and an RSS feed before the site is built. While this means I am able to have the site crawled and indexed, I am no longer able to edit it and have it hot reloaded, but the benefits outweigh the drawbacks. It’s just markdown anyways, I can already have a quite clear picture of how the post would look like without needing to see it live all the time.
Blog Manifest
The blog manifest is a JSON file that contains metadata about all the blog posts. It includes the title, description, tags, thumbnail, and date of each post. This manifest is generated by a script that scans the public/blogs directory for markdown files, extracts the front matter, and compiles them into a single JSON file. This manifest is then used to render the blog listing page, which allows easy sorting and filtering of posts.
RSS Feed
I did not even know about RSS until recently, but it’s actually a really cool technology that allows users to subscribe to updates from a website. The new blog system generates an RSS feed during the prebuild step as well. This feed includes all the necessary metadata for each post, and is automatically discovered by browsers and RSS readers. This means that users can easily subscribe to my blog and get notified whenever I publish a new post. I don’t see why you would want to subscribe to my blog, but hey, it’s there if you want it!
Conclusion
Reimplementing the blog system was a lot of work, but I’m really happy with how it turned out. The new system is much more manageable, and it allows me to easily add new posts and keeping track of them. Plus, the RSS feed is a nice bonus that I didn’t have before. Of course, there are still room for improvement. I love the ‘star’ system from osk’s blog and is planning to implement something similar together with the ability to leave comments in the future. If you’re thinking about starting a blog, I highly recommend taking the time to set up a proper blog system from the start. It will save you a lot of headaches down the road!