I used to have comments on my website—powered by Disqus.
Then I learned that Disqus is hostile, slow and bad for privacy, so I got rid of them.
But I miss having a comments section!
It’s fun to see what people have to say about something I’ve written, and Hacker News or Twitter / X never really
felt the same as having something directly on my own website.
So when I saw this post today about how you can use Bluesky to add a comments section to your blog, I got excited.
also, any replies in this thread will appear as comments on the blog post itself. made possible by the aforementioned Open Network 🫡
ft. @shreyanjain.net's reply below
[image or embed]
— Emily (@emilyliu.me) November 25, 2024 at 1:58 AM
Maybe I could back my comments section, but this time on top of Bluesky’s open network?
I grabbed the gist of the provided code
from Emily’s blog about how it works, then used Cursor and Claude to help me:
- Rip out the Next.js dependencies.
- Convert it from Tailwind to native CSS.
- Integrate it into my own site (on Jekyll)
Within less than 30 minutes I had a proof of concept running on my local machine.
Cool!
After getting this far, I decided it would be nice to publish it as an npm package so that anyone can
use it without having to go through the same steps I did.
So I just did that!
Now you can install the bluesky-comments package and create an
instant Bluesky-powered comments section on your own site!
Here’s an example of how I added it to my site—which is built on Jekyll.
First you need to add the default styles the page <head> somewhere in a base template:
<link rel="stylesheet" href="https://unpkg.com/bluesky-comments@0.3.0/dist/bluesky-comments.css">
Then you need to add the comments (and React dependencies) in the end of the body on any page that you wnat to show
comments on:
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/bluesky-comments@0.3.0/dist/bluesky-comments.umd.js"></script>
Finally, initialize the comments by passing in a link to the post you want to use as a base:
<script>
document.addEventListener('DOMContentLoaded', function() {
const uri = 'https://bsky.app/profile/coryzue.com/post/3lbrko5zsgk24';
if (uri) {
initBlueskyComments('bluesky-comments', uri);
}
});
</script>
In Jekyll, I can now add bluesky_post_uri to my front matter, and I have an instant comments section!
---
layout: post
title: "Adding Bluesky-powered comments to any website in five minutes"
excerpt: "Long live the open web!"
bluesky_post_uri: "https://bsky.app/profile/coryzue.com/post/3lbrko5zsgk24"
---
Of course, if you’re using a different blogging platform you can pass that post link variable in however you prefer.
The source code for the package can be found here.
Let me know in the comments below if you have any feedback! And hopefully they work…