Top Related Projects
Quick Overview
Utterances is a lightweight commenting system for static websites and blogs. It uses GitHub issues as a backend, allowing users to comment on web pages using their GitHub accounts. This open-source project provides a simple and customizable solution for adding comments to static sites without the need for a dedicated database or server-side infrastructure.
Pros
- Easy integration with static websites and GitHub Pages
- No need for a separate database or server infrastructure
- Lightweight and fast-loading comment system
- Customizable appearance through CSS
Cons
- Requires users to have a GitHub account to comment
- Limited moderation features compared to dedicated commenting systems
- Potential privacy concerns as comments are stored as public GitHub issues
- May not be suitable for high-traffic websites due to GitHub API rate limits
Code Examples
- Basic implementation:
<script src="https://utteranc.es/client.js"
repo="[ENTER REPO HERE]"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async>
</script>
- Custom issue mapping:
<script src="https://utteranc.es/client.js"
repo="[ENTER REPO HERE]"
issue-term="title"
label="comments"
theme="github-dark"
crossorigin="anonymous"
async>
</script>
- Using a specific issue number:
<script src="https://utteranc.es/client.js"
repo="[ENTER REPO HERE]"
issue-number="1"
theme="photon-dark"
crossorigin="anonymous"
async>
</script>
Getting Started
- Create a GitHub repository for storing comments.
- Go to https://github.com/apps/utterances and install the Utterances app on your repository.
- Add the following script to your website's HTML where you want comments to appear:
<script src="https://utteranc.es/client.js"
repo="[YOUR-USERNAME/YOUR-REPO-NAME]"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async>
</script>
Replace [YOUR-USERNAME/YOUR-REPO-NAME] with your GitHub username and repository name. Customize the issue-term and theme attributes as needed.
Competitor Comparisons
A comment system powered by GitHub Discussions. :octocat: :speech_balloon: :gem:
Pros of giscus
- Uses GitHub Discussions, providing better organization and threading capabilities
- Supports reactions and emoji responses
- Offers more customization options for appearance and behavior
Cons of giscus
- Requires GitHub Discussions to be enabled on the repository
- May have a steeper learning curve for initial setup
- Potentially more complex to migrate existing comments
Code Comparison
utterances:
<script src="https://utteranc.es/client.js"
repo="[ENTER REPO HERE]"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async>
</script>
giscus:
<script src="https://giscus.app/client.js"
data-repo="[ENTER REPO HERE]"
data-repo-id="[ENTER REPO ID HERE]"
data-category="[ENTER CATEGORY NAME HERE]"
data-category-id="[ENTER CATEGORY ID HERE]"
data-mapping="pathname"
data-reactions-enabled="1"
data-emit-metadata="0"
data-theme="light"
crossorigin="anonymous"
async>
</script>
Both utterances and giscus are popular comment systems for static websites, leveraging GitHub's infrastructure. While utterances uses GitHub Issues, giscus utilizes GitHub Discussions, offering more advanced features at the cost of slightly more complex setup.
Gitalk is a modern comment component based on Github Issue and Preact.
Pros of Gitalk
- Supports multiple languages and internationalization
- Offers more customization options for appearance and functionality
- Includes features like pagination and comment reactions
Cons of Gitalk
- Requires more setup and configuration compared to Utterances
- May have performance issues with a large number of comments
- Relies on GitHub issues, which can clutter the repository's issue tracker
Code Comparison
Utterances:
<script src="https://utteranc.es/client.js"
repo="[ENTER REPO HERE]"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async>
</script>
Gitalk:
<div id="gitalk-container"></div>
<script>
const gitalk = new Gitalk({
clientID: 'GitHub Application Client ID',
clientSecret: 'GitHub Application Client Secret',
repo: 'GitHub repo',
owner: 'GitHub repo owner',
admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
id: location.pathname, // Ensure uniqueness and length less than 50
distractionFreeMode: false // Facebook-like distraction free mode
})
gitalk.render('gitalk-container')
</script>
Both Utterances and Gitalk are comment systems for static websites that use GitHub issues as a backend. Utterances is simpler to set up and use, while Gitalk offers more features and customization options at the cost of increased complexity.
A comment system based on GitHub Issues.
Pros of Gitment
- Lightweight and easy to set up
- Supports Markdown in comments
- Allows customization of the UI through CSS
Cons of Gitment
- Requires users to have GitHub accounts to comment
- Limited features compared to Utterances
- Less active development and community support
Code Comparison
Gitment initialization:
var gitment = new Gitment({
id: 'page-id',
owner: 'your-github-username',
repo: 'your-repo-name',
oauth: {
client_id: 'your-client-id',
client_secret: 'your-client-secret',
},
});
gitment.render('comments');
Utterances configuration:
<script src="https://utteranc.es/client.js"
repo="your-github-username/your-repo-name"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async>
</script>
Both Gitment and Utterances are comment systems that use GitHub issues for storing comments. Utterances has gained more popularity due to its simpler setup, better integration with GitHub, and more active development. Gitment offers more customization options but requires users to have GitHub accounts, which may limit participation. Utterances provides a smoother user experience and doesn't require OAuth credentials, making it easier to implement and maintain.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
utterances ð®
A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more!
- Open source. ð
- No tracking, no ads, always free. ð¡ð«
- No lock-in. All data stored in GitHub issues. ð
- Styled with Primer, the css toolkit that powers GitHub. ð
- Dark theme. ð
- Lightweight. Vanilla TypeScript. No font downloads, JavaScript frameworks or polyfills for evergreen browsers. ð¦ð²
how it works
When Utterances loads, the GitHub issue search API is used to find the issue associated with the page based on url, pathname or title. If we cannot find an issue that matches the page, no problem, utterances-bot will automatically create an issue the first time someone comments.
To comment, users must authorize the utterances app to post on their behalf using the GitHub OAuth flow. Alternatively, users can comment on the GitHub issue directly.
configuration
sites using utterances
Are you using utterances? Add the utterances topic on your repo!
try it out ððð
Top Related Projects
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot