Introduction
Adding a comment system to your blog can significantly enhance engagement with your readers. Utterances, an open-source project, offers a lightweight solution that uses GitHub Issues to store comments. It’s free, requires no tracking, and you can integrate it into your blog in just minutes.
Why Utterances?
Unlike traditional comment platforms such as Disqus, which often come with privacy concerns and slow down page load times, Utterances offers a clean, privacy-conscious alternative. It stores comments in GitHub repositories, ensuring transparency and ease of moderation. No personal data tracking or ads are involved, and because it’s integrated with GitHub, many developers are already familiar with the interface.
Key Features
- Lightweight: No heavy scripts or font downloads, just plain vanilla JavaScript.
- Open-source: Completely free and transparent.
- Privacy-first: No tracking or ads.
- GitHub integration: Uses GitHub Issues for storing and managing comments.
- Customization: Supports dark/light themes and various configuration options.
Setting Up Utterances in Minutes
To set up Utterances on your blog, follow these steps:
Create a GitHub Repository: First, you need a public GitHub repository where the comments will be stored. This could be your blog’s repo or a dedicated one for comments.
Install the Utterances App: Visit utterances app and authorize the app to access your chosen repository. This allows the app to create GitHub Issues for each post.
Configure the Script: Generate a script using the configuration tool on the utteranc.es website. You can specify:
- Repo: The repository to store the comments.
- Issue term: This determines how issues are linked to blog posts, whether by URL, title, or pathname.
- Theme: Select a theme that matches your blog, like
github-light
orgithub-dark
.
Embed the Script: Copy and paste the generated script into your blog’s template where you want the comments section to appear, typically in the footer or post template. Here’s an example:
<script src="https://utteranc.es/client.js" repo="your-username/your-repo" issue-term="pathname" theme="github-light" crossorigin="anonymous" async> </script>
Test It Out: After adding the script, visit one of your blog posts and test the comment system. Users will need to sign in via GitHub to leave a comment, and each comment creates a corresponding issue in your repository.
Managing Comments
Once installed, managing comments is straightforward. All comments are stored as issues in your GitHub repo, where you can:
- Edit, delete, or lock comments directly from GitHub.
- Moderate and report comments like any GitHub Issue.
- Receive notifications for new comments if you’re watching the repository.
Limitations
While Utterances is powerful and simple, there are a few limitations:
- GitHub Account Requirement: Users must have a GitHub account to comment, which might deter non-developers.
- No External Platform Support: It only works with GitHub, not alternatives like GitLab or Bitbucket.
Video Tutorial and Sample Project
For a quick walkthrough on how to set up Utterances on your blog, check out this quick video tutorial. Additionally, I’ve created a sample project with an HTML file that demonstrates how to insert the Utterances script. You can explore the code on GitHub:
This tutorial will show you how to configure the script, install the Utterances app, and start managing your comments with ease, using the provided sample project as a reference.
Conclusion
Utterances provides a minimalistic and privacy-friendly solution for adding comments to your tech blog. Its integration with GitHub Issues offers developers an elegant way to handle comments without needing additional infrastructure. If your audience is familiar with GitHub, Utterances is a perfect fit for your blog. Best of all, you can set it up in just minutes.
For more information and configuration options, check out https://utteranc.es.
If you find it useful, consider giving a star to the Utterances Github Source Code