Skip to content

Instantly share code, notes, and snippets.

Last active March 10, 2024 09:40
Show Gist options
  • Save mwt/7b747b45d5e28e7a943490d7a3b8a4ff to your computer and use it in GitHub Desktop.
Save mwt/7b747b45d5e28e7a943490d7a3b8a4ff to your computer and use it in GitHub Desktop.
Jekyll include for utterances

Jekyll include for utterances

This is an include to use utterances comments on any Jekyll static site. It is fully compatible with GitHub Pages.

Basic usage

Add utterances.html to your /_includes folder. Put the following include statement in the part of your layout/page/post/include that you want the comments to be in:

{% include utterances.html %}

For most people, eg GitHub Pages users who want the default white theme, this is all you need to do.


You can customize utterances both globally (defaults for all comments) or locally (customization for comments on a particular page). Local settings override global settings.

Global settings are set in _config.yml like so:

  repo: "mwt/"
  issue-term: "pathname"
  label: ""
  theme: "github-light"

You can set local settings by using include parameters like so:

{% include utterances.html repo="mwt/" issue-term="pathname" label="" theme="github-light" %}

Common recipies

Name the issues "Comments: Page Title"

{%- assign issue-term = page.title | prepend: 'Comments: ' -%}
{% include utterances.html issue-term=issue-term %}

Use github-dark theme only on pages with dark: true in frontmatter

{%- capture theme -%}
{%- if page.dark -%}
{%- else -%}
{%- endif -%}
{%- endcapture -%}
{% include utterances.html theme=theme %}


In many themes that come with disqus support you can complete a basic configuration by replacing

{% if site.disqus %}
    {% include disqus.html %}
{% endif %}


{% include utterances.html %}
<script src=""
repo="{{ include.repo | default: site.utterances.repo | default: site.github.repository_nwo }}"
issue-term="{{ include.issue-term | default: site.utterances.issue-term | default: 'pathname' }}"
{%- if include.label or site.utterances.label -%}
label="{{ include.label | default: site.utterances.label }}"
{%- endif -%}
theme="{{ include.theme | default: site.utterances.theme | default: 'github-light' }}"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment