Adding a comment section in Astro

May 11, 2025

I can’t imagine running a blog without a comment section. Did I add this feature before creating the “About me” page? Maybe.

There were a few things that were important to me:

  1. Storing comments directly on GitHub, not with a third-party provider.

  2. Not requiring the commenter to have a GitHub account.

  3. The ability to use a private repository for my blog.

Giscus

If 2nd point isn’t crucial for you, Giscus and Utterances are interesting alternatives. Giscus is probably the better choice since it was heavily inspired by Utterances and is still actively maintained — the last commit in Utterances is from two years ago.

The idea is that comments open a discussion for a specific file (in Utterances, they’re added as issues, which undermines the purpose of that tab — another downside). You have direct access to them on GitHub and don’t need a separate database. However, to leave a comment, users must have a GitHub account and:

  • either authorize the Giscus app to post the comment on their behalf,
  • or add a comment directly in GitHub Discussions.

If this feels like the right choice for you, here are two tutorials that look promising → 1 2

Disqus

If storing data on GitHub isn’t important to you, but you want users to comment without being limited to GitHub accounts, Disqus seems like a very popular solution. I’ve heard some concerns about data privacy, though I haven’t looked into them closely since it didn’t meet the first requirement on my list anyway.

It does have a very nice WYSIWYG (what-you-see-is-what-you-get) comment form though.

The free version of Disqus includes ads. You can check out other open-source alternatives here → Remark42, Isso, Commento

The Solution I Used

Thanks to this post → https://rachsmith.com/static-blog-comments/ I figured out what I truly wanted. The idea that comments could be stored similarly to posts in a repository was very appealing. Rach uses a Netlify form to receive comments, and with the Netlify API she built a local app to process them. However, she still has to manually commit those changes.

If you want to dive deeper into Netlify, here’s a tutorial where Brad Traversy creates a simple contact form handled by Netlify 📺

I wanted this process to be more automated than Rach’s.

Did I end up choosing a tool that hasn’t been updated since 2020? Well… yes, I did. Here’s Staticman.

When a user submits a comment, it actually gets sent to Staticman, which then opens a pull request in your repository. You can then accept it - merging a new .yml file in your repo — or reject it by closing the PR.

Staticman - how it looks on GitHub

Here you can see Staticman in action (used with Gridsome) → 👀.

Maybe one day I’ll write my own app for this (I feel like Make would be a great fit), or at least update the libraries. For now, I just wanted to see if I could even integrate Staticman with Astro — especially since Staticman entered hibernation a year before Astro was even introduced.

There are a few tutorials on how to connect Staticman to your app. There’s even a guide from the Staticman’s author: https://staticman.net/docs/getting-started.html. However, the RSA key generation method described there didn’t work for me. This tutorial from Average Linux User helped instead (video version → 📺). Here’s the correct version:

ssh-keygen -m PEM -t rsa -b 4096 -C "staticman key" -f ~/.ssh/staticman_key
cat ~/.ssh/staticman_key | tr -d '\n'

But the tutorial I recommend most is this detailed one from Travis Downs → https://travisdowns.github.io/blog/2020/02/05/now-with-comments.html. Even though it covers Staticman with Jekyll, it explains the entire process and what each step is for, making it easy to generalize to Astro.

Unfortunately, Heroku no longer offers free tiers, so I also looked into how to deploy Staticman for free. I ended up hosting it on Render 🚀.

Downsides? In the free version, the site takes a long time to start after inactivity. That’s why I have a request/ping on the homepage to warm it up in the background before someone tries to comment.

If you don’t like Render, there’s also a tutorial on how to move Staticman to Netlify → ✍️.

Need help with configuration? Here’s a sample staticman.sample.yml.

Another helpful link — a list of common issues with Staticman and how to fix them → https://vincenttam.gitlab.io/post/2018-12-25-staticman-repo-setup-errors/. For example, I had the wrong branch set in staticman.yml (master instead of main 🤦‍♀️).

Apart from that, after 30 days, my bot account’s GitHub token expired. I didn’t handle error reporting properly, so anyone trying to comment during that time might have thought it went through — when in reality it disappeared into a 500 error void.

Also, at one point I unnecessarily experimented with preventDefault() in the form.

Overall, the process was long and painful 😅 It’s still not fully optimal, and I’d love to eventually replace the plain text field with a rich text editor. But hey, it’s a start 🐣

Best,
Monika


Thanks for reading! If you'd like to share your thoughts you can leave a comment or send me an email.

Comments

Leave a Comment