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.
![]() |
---|
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.