Hello and welcome to my custom-made blog. Very rarely I'll stick some kind of ramblings on here about programming or Linux or maybe something else. It's practically law that anybody who creates their own blog platform has to make the first post about how they created said platform, so this is exactly that.
My original website was purposely kept very simple - it was static hand-crafted HTML, CSS and JS with no framework. The reasoning behind this was mostly just because I wanted to do something refreshingly bare-bones compared to my normal full-stack work with React and whatever else. The programming version of taking a holiday in a cabin in the woods, if you will.
This doesn't scale brilliantly though, and after deciding having somewhere to write things would be fun, I also immediately decided there was no way in hell I'd be hand-crafting my own blog system with vanilla static HTML and JS. Time to rebuild everything from the ground up.
The new site is built using NextJS and hosted using Vercel. This allows me to keep the whole thing static and super speedy while still displaying dynamic information. Without on-the-fly server-side rendering! Next has a fancy new technology it calls Incremental Static Regeneration that means the server will check if it needs to update when a request comes in, and regenerates (and caches) the new page if it does.
The actual blog content is written and stored in Markdown. I'm writing it from an editor on a hidden page on the site that uses the React component tui.editor, which you can find here.
A combination of remark and rehype are used to render the markdown, with the base16 eighties theme for syntax highlighting. This is done when the page is built, passing the resultant HTML into the page as a string. Observant React boffins will note that means I'm using dangerouslySetInnerHTML, but:
- I'm writing everything, so there's no risk. I'm not planning on writing XSS attacks for my own site.
- You don't need JavaScript to open the page. That keeps everything very speedy and very backwards-compatible (be it the person or the device...)
To persist the posts, I'm using Google's Firestore database in partnership with their Firebase authentication stuff. It's not necessarily the best suited tool (it's probably slower than a relational DB and I don't need any of the fancy real-time update features for this project), but it's very quick and easy to set up, and most importantly doesn't cost me a penny.
Of course the whole thing is open source too, you can find it on GitHub.