I recently went about implementing a super easy comment system for this static site. And by super easy, I mean super easy. All I do is:

1. Collect comments via Web3Forms
2. Add the comments to a JSON file in the repo

That's it. Why bother going through the hassle of storing comments in an external database and integrating it with an <iframe> or server functions when we can do what we've been doing with our blog posts: store them in the repo.

I'm using Eleventy but the process is the same for any static site generator. Here's the details in a little more depth:

I was originally going to go with Netlify Forms. At the time, it made sense:

1. I was already using Netlify
2. It's super easy to use
3. It wouldn't be super hard to switch services down the line if I wanted (little vendor lock-in)

But after reading this Netlify horror story, I instead found Web3Forms, which notably doesn't charge you if you exceed their monthly limit:

If you exceed the limit, we will stop accepting new submissions until the next month. You can upgrade to continue receiving submissions.

But no matter what you use, here's some things to consider:

• It's probably a good idea to have an extra <input> in your form set to readonly (not disabled, this is why) which includes information about the specific article the user is commenting on
• Make sure the form is protected from spam, either by using hCaptcha or a honeypot field

Now that we have a way to collect comments, we need a way to display them. Cue the next section:

To display these comments we can store their data directly in the repo, like most static sites already do with their blog posts.

This is awesome because it means our comments will already be embedded in our HTML without any JavaScript or calls to external scripts. We can treat it the same way we treat our blog posts.

I use Eleventy to generate my site, so I used Template Data Files to store my comment data. In simple terms, in addition to having a mypost.md in my posts folder, I will have a mypost.json file that includes comment data. It looks something like this:

{
    "comments": [
        {
            "id": "1",
            "author":"John Doe",
            "content": "This is the first comment.",
            "date": "2025-01-29",
            "replies": [
                {
                    "id": "2",
                    "author":"Jack Smith",
                    "content": "This is a reply to the first comment.",
                    "date": "2025-01-30"
                }
            ]
        },
        {
            "id": "3",
            "author":"Jane Smith",
            "content": "This is another comment.",
            "date": "2025-01-31",
            "replies": null
        }
    ]
}

Now, we have a way to receive comments and a way to display comments. All that's left is to connect these two systems and find an easy way to get our comments on our repo.

Here's the thing: I do this entirely manually.

This site gets such low traffic that it is entirely feasible to manually review comments and add them myself.

But some drawbacks to doing this manually are:

• Comments cannot be automatically added to the repo. However, this is actually good for me because I would rather manually review each comment for spam before adding them.
• The workflow for adding a comment is somewhat complicated. Go to your email, open the source code, copy the comment data into the source code, and push the changes. This isn't something I can do easily if I'm away from my computer on vacation.

The author of this neat article set up a neat system for pulling comment data via Netlify's API and programmatically adding it to their source code.

This sounds like it makes the process a bunch easier, but because this site has such low traffic, I haven't found a need for such a system. If the frequency of submitted comments starts to become an issue I might look into this down the line. I'm also not using Netlify Forms, but I like this idea.

It is totally possible to automate this entire system if you really wanted. You could set up a system to automatically pull the comment data from wherever you get it and automatically create a merge request via the GitHub API.

I bet someone has already coded this exact system but I might look into coding it myself down the line because it sounds like a fun challenge. If I ever do, I'll try and publish the source code for anyone to use.

While this is a really simple way of adding comments to a static site, I think it is also the best way. Like your blog posts, your comments should live in your repo. That's just the static way.

But of course, there are drawbacks. For one, storing comment data directly in your source code is not secure. If comments contain private information that you don't want publicly displayed, such as email addresses, it should probably be stored somewhere more secure.

Perhaps having a second, more secure database for information like email addresses isn't a bad idea.

The comments on this site don't collect any information aside from whatever would be displayed on the site, but this comes with the drawback (or advantage?) of comments being anonymous (i.e. impossible to trace back to anyone).

Anyway, what do you think? Maybe let me know in the newly-added comments below! Also report any issues you discover!