Adding Bluesky Comments to 11ty Blog

I follow a learning framework, which is about consume → produce → engage. Whenever you want to learn a topic or idea, consume from the best sources. But that is only about 30% - 40% of your learning. Only when you create something, you solidify your understanding.

Even with producing, you are learning only one dimension of the concept. When you share with others and engage, only then you expand your learning.

This blog is in the "produce" domain. Since this is a static blog, I didn't find an easy to use commenting engine.

Since Bluesky became popular there have been attempts to have Bluesky replies as a comments. Initial ones were using react & svelte. Lou created a web component to display Bluesky replies.

Love this! I've had a play at removing the react dependencies as those add up to nearly 200kb!

Heres a web component based version at around 3.1kb gist.github.com/LoueeD/b7dec...

Demo: codepen.io/LoueeD/pen/Z...

[image or embed]

— lou (@louee.bsky.social) November 26, 2024 at 3:22 AM

Integrating that into your 11ty Blog is so simple.

In your post template (post.njk), add this script tag:

<script type="module" src="https://esm.sh/gh/loueed/bsky@v1.0.0/comments"></script>

Add a fontmatter tag, bskyurl (you can name it anything).

Then in the place where you want to insert the Bluesky thread, add this:

{% if bskyId %}
  <footer>
    <h3>Comments</h3>
    <bsky-comments post="{{bskyurl}}"></bsky-comments>
  </footer>
{% endif %}

Feel free to modify it.

Now go ahead and post about your new blog post. And add that Bluesky URL as a frontmatter data. You'll see the Bluesky replies as comments on your blog.

Test it out by commenting below.