Rach Smith's Notes & Nuggets

My simple 16 step system for adding comments to my static site built with Astro

note : meta / astro Added November 19, 2023

Okay, maybe there aren't sixteen steps, but it does feel slightly convoluted.

First, some background: my original solution for adding comments to this site was to use talkyard.io. I was grateful to have a 3rd party option that was low-weight, respected users' privacy, and affordable. It worked great for the most part, but readers occasionally reported availability issues. I decided it was time to build something for comments myself.

At first, I thought about options for dynamically writing from and reading to a database. I [[How Supabase fits in to your stack|looked into supabase]] as an option for storing comment data. If I wanted to render dynamic data from a DB on page load, I'd have to switch my note pages from statically generated to SSR (via server functions). I didn't want to do that. I love how cheap and efficient SSG is.

Since I wanted to keep the notes pages static, I considered implementing the comments in an iframe storing a page using SSR. Kind of like how Talkyard worked, but from my own website. I also decided against that because I didn't want to deal with sizing the iframe just right, depending on how much content was there1.

I reconsidered everything again... who says comments have to be dynamic, and stored in a database? The notes are just .md files in the site repo. What if the comments were just JSON files in the repo, too? I liked the simplicity of that idea.

I wanted the comments to live in my repo as JSON. How would I get them there? I tried a Netlify form for submitting comments, and it worked well. I was impressed with how easy it was to get a form functional on the site using this method. I got a few spam submissions at first, but after adding a honeypot field they stopped.

Netlify makes all form responses available via their API. I made a tiny SvelteKit app to read the responses from the API so I can review, approve or delete them. When I approve the comment, the app calls a tiny Express Server that writes the comment data to the JSON file in this website's data folder. Then, I review and commit the changes with git, like when adding a new note.

A screenshot of my comments approval app. The pages reads: You have 1 comment to approve. A test comment's details are listed underneath. There is an Approve and Delete button underneath the comment.

This is what I mean when I say it is pretty convoluted. To approve a comment, I have to:

  • be on my computer
  • running the SvelteKit app locally
  • running the Express server locally
  • commit the changes with git

But, considering how infrequently I get comments submitted to this website, it is working just fine for now. What I love most is how fast the comments load for users on the site. The comments are just HTML: no scripts, no iFrames.

In the future, I may make the system a little more portable: deploy the SvelteKit app to hosting somewhere and learn the GitHub API so I can commit changes from the cloud. Then, I could approve and publish comments on the go. Right now, I have no desire to do all that2.

I have the SvelteKit app and node server code in a GitHub repo if you're interested in seeing the code.

Footnotes

  1. because I am lazy. ↩︎

  2. see above. ↩︎

Thanks for reading! If you'd like to share your thoughts you can reply by email or hit me up on Mastodon or Bluesky.

Comments

Comments are closed. You can still reply by email.

  • Arco

    Very nice! Also a cool way to ensure that comments are archived/transferable to future website setups!

  • Stefan

    That's a creative approach! I'm wondering about bringing comments on my blog for ages and am hesitant about a 3rd party.

    I might look into this low-key approach. Thanks Rach!

  • Darek Kay

    I love static site generators, but including comments is indeed not as straightforward. I've been collecting all the tools and techniques for some time now. Ironically, I've decided to turn off the comments on my own blog 😅

  • Cassidy

    I am very pro-"keep blogs as simple SSGs" so I'm all for this. And it makes me want to noodle on other ways to implement it without requiring some of the steps you have. Hmmmmmmm.

  • turpelurpeluren

    Yeah! That is a smart approach! Nice to not need third party comments or host your own server. I feel like it would be nice to not have to commit the repo manually for every comment tho, but it sounds like it could be possible with the Api..:)

  • Mia

    Awesome tip for getting comments working with a static site. Also wanted to say that your blog design is fantastic!!! I love the colours and I haven't seen a mouse train in ages

  • Chad

    Thank you! Inspired by this article, I just implemented my own AI-moderated Astro comment system.

    An SSR script adds saves comments temporarily to a Vercel DB (and displays the comment to the person posting immediately).

    Then, periodically, a cron grabs the new DB posts sends them to OpenAI for moderation and then merges the ai-approved comments into Github (using an Astro data-collection for comment JSON files). Merging into Github triggers a rebuild/redeploy on Vercel.

    Fully static Astro site with comments and AI comment moderation.

  • Kevin Spencer

    This is great.

    I love stumbling across a new blog and being able to leave a comment. The reasons a lot of bloggers don't want the hassle of it I completely understand. But it's a great way to foster a conversation around a post without hunting for an "email me" link.

  • Rizqi Fahma

    Glad to hear that there's this article about adding comment on Astro blog as it is not that easy to find.

  • Mahmoud

    That Cool

  • Rafael

    Great! Thanks for sharing!

  • mike

    Interesting Approach to Comment Management

    This is a really interesting solution! I appreciate how you found a way to maintain the efficiency and simplicity of static site generation while incorporating a comment system. The use of Netlify forms and a custom approval app is a clever approach.

    Some Thoughts

    • Netlify Forms: Great choice for handling form submissions without adding much overhead.
    • SvelteKit App: Clever way to review and approve comments.
    • Static Site Generation: Maintaining SSG while adding comments is impressive.

    Have you considered using a headless CMS to manage the comments? It might offer a more streamlined way to handle content updates and approvals.

    Future Enhancements

    I would like to see a similar way to do it without relying on Netlify

    Thanks for sharing your process! Looking forward to seeing how this evolves.

  • Cold

    Great Article

  • kik

    h3ll0

  • Jan Ã¥ke

    Great!

  • evie

    that's sick! i used this as a basis for building my own comments stuff, although it uses an actual database. but it still came with some useful ideas!

  • Dillah

    Awesome

  • Blake T.

    Cool

  • Inshrah Usman

    This is such a creative approach! I love how you balanced simplicity with functionality—inspiring for low-overhead web projects.

  • alex

    cool idea

  • Milan Milutinovic

    Great Comment Rachel! I will try implement this sytem in my own blog

  • Jonathan

    This is awesome

  • Piotr

    Interesting approach—keeping it static with JSON files in the repo is simple and avoids the usual database overhead. Using Netlify forms and a review app to manage submissions makes sense. Not flashy, but definitely functional.

  • Randika

    Thanks for this

  • Aaron

    Awesome, your blog is great

  • Dwain

    Thanks for sharing Rach. I love your site, it's beautiful, well done.

  • Oleg

    Great idea! Make HTML powerful again!

  • Miso

    Amazing. Might try it myself!

  • John

    Thank you!

  • Odhy

    This is really cool!

  • Trzm

    Genius

  • Mhx

    will try it out. Thank you.

  • Dharmeshkumar

    I was struggling with adding a comment system in my static site, and this guide really helped. Thanks for simplifying the process 🙌