GitHub: Enable Comments Using https://utteranc.es/ Comment Widget.

I've been blogging with GitHub for a bit, please see https://behai-nguyen.github.io/. In this post, we discuss how to enable comments for GitHub repositories using https://utteranc.es/ comment widget.

This is how I did it:

❶ Install utterances app for the target GitHub repo via the following link https://github.com/apps/utterances/installations/new -- the instructions should be self-explanatory. After each step, please read the on screen instructions carefully.

❷ I'd like to enable comments for my GitHub Pages, so the repo I selected is https://github.com/behai-nguyen/behai-nguyen.github.io. The plugin snippet is customised like below:

<script src="https://utteranc.es/client.js"
    repo="behai-nguyen/behai-nguyen.github.io "
    issue-term="pathname"
    label="Comment"
    theme="github-light"
    crossorigin="anonymous"
    async>
</script>

❸ The Jekyll -- https://jekyllrb.com/ theme I'm using is minima 2.5.1 -- https://rubygems.org/gems/minima/versions/2.5.1 , I modified the footer.html file to include the plugin snippet as shown:

File: \_includes\footer.html

<footer class="site-footer h-card">
  <data class="u-url" href="{{ "/" | relative_url }}"></data>

  <div class="wrapper">

    <div class="utterances">
        <script src="https://utteranc.es/client.js"
            repo="behai-nguyen/behai-nguyen.github.io"
            issue-term="pathname"
            label="Comment"
            theme="github-light"
            crossorigin="anonymous"
            async>
        </script>     
    </div>

    <h2 class="footer-heading">{{ site.title | escape }}</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">
            {%- if site.author -%}
              {{ site.author | escape }}
            {%- else -%}
              {{ site.title | escape }}
            {%- endif -%}
            </li>
            {%- if site.email -%}
            <li><a class="u-email" href="mailto:{{ site.email }}">{{ site.email }}</a></li>
            {%- endif -%}
        </ul>
      </div>

      <div class="footer-col footer-col-2">
        {%- include social.html -%}
      </div>

      <div class="footer-col footer-col-3">
        <p>{{- site.description | escape -}}</p>
      </div>
    </div>

  </div>

</footer>

Of course, you can place it anywhere you like.

❹ After update GitHub repo with the change, we might need to issue the followings to get it to rebuild:

git commit --allow-empty -m "Trigger rebuild"
git push

Please note the followings:

• The Utterances Widget -- https://utteranc.es/ supports Markdown Styling -- see Markdown Here Cheatsheet.
• To comment, users must sign into their GitHub account. Anonymous users are not supported.
• It seems that after submitting comments, users can't edit them. Only the GitHub repo owners can edit comments ( or issues ).
• Comments are stored as issues inside the target GitHub repo -- we, as target repo owner, can manage these issues.

I hope you get something out of this post... If you happen to read it on GitHub and found it useful, please give me a comment 😆... and thank you for reading.