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.

024-feature-image.png
GitHub: Enable Comments 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="/"></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">behai-nguyen software development learnings and documentation</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">behai-nguyen software development learnings and documentation</li><li><a class="u-email" href="mailto:behai_nguyen@hotmail.com">behai_nguyen@hotmail.com</a></li></ul>
      </div>
	  
      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/behai-nguyen"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#github"></use></svg> <span class="username">behai-nguyen</span></a></li><li><a href="https://www.twitter.com/nguyen_behai"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#twitter"></use></svg> <span class="username">nguyen_behai</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Documentation of various aspects of software development that  I have been learning.</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.