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.
Top comments (0)