New feature! Added comments to this *static* website

This post is part of the { Website } series.

A friend challenged me to implement the option to leave comments on blog posts over the Christmas break, and rightfully so. I write these posts about things that currently interest me, not because I think I know it all, but to record a thought process or idea for later review by me or others. A blog is not the place for publishing well-polished papers, but instead ideally is a playground for developing and testing ideas in interaction with others. It is a big mistake when writing anything really, to not ask for feedback. That’s why I always share whatever I write with my friends, to see if something resonates. The conversations that this sometimes sparks up have been private so far, but I would like to at least give everyone (including all spambots out there) the opportunity to weigh in.

But there’s a challenge: my website is completely static, meaning that there is no backend server with which a user can interact to leave a comment on my blog. I wasn’t willing to give up the advantages of a static website just yet: it’s super fast, it’s secure, and I host it completely for free. There are some solutions for nevertheless still allowing users to leave a comment, but they all require the comments to be stored externally (e.g. on reddit), or involve some third-party widget to interact with an external database. So either the content is not visible directly on my website, or I have some ugly widget on my website messing with the slick look that I’m finally pretty happy with. But worst of all, in both those scenarios I do not have any control over the storing of the comments, as they are not part of my website!

But then I found a really cool option. This nice guy wrote a bot called staticman. The bot takes input from the form under this blog post, creates an appropriate .yml file for the comment, connects to its very own GitHub account, and then makes a merge request for adding the comment to the appropriate blog post. It is also possible to automatically push to my live master branch, but I preferred to have an extra check to guard against spam. This is awesome for static websites with auto-deployment, such as mine, which is hosted on Netlify. It literally solves all problems I had with other options: I have no external widgets on my website, yet all comments are visible on the same webpage as the blog. Most importantly, all comments are stored together with my website, and they are under my version control.

The writer of staticman created a public staticman GitHub account, but I found that it was horribly overloaded and being blocked by GitHub restrictions on the maximum amount of merge requests that are allowed per hour, as many people started using it. But the idea of staticman was too cool to give up immediately, so I decided to set up a raspberry pi that I borrowed from a friend with the GitHub bot. It took me a few days to set everything up, there was plenty to do and I made enough mistakes on the way. On my website I needed to write Hugo code for sending comment information to the bot, and for showing existing comments under the right blog posts. I also added a captcha to limit spam. It took me a while to find out how to send blog posts to the right folders and render them on the right web pages. It was useful to look at this example website. But most importantly, to allow people to reply on comments of others, this blog was incredibly helpful. Other things you have to do for this setup is creating appropriate configuration files with options and instructions for the GitHub bot, and of course setting up the actual GitHub bot itself, by creating an account and generating a key on GitHub so that the bot can access the account. You also need to give it access to a branch of the repo that your website is stored on. Then there’s setting up the staticman bot on the raspberry pi. I tried using docker since node.js didn’t work for me out of the box. But getting docker to work on the ARM architecture of the raspberry pi was much more of a pain than fixing the errors I had with the npm command. Then… some port magic, some bug fixing for bugs that I created myself, testing, and voila!

This is the flow:

  1. You fill in the form, and send the data to the Github bot running on the raspberry pi at my home.

  2. The GitHub bot logs in to GitHub, creates a branch, and makes a merge request to apply a commentid.yml file and put it in the right folder in the repo of my website.

  3. I allow the merge request (optional: can also be automatic).

  4. GitHub hooks into Netlify, and the website is automatically updated and deployed after the merge request.

We’ll see how it goes! Feel free to respond, leave ideas, suggestions etc. Be aware that your comment will not automatically show since I need to approve them first. I might change that if it turns out the spam is not too bad. A thing I’ll consider adding later is the option to receive emails when people reply on your comment, but for now I’ll test the current setup first. We’ll see how the raspberry pi holds up. It will be a bit slow, and the connection is not secured. If it’s broken please let me know over email!

Version control on notebooks using pre-commit and Jupytext <-- Latest

Website Update: Dark Theme and Etc. section <-- Next

