Home › Blog › How to Add Comments to Jekyll: Disqus vs Giscus vs Utterances
Tutorial

How to Add Comments to Jekyll: Disqus vs Giscus vs Utterances

Compare the three best comment systems for Jekyll sites — Disqus, Giscus, and Utterances. Setup guides, pros and cons, and which to choose.

Updated 6 min read
How to Add Comments to Jekyll: Disqus vs Giscus vs Utterances

Jekyll doesn’t have a built-in comment system — it’s a static site generator. But you have three solid options that work well with static sites. Here’s how each one works and which to choose.

The Three Options at a Glance

  Disqus Giscus Utterances
Backend Disqus servers GitHub Discussions GitHub Issues
Free plan Yes (with ads) Yes (free) Yes (free)
Requires GitHub No Yes Yes
Privacy Poor Good Good
Spam control Built-in GitHub moderation GitHub moderation
Anonymity Disqus account or guest GitHub account required GitHub account required
Setup difficulty Easy Medium Easy

Option 1: Disqus

Disqus is the most well-known comment system for static sites. It hosts all comments on its servers and loads them via a JavaScript embed.

Pros

  • No GitHub account required for commenters
  • Built-in spam filtering and moderation dashboard
  • Comment count display on post lists
  • Supports anonymous guest comments

Cons

  • Ads on free plan — Disqus shows ads in the comment area unless you pay ($11+/month)
  • Privacy concerns — Disqus tracks users across sites and shares data with advertisers
  • Performance hit — The Disqus script adds ~300KB to page load
  • Data lock-in — Your comments live on Disqus servers, not yours

Setup

  1. Create a free account at disqus.com
  2. Create a new site and note your shortname
  3. Add to _config.yml: 
    disqus:
  shortname: your-shortname
  4. Create _includes/comments-disqus.html: ```html

{% if page.comments != false %}

{% endif %}

5. Include in your post layout before `</article>`:
```liquid

{% include comments-disqus.html %}

Option 2: Giscus

Giscus uses GitHub Discussions as a comment backend. Comments appear both on your site and in your repo’s Discussions tab.

Pros

  • Completely free — no ads, no paid plans
  • Privacy-friendly — no tracking, no third-party data sharing
  • Beautiful UI — light/dark mode, reactions (👍 ❤️ 🎉)
  • Markdown support — commenters can use full GitHub Markdown
  • You own the data — comments live in your GitHub repo

Cons

  • Requires a GitHub account to comment — limits casual commenters
  • Slightly more complex setup than Utterances

Setup

Step 1: Enable GitHub Discussions on your repository. Go to repo Settings → General → Features and check Discussions.

Step 2: Install the Giscus app on your repository.

Step 3: Go to giscus.app to generate your configuration. Fill in your repository name and choose a mapping (recommended: pathname).

You will get a script like:

<script src="https://giscus.app/client.js"
  data-repo="username/repo"
  data-repo-id="R_xxxxx"
  data-category="Comments"
  data-category-id="DIC_xxxxx"
  data-mapping="pathname"
  data-reactions-enabled="1"
  data-theme="preferred_color_scheme"
  crossorigin="anonymous"
  async>
</script>

Step 4: Create _includes/comments-giscus.html with that script.

Step 5: For dark mode support, use the data-theme attribute dynamically:

<script>
  const theme = localStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
  document.write(`<script src="https://giscus.app/client.js"
    data-repo="username/repo"
    data-repo-id="R_xxxxx"
    data-category="Comments"
    data-category-id="DIC_xxxxx"
    data-mapping="pathname"
    data-theme="${theme}"
    crossorigin="anonymous"
    async><\/script>`);
</script>

Step 6: Add to your post layout:


{% if page.comments != false %}
  {% include comments-giscus.html %}
{% endif %}

Option 3: Utterances

Utterances uses GitHub Issues as its backend. Each page gets a GitHub Issue, and comments are issue replies.

Pros

  • Free and ad-free
  • Simplest setup — one script tag
  • Good for developer-oriented blogs where commenters have GitHub accounts

Cons

  • Requires GitHub account to comment
  • Comments go into GitHub Issues — can look messy in your repo
  • No reactions or rich UI (compared to Giscus)
  • GitHub Issues was not designed for comments, and it shows

Setup

  1. Install the Utterances app on your repository
  2. Create _includes/comments-utterances.html: ```html

{% if page.comments != false %} {% endif %}

3. Add to your post layout.

For dark mode:
```html
<script src="https://utteranc.es/client.js"
  repo="username/repo-name"
  issue-term="pathname"
  theme="github-dark"
  crossorigin="anonymous"
  async>
</script>

Which Should You Choose?

Choose Giscus if:

  • Your audience has GitHub accounts (developers, tech readers)
  • You care about privacy and not having ads
  • You want reactions and a modern UI
  • You want the best long-term option

Choose Disqus if:

  • Your audience is non-technical and won’t have GitHub accounts
  • You need anonymous/guest commenting
  • You don’t mind the free plan ads (or can afford the paid plan)

Choose Utterances if:

  • You want the simplest possible setup
  • Your site is developer-focused and GitHub Issues don’t bother you
  • You are already using GitHub Issues for other tracking

Our recommendation: Giscus for most developer blogs. The UI is better than Utterances, it’s privacy-friendly, completely free, and requiring a GitHub account is not a drawback for a technical audience.

Making Comments Optional Per Post

For posts where you don’t want comments, add to front matter:

comments: false

This works with the {% if page.comments != false %} check in all the includes above.

Browse Jekyll themes on JekyllHub — several themes include pre-configured comment system support.

jekyll comments giscus jekyll disqus jekyll utterances jekyll static site comments
Share LinkedIn