Site Update! Blog Comments*, Images
*GitHub users only rn.
In my last blog update post, I listed some plans for features I wanted to add to my site and blog, including
- blog post reactions and comments
- better content management, and
- better image hosting
I've added these in!
This post will give some basic details about how and why I did each of these things, from most to least interesting.
Blog reactions and comments
My blog posts have comments and reactions now! They're down at the bottom of each post.
Why?
I'm hoping my blog will eventually have some blend of technical content and opinion-y content. So I'm hoping comments will facilitate Q&A for technical content, and give space for broader discussions around opinion-y content. I don't anticipate much activity, but I want to nurture what I can!
How?
Giscus! This little tool lets you associate comment threads in your GitHub repo with pages on your website.
Integration is simple. Giscus is a GitHub App so adding it to a repo is trivial. Once it's added, you can integrate it to a Docusaurus site with the @giscus/react npm package. This gives you a little HTML tag that you can tell Docusaurus to attach to every Blog page.
I used these tutorials for help:
- Daniel Farlow - How to add a comments section to doc pages and blog entries using giscus
- m19v - How to add Giscus comments to Docusaurus
Giscus only supports comments for registered GitHub users right now. GitHub accounts are free and easy to make, but I'd probably enable anonymous comments if they ever add support! If you don't want to make a GitHub account, you can always email me.
Image hosting
I'm serving this site's images from a personal cloud storage bucket, via a custom subdomain (assets.keldev.net/[image]).
Why?
Usually websites like mine just use something like imgbb or imgur for images (or just store images in their repo directly). These are generally fine!
The biggest thing I get out of my setup is the ability to serve images over that custom subdomain, with more control over what an image's URL will be. So my image links end up looking like https://assets.keldev.net/test-flower.jpg instead of https://ibb.co/rRhGd8gH. I've also got the same amount of control over my image files that I've got with everything else in my personal storage. I can perma-delete or replace them. I can re-download the original files whenever. I'm already paying for file storage with this service, and this solution didn't add any other costs, so it works out well!
Here's that test flower image, for the curious.
How?
My solution comes directly from the Backblaze B2 docs!
I followed the instructions here pretty much exactly. This involved setting up a public B2 bucket (which is trivial once you're using B2), and setting up my domain with Cloudflare (which is actually pretty straightforward).
Content management
My site is now split across two repos.
iamkeldev.github.io holds everything except for the actual contents of my blog posts, and keldev-blog-drafts holds those blog posts.
Why?
This honestly doesn't do much. The site is just slightly more modular. Concerns are slightly more separated. Edit history for the "main" site is no longer tied up with edit history for my blog post drafts. I can do all kinds of messy edits to each repo individually, and the messiness won't overlap as much.
How?
keldev-blog-drafts is mounted as a Git Submodule, so that its contents go into the blog/ directory. This is a basic Git Submodule use case.
Try out the comments system!
If you've never interacted with something like Giscus and you just want to see if you can get it to work, feel free to leave a random comment below!