Selecting user commands in style (Python) <-- Previous

What is the purpose of this website? <-- Random


Do you want to link a webmention to this page?
Provide the URL of your response for it to show up here.


Edwin on Friday, Dec 28, 2018:

I’m the first!

Edo on Friday, Dec 28, 2018:

You ready for the PR storm?

Edwin on Saturday, Dec 29, 2018
In reply to Edo

Sort of! One thing I noticed immediately is that it is a pain to delete all branches the bot creates for merge requests manually. But luckily I could set up a webhook on GitHub that asks the staticman bot to remove the branch immediately after I merge it, and that seems to work now. A seemingly trivial problem I have left is that I do not get email notifications when the bot makes a merge request, so users might have to wait a fair bit before their comments show up. It seems the regular email service of GitHub is now deprecated. Did you ever do something like that with a webhook, or is there an easier way?

Edo on Saturday, Dec 29, 2018
In reply to Edo

I’m not sure I understand your problem completely. As far as I know I receive email from GitHub whenever there is some interaction on a repo I own. This goes for PRs, as well as issues etc…

Edwin on Saturday, Dec 29, 2018
In reply to Edo

I get your confusion. What I meant is that there used to be an email service that allowed you to get emails for a very specific purpose only, such as merge requests. That service is deprecated now. In my general settings I had email notifications enabled, but still did not receive any emails… The problem was that I had to “watch” my own repository first. That was a bit unintuitive for me. TLDR; never mind and thanks for the reply!

Martijn on Saturday, Dec 29, 2018:

Good to see the pi has been used to allow a kind of internet activity that is typical for the internet itself: generating nonsense (and possibly worse).

That being said, INB4 this website transform into a Twitter-like wall full of accusations and profanity.

Edwin on Saturday, Dec 29, 2018
In reply to Martijn

I am personally fine with profanity, as long as it’s not twitter-like! (cough Reve cough). Anyways, I currently review all comments before they are allowed on this page, so that is also the reason why there was a delay before your comment showed.

Vincent Tam on Saturday, Jul 13, 2019:

Network Hobo’s guide has a logic error described in

Edo on Saturday, Dec 29, 2018
In reply to Edo

You may see the Huginn theme as an example of nested comments without such problem.

Edwin on Monday, Jul 15, 2019
In reply to Vincent Tam

Thanks very much! This bug never bothered me enough to sit down for it, but especially with your directions I definitely should soon.

adsandurl on Wednesday, Sep 25, 2019:

Thnaks for sharing this such a great article it’s really good.

Ankit on Monday, Oct 21, 2019:

Thanks for the article… Was looking for something like this. But how did u manage to make this without commentors authentication?

Edwin on Monday, Oct 21, 2019
In reply to Ankit

Hi, thanks for your reaction! There are some clear downsides to my approach. The only very minimalistic authentication is a captcha. By the time I implemented the comment feature my site did not have that much traffic, but by now it does and I get a spam from bots that know how to pass the captcha. Honestly, there is the option to install a spam filter to be used in combination with Staticman, but I simply did not make time yet to fix it.

A second thing to note is that these comments generate pull requests on the GitHub repo of this website. I have to approve them before they show up here, which so far has been my way of dealing with spam: I simply close the pull request. By the way, you can inspect all code of my website on that very same GitHub repo :-).

Philosophically, the major advantage of my current approach is that users have full anonimity. If I would ask for emails or contact details, those would be recorded in the git history. Nevertheless it would be nice to be able to notify you that I responded to your comment, for example. I don’t know how to while preserving the privacy of commenters. The best method for personal contact is… email ;-). There is another option to comment here though with authentication, namely to submit a webmention using the microformats2 system (used by the IndieWeb).

robert on Sunday, Feb 16, 2020:

Thanks for sharing this, it’s really good.

This is a test on Friday, Aug 28, 2020:

Testing this feature. Nice blog!

Edwin on Monday, Aug 31, 2020
In reply to This is a test

Thanks. How did the test go?