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.

Blog

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

Be Hai Nguyen

Join Our Newsletter. No Spam, Only the good stuff.

Related