How I Implemented Comments on a Static Site

In the past I used a static site generator for this blog and I was looking for a simple way to add comments without using a 3rd party tool like Disqus. I don’t want a 3rd party tracking my users and I don’t want to encumber my blog with any server backend. I want the site to be so simple that you could easily host it from your basement on a Raspberry Pi or otherwise very small computer.

Adding Comments to the Post Front Matter

I decided to use a simple array of comments in the front matter of each of my posts. The yaml front-matter for this post looked like this.

---
date: "2017-05-04"
title: "Comments on a Static Site"
comments: [
"This is really awesome. -codazoda",
"I love it. -ananymous"
]
---

Because it’s added to the post itself, I will just have a form that emails me user comments. As part of my moderation process I’ll copy those from the email and paste them into my post. It’s a little work but not bad for the number of comments I get.

Updating the Theme to Include Comments

Once I had decided to add comments to the front-matter I just needed to update my theme template to pull those comments into the post. Since I’m using Hugo I needed to update my single.html file so that it included comments. I used a partial for this but you could also include it directly into the page. Here’s the code that brings in my partial.

{{ partial "comments.html" . }}

Then I created a comments.html file with the following content. Again, this example is specific to Hugo so you’ll want to use the templating engine for whatever static site generator you’re using.

{{ if .Params.Comments }}
<div>
<h2 style="margin-top: 50px;">Comments</h2>
<ul style="margin-top: 20px;">
{{ range .Params.Comments }}
<li>
{{ . }}
</li>
{{ end }}
</ul>
</div>
{{end}}

Submitting Comments

Now that I’ve got a way to show comments on my posts I need a way for users to submit comments. Because I’m a big fan of building minimum viable products (MVP’s) I’m going to opt for a simple mail link. I’ll probably expand on that later.

So, that’s it. Comments are now part of my blog. They live in the front-matter forever, are committed to my source code repo, and published to my site. Nothing fancy is required to display them so my blog can still run on minimalist hardware.

1 thought on “How I Implemented Comments on a Static Site

  1. That’s an elegant solution, but also very simple and limited. You can’t have features like editing comments after they are sent, up/down voting, reply/threads, e-mail notification about replys…

    But i like that the comments are part of the page source and HTML, so they are archived together with the content. So our culture is not lost 10 years from now. (I actually blogged 10 years ago and most of the blogs from then are lost)

    Do you have ideas to extend this MVP to add all the features Commento has but keep the simple design, so the data is part of the website? It’s crazy to host PostgreSQL just to get 100 comments a year…

Leave a Reply

Your email address will not be published. Required fields are marked *