What is utteranc.es?

I frist saw these on Nick Tierney’s site.

The premise: What if your blog comment threads were just GitHub issue threads on your blog source repo? What if they were syncronised between Github and the footer of the your blog posts? Neat idea hey? You keep control of your data (relatively speaking) and there’s one less site to data mine and track your readers - yes this is a thing in Disqus. Booouuurrrnnns.

How did I get it working?

I didn’t. I fought and fought for some hours with the grid CSS in the Distill template and no matter what I tried my comments iframe always had 0 height. Then I had a big whinge to my colleague Anthony North who defied the grid using a html include with a javascipt payload that injects the Utterances iframe into the end of the article. Very hacky and very cool.

Here’s the HTML file which shouldn’t be too difficult to adapt to your own distill site if you have one.

You need to refer to it in your _site.yaml like:

output:
  distill::distill_article:
    css: mmstyle.css
    includes:
      in_header: utterances.html