The one bad thing about hosting a static blog is that implementing comments means you:

• Outsource, letting some other site handle it (like Disqus)
• Come up with some sort of crazy contraption to force a comment system into a static blog
• Spend hours scouring the internet to see what other people have done.

Obviously, outsourcing wasn’t an option - Disqus looks nice and all, and I’m sure it would be fine for a lot of people, but it just wasn’t what I wanted. I like having full control of my data. My next idea was to find a free hosting site and write some crazy PHP and set up a SQL database to set up comments.

But this got me thinking - how did sites handle comments before all this dynamic content was commonplace? A careful google search led me to an amazing blog post by Eduardo Boucas on how he solved this exact problem. And holy crap does his solution work exactly like I wanted. In a quick nutshell: Staticman is a Github bot that pushes formatted yml (or json) files into a specified directory that can than be read as comments on the page when the site is built!

So how did I set this up in Jekyll? Read on!

Obviously, the first thing I did was read the documentation on the Staticman site, and followed the steps listed there. This is what was added to my _config.yml file for the site.

staticman:
  allowedFields: ['name', 'message']
  branch: master
  filename: 'entry{@timestamp}'
  format: yml
  generatedFields:
    date:
      type: date
      options:
        format: "timestamp-seconds"
  moderation: false
  path: "_data/comments/{options.slug}"
  requiredFields: ['name', 'message']
  url: https://api.staticman.net/v1/entry/zwilder/Hack_Blog/master

Now, since the blog is accessible from GitHub, and the repository is public - I removed the email field. I don’t think anyone would appreciate their email being so easily accessible (something something security). The important part of this is the path variable - this saves comments in their own folder, named after the post they were generated from.

I added the comments into their very own partial HTML page in the _includes\ directory.

At the top of the comments.html page:

The forms were also not very complex - basic HTML forms, but the important bit is the name="fields[]" part. In the _config.yml file, notice that the fields declared are the same here.

Finally, for the fun part: Reading the comments into the file.

Broken down, the code basically checks to see if there is a folder in the comments directory (the path specified in _config.yml) - if there is, the comments are sorted and then looped through. For each comment, a variable is assigned for the name, date and message, and then with some fancy styling and HTML it is put into the post! Thats it!

I honestly didn’t believe it would be that easy - most of what took me time was formatting the forms and laying out the comments section in a pleasing (and hopefully easy to read!) manner. I took some inspiration from my terminal window as I was working - I think it actually looks pretty cool for comments. Staticman is the coolest thing, and I’m gonna have to go check out the source and maybe play around with it.

Now, for some fun obstacles - typing liquid code into a markdown page for Jekyll to process as highlighted code… yeah that doesn’t work. Fortunately, you can still use HTML, but then the post becomes a bit less human readable in it’s raw form. To get the HTML code to highlight I let Jekyll build the site with the liquid code processed, opened up the generated HTML file, copy-pasta’d it back into the markdown file, and changed the liquid code back to what it should be before Jekyll processed it. Kinda a pain, but definitely easier than doing all the highlighting by hand!