Add comments to Astro

Astro and comments

Astro ships almost no JavaScript by default and renders your pages to static HTML, which is why Astro sites tend to score well on performance. That same design means Astro has no backend to store comments. To add discussion you bring in a hosted service that stores the data and renders into your page with a small script.

Gabden fits Astro's priorities. The embed is around 10KB and loads asynchronously, so it does not undo the speed you get from Astro's minimal-JavaScript approach. Each thread is keyed to the page's canonical URL, and there are no tracking cookies or fingerprinting.

Create a Comments component

Astro uses components, so wrap the embed in one and reuse it. Create src/components/Comments.astro:

<div id='gabden-conversations'></div>
<script async src='https://YOUR-SITE.gabden.com/conversations.js'
  data-page='canonical'
  data-theme='auto'></script>

Replace YOUR-SITE with the key from your Gabden dashboard, which you copy once per website. Astro renders the markup in this component to the page as-is, and the async script tag loads the widget in the browser. You do not need a client directive here, because the widget is driven by its own script rather than by an Astro island.

Use it in your post layout

Most Astro blogs render posts through a layout, often src/layouts/BlogPost.astro or similar. Import the component and place it after the post content:

---
import Comments from '../components/Comments.astro';
---
<article>
  <slot />
</article>
<Comments />

Now every post rendered through that layout gets a thread, and because Gabden keys each discussion to the page URL, each post gets its own separate conversation without any extra setup.

Content collections and per-post control

Many Astro blogs use content collections with frontmatter. You can add a flag to control comments per post. Define it in your collection schema, then read it in the layout to decide whether to render the component:

---
const { comments = true } = Astro.props;
---
{comments && <Comments />}

Set comments: false in the frontmatter of any post that should not have a thread. Gabden also lets you disable comments on specific URLs from the dashboard, which is a second layer that does not require a rebuild.

Canonical URLs in Astro

Gabden keys each thread to the page's canonical URL. Astro derives URLs from your site config value and your file structure, so set site to your real production domain in astro.config.mjs before you publish. Two checks save trouble later:

• Use your production domain in the config, not a local dev address, so threads created in testing do not use a different key than your live pages.
• Be consistent about trailing slashes. Astro has a trailingSlash option. Pick one form so a page is not reachable as two slightly different URLs that read as two threads.

Build and verify

Run your build and deploy. Load a published post and confirm the thread renders below the content. Post a test comment, then open the Gabden dashboard to choose how comments are handled: pre-moderate everything, auto-approve, or auto-approve returning verified people while holding anonymous posts for review. A blocked-word filter and a spam queue handle the routine problems.

Readers can comment anonymously, as a guest with name and email, or by signing in with Google or GitHub. Replies are threaded and readers can react with a like or a heart, none of which requires an account for the basic case.

Theme and cost

Gabden has light and dark themes with presets, so you can match the widget to your Astro design. On price, it is free up to 100,000 widget views per month per website with a small "Powered by Gabden" mark, and Plus is 5 dollars per month per website for unlimited views and no mark.

To get your Gabden subdomain, create an account. If you also run other static generators, the same one-script pattern is covered for Hugo, and the trade-offs across generators are in the best commenting system for static sites.