Adding Bluesky Comments to My Hugo Site

I’ve been thinking about how to better connect my blog with the conversations happening on social platforms. I wanted something that felt natural and didn’t require readers to signup to my own comments system to engage. That’s when I came across Ashley Willis’s approach on her Astro-powered site.

This approach uses the AT Protocol’s public API. I thought - “this could also work with Hugo” (which is what I use for my blog), and set about adapting the approach. In this post, I’ll walk through what I’ve built and how it works.

The Implementation

The integration brings Bluesky likes and comments directly into blog posts. Here’s how it works:

1. When I publish a blog post, I can optionally share it on Bluesky
2. I add the Bluesky post ID to my blog post’s front matter
3. The component lazy-loads when you scroll near it (using Intersection Observer API)
4. It fetches interactions from Bluesky’s public API endpoints
5. Likes and comments display right here on the page

Under the Hood

For those interested in the technical details, here’s what makes this tick:

• Hugo Partial Component: A reusable Hugo partial template that only renders when a blueskyPostURI is present in the post’s front matter
• Intersection Observer API: Lazy-loading with a 300px root margin to fetch data before the component enters the viewport using the Intersection Observer API
• Bluesky Public API: Using Bluesky’s AT Protocol APIs including app.bsky.feed.getPosts, app.bsky.feed.getLikes and app.bsky.feed.getPostThread endpoints to fetch post metadata, likes, and threaded comments
• Tailwind CSS: Styled to match my site’s existing dark mode theme. Also added a placeholder gradient background when an image isn’t attached to a blog post.
• Silent Error Handling: If the API fails or there’s no matching post, the component gracefully hides itself
• GitHub Copilot: GitHub Copilot was used to generate the implementation. First, I used the new Plan mode in Visual Studio Code to outline the requirements, and then handed it off to agent mode to generate the implementation.

After some iteration, and debugging on the exact API calls, I arrived at the final solution. If you’re reading this post, scroll down to see the Bluesky interactions in action! You can like the post on Bluesky, and your avatar will appear here. Comments work too - just reply to the Bluesky post and it’ll show up below.

Thanks to Ashley for the inspiration! You should check out her blog, as she has a number of great posts which are relevant to the industry and Developer Relations.