How to Add Comments to an Astro Blog (Free, With Giscus)

A static blog has no database, so where do comments go? Giscus puts them in GitHub Discussions. Your page shows a comment box. When someone comments, Giscus creates a discussion in a repository you pick and shows the replies on your page. Free, no spam to speak of, and about 20 lines.

Step 1: Turn on Discussions

On GitHub, open your repository, go to Settings, scroll to Features, and tick Discussions. GitHub creates a few categories for you, including one called General.

Step 2: Install the Giscus app

Go to github.com/apps/giscus and click Install. Choose the repository from step 1. This lets Giscus create discussions on your behalf.

Step 3: Get your settings

Go to giscus.app. Type your repository name, like yourname/yourrepo. Giscus checks that Discussions is on and the app is installed, then shows green ticks.

Choose:

• Mapping: “Discussion title contains page pathname”. Each page gets its own thread.
• Category: General.

Scroll down. Giscus shows a <script> tag filled in with your details. Copy it.

Step 4: Make a component

Create src/components/Comments.astro and paste the script in. Add is:inline to the tag so Astro leaves it as written:

<section aria-label="Comments">
  <script is:inline src="https://giscus.app/client.js"
    data-repo="yourname/yourrepo"
    data-repo-id="R_kgDO..."
    data-category="General"
    data-category-id="DIC_kwDO..."
    data-mapping="pathname"
    data-strict="0"
    data-reactions-enabled="1"
    data-emit-metadata="0"
    data-input-position="bottom"
    data-theme="light"
    data-lang="en"
    crossorigin="anonymous"
    async></script>
</section>

Use the values Giscus gave you. The data-repo-id and data-category-id lines are the ones people copy wrong.

Step 5: Put it on your posts

Open the layout your blog posts use and add two lines:

---
import Comments from '../components/Comments.astro';
---

Then, below the post content:

<Comments />

Run npm run build. The script tag appears in each post’s HTML. On our test site, built with Astro 7.4, it did.

Step 6: Check it live

Publish your site and open a post. You’ll see the Giscus box with a Sign in with GitHub button. Sign in, leave a comment, and look in your repository’s Discussions tab. A new discussion with the page’s path as its title is waiting there.

If your readers don’t have GitHub

Giscus is perfect for a coding blog and wrong for a cooking blog. For a general audience, look at a hosted comment service with email sign-in. Most charge a few dollars a month. We don’t have a free one we’re happy to recommend yet. When we do, it’ll be here.

Where to go next

• How to add a blog to Astro, if you don’t have posts yet.
• How to start a newsletter, the other way readers talk back.

Frequently asked questions

Do readers need a GitHub account to comment?

Yes. That's the trade-off. It keeps spam near zero, and your readers who code already have one. If your audience isn't technical, a different tool may fit better.

Is Giscus really free?

Yes. It's open source and uses GitHub's own Discussions feature. There's nothing to pay.

Where do the comments live?

In the Discussions tab of a public GitHub repository you choose. You can moderate them there like any discussion.