Add comments to a Jekyll site

Jekyll powers a large share of GitHub Pages blogs, and GitHub Pages cannot run server code, which makes an embedded comment widget the only practical option. Connect integrates as an include.

1. Create the include

Create _includes/comments.html:

<div id="hakanai-connect"></div>
<script async src="https://connect.hakanai.io/embed.js"
  data-key="YOUR_SITE_KEY"
  data-page-id="{{ page.url }}"></script>

Replace YOUR_SITE_KEY with the public key from your dashboard.

2. Include it in your post layout

In _layouts/post.html, after the content:

{% unless page.comments == false %}
  {% include comments.html %}
{% endunless %}

The unless guard lets you turn comments off on any post from its front matter:

---
title: "My post"
comments: false
---

If you would rather opt in per post instead of opting out, invert the logic with {% if page.comments %}.

About the page id

The snippet uses {{ page.url }} as the page identity. It follows your permalink configuration, so it is stable as long as that configuration does not change. If you expect to restructure URLs, prefer a value that never moves, such as the post slug:

data-page-id="{{ page.slug }}"

Whatever you choose, choose once: changing the page id scheme later detaches existing comments.

Comment counts on list pages

On your homepage or archive pages, add a counter element inside the posts loop:

{% for post in site.posts %}
  ...
  <span data-connect-count="{{ post.url }}"></span>
{% endfor %}

Then follow the comment counts guide. Use the same values as your page ids so counts and threads match.

GitHub Pages

Nothing special is needed. The include above is plain HTML, works with the default GitHub Pages build, and requires no plugin, which matters since GitHub Pages runs Jekyll in safe mode with a restricted plugin list.

Local preview

jekyll serve runs on localhost, which is not one of your declared domains, so comment submission is rejected there. Reading works. Add your staging domain under Site settings if you want to test posting before going live.