Setting Up Giscus: An Ad-Free Alternative to Disqus for Blog Comments
Table of Contents
Why I Chose Giscus Over Disqus
I recently decided to add a commenting system to my blog. I remembered hearing about various dramas and issues with Disqus over the yearsโparticularly that they display advertisements on blogs using their free tier, and there have been privacy concerns. A detailed article by noraj on blog.raw.pm documents many of these issues, including forced ad injection, intrusive banner ads (700px ร 700px, violating industry standards), privacy violations (tracking without consent, facing a $3M fine in Norway), data breaches, and opaque revenue-sharing programs. So when I wanted to enable comments on my blog, I knew I didn’t want to use Disqus.
I wanted something that was:
- Ad-free by default
- Open source
- Free (no hidden costs)
After doing some research, I discovered Giscus , an open-source commenting system powered by GitHub Discussions.
About Giscus
Giscus is a comments system that uses GitHub Discussions to store and manage comments. It’s completely free, open-source, and doesn’t display any advertisements. All comments are stored in a GitHub repository’s Discussions section, giving you full control over your data. Since it’s powered by GitHub, it’s at least more transparent than proprietary solutions.
The Microsoft/GitHub Question
I know what you might be thinking: “But Microsoft owns GitHub. Are you comfortable with that?”
Honestly? I don’t really care. I’ve been a GitHub user for years, and it’s become an integral part of my workflow. Whether it’s Microsoft, Google, or any other tech giant, I’m already using their services daily. The important thing is that Giscus is open-source, transparent, and gives me control over my dataโunlike proprietary solutions that might change their terms or add ads later.
Prerequisites
Before setting up Giscus, you’ll need:
- A GitHub account (free)
- A public GitHub repository (or one where you can enable Discussions)
- A static website (Hugo, Jekyll, Next.js, etc.)
Step-by-Step Setup
Step 1: Create a Repository for Comments
First, create a new GitHub repository to host your blog comments. You can do this via the GitHub web interface or using the GitHub CLI:
gh repo create blog-comments --public --description "GitHub Discussions for blog comments"
Step 2: Enable GitHub Discussions
GitHub Discussions aren’t enabled by default. To enable them:
- Go to your repository on GitHub
- Click on Settings
- Scroll down to Features
- Check the box next to Discussions
- Click Save
Alternatively, you can enable Discussions via the GitHub API:
gh api repos/OWNER/REPO -X PATCH -f has_discussions=true
Step 3: Install the Giscus App
Giscus needs permission to access your repository to create discussions. Install the Giscus GitHub App:
- Visit https://github.com/apps/giscus
- Click Install or Configure
- Select your comments repository (or all repositories)
- Click Install
Step 4: Get Your Configuration
Now you need to get your repository and category IDs:
Repository ID:
gh api repos/OWNER/REPO | jq -r '.node_id'
Category IDs:
gh api graphql -f query='query { repository(owner: "OWNER", name: "REPO") { discussionCategories(first: 10) { nodes { id name } } } }' | jq -r '.data.repository.discussionCategories.nodes[] | "\(.id) \(.name)"'
Or, you can use the Giscus configuration page :
- Visit https://giscus.app/
- Enter your repository name (e.g.,
username/blog-comments) - Select your discussion category (usually “General”)
- Choose your preferences:
- Theme:
preferred_color_scheme(adapts to user’s system theme) - Language: Your preferred language
- Mapping:
pathname(creates one discussion per blog post URL) - Reactions: Enable or disable emoji reactions
- Input position:
bottom(comment box at the bottom)
- Theme:
- Copy the generated script
Step 5: Add Giscus to Your Blog
The integration method depends on your static site generator. Here’s how to do it for Hugo:
For Hugo
- Create a comments partial (
layouts/partials/comments.html):
{{- if not .Params.hideComments -}}
{{- $giscus := .Site.Language.Params.giscus -}}
{{- if and $giscus $giscus.repo $giscus.repoId -}}
<hr style="margin-top: 40px; margin-bottom: 40px;" />
<div style="max-width: 100%;">
<script src="https://giscus.app/client.js"
data-repo="{{ $giscus.repo }}"
data-repo-id="{{ $giscus.repoId }}"
data-category="{{ $giscus.category }}"
data-category-id="{{ $giscus.categoryId }}"
data-mapping="{{ default "pathname" $giscus.mapping }}"
data-strict="0"
data-reactions-enabled="{{ default "1" $giscus.reactionsEnabled }}"
data-emit-metadata="0"
data-input-position="{{ default "bottom" $giscus.inputPosition }}"
data-theme="{{ default "preferred_color_scheme" $giscus.theme }}"
data-lang="{{ default "en" $giscus.lang }}"
data-loading="lazy"
crossorigin="anonymous"
async>
</script>
</div>
{{- end -}}
{{- end -}}
- Include it in your post template (usually
layouts/_default/single.html):
{{- partial "comments.html" . -}}
- Add configuration to
config.toml:
[Languages.en-us.params.giscus]
repo = "username/blog-comments"
repoId = "YOUR_REPO_ID"
category = "General"
categoryId = "YOUR_CATEGORY_ID"
mapping = "pathname"
reactionsEnabled = "1"
inputPosition = "bottom"
theme = "preferred_color_scheme"
lang = "en"
For Other Static Site Generators
For Jekyll, Next.js, or other frameworks, simply add the script tag from giscus.app to your post template. The script will automatically handle comment creation and management.
Step 6: Test It Out
After adding the code:
- Build and deploy your site
- Visit a blog post
- Scroll to the bottom where the comments section should appear
- Try leaving a comment (you’ll need to sign in with GitHub)
- Check your repository’s Discussions section to see the comment
Benefits of Giscus
- ๐ซ No ads: Unlike Disqus, Giscus is completely ad-free
- ๐ Free: Completely free and open source
- ๐จ Customizable: Themes, languages, and more
- ๐ GitHub integration: Comments are stored in GitHub Discussions
- ๐ฑ Responsive: Works great on mobile devices
- ๐ Transparent: All comments are visible in your GitHub repository
How It Works
- Each blog post automatically creates or links to a GitHub Discussion
- Visitors can comment using their GitHub account
- All comments are stored in your repository’s Discussions section
- You can moderate, edit, or delete comments directly on GitHub
- Comments support Markdown formatting
Tips and Best Practices
- Moderation: Set up discussion moderators in your repository settings
- Categories: Organize comments by category (General, Announcements, etc.)
- Notifications: Enable GitHub notifications to stay updated on new comments
- Backup: Since comments are in GitHub, you can easily export them
- Transparency: Consider adding a note explaining that comments are stored on GitHub
Conclusion
Switching to Giscus was one of the best decisions I made for my blog. It’s free, ad-free, and integrates seamlessly with my existing GitHub workflow. While it requires visitors to have a GitHub account to comment, this is often acceptable for technical blogs where most readers are developers anyway.
If you’re looking for an alternative to Disqus that doesn’t display ads, I highly recommend giving Giscus a try.
Resources
- Giscus: https://giscus.app/
- Giscus GitHub: https://github.com/giscus/giscus
- GitHub Discussions: https://docs.github.com/en/discussions
- My Comments Repository: https://github.com/Chocapikk/blog-comments
- Why Not Disqus?: Disqus: End of Discussion - A detailed analysis of Disqus issues including forced ads, privacy violations, and security breaches
Have you tried Giscus or another commenting system? Let me know your experience in the comments below!