Using CommentBox in Jekyll Site

Recently, I decided to ditch Disqus because they’re now forcing ads even on old users.

I found a good alternative called CommentBox.

Now I needed to figure out how to integrate it into my Jekyll site on GitHub Pages.

So here’s how.

Update _config.yml

We need to add a new configuration key to the _config.yml file. We’ll use it to store the value from the CommentBox settings.

# CommentBox Comments
commentbox:
  # Leave project_id blank to disable comments site-wide.
  # Disable comments for any post by adding `comments: false` to that post's YAML Front Matter.
  project_id: 1234-proj

Replace project_id with the value you get from CommentBox after creating a new project.

CommentBox Component for Jekyll

Now let’s create a dedicated Jekyll component for our site.

Name it commentbox_comments.html and place it under the following path:

_includes/components/commentbox_comments.html

Modify the file and add the basic code below to display the CommentBox comment system on your Jekyll static site:

{% if page.comments != false and jekyll.environment == "production" %}
<div class="commentbox"></div>
<script src="https://unpkg.com/commentbox.io/dist/commentBox.min.js"></script>
<script>commentBox('{{ site.commentbox.project_id }}')</script>
{% endif %}
{% if page.comments != false and jekyll.environment != "production" %}
<p>CommentBox is disabled for non-production environments</p>
{% endif %}

This simple component will work only in production and when the project_id is set. If the project_id isn’t set, your Jekyll site won’t show anything.

Update default.html

Normally, we want to show comments on individual posts.

In Jekyll, we can do that by editing the _layouts/default.html file.

Add the following snippet right below {{ content }}:

{% if site.commentbox.project_id %}
    {% include components/commentbox_comments.html %}
{% endif %}

The next time you build your Jekyll site, you should see CommentBox integrated into your posts.

Conclusion

That’s it for today. Thanks for reading!

As usual, if you have any questions or a better method, leave a comment below. Thanks for reading, and see you next time!