🌿💻 The Packets Garden

How to Integrate Giscus Comments in Quartz v4

🌱 🪴 ⏱️ 2 min read

This is a IA generated note with the summary of the steps I took to achieve the integration of giscus with Quartz

🧩 Goal

Enable per-note Giscus-based comments on a Quartz v4 site, using frontmatter like comments: true to control visibility.

⚙️ Requirements

  • A Quartz v4 site already set up
  • A GitHub repository with Discussions enabled
  • Your Giscus repoId and categoryId values (generated at giscus.app)

🛠️ Steps

1. Configure Giscus

Visited https://giscus.app and set:

  • My GitHub repo (e.g. CarlosLRamirez/notes)
  • I Created and selected a Comments category
  • I Set mapping to pathname
  • Copy my repoId and categoryId

This is the code block generated by giscuss.app

<script src="https://giscus.app/client.js"
        data-repo="CarlosLRamirez/notes"
        data-repo-id="R_kgDOOXCNEw"
        data-category="Announcements"
        data-category-id="DIC_kwDOOXCNE84Cqt0D"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="en"
        crossorigin="anonymous"
        async>
</script>

2. Add the Comments component in quartz.layout.ts

Open quartz.layout.ts and in the defaultContentPageLayout, add the Comments block inside the afterBody section:

afterBody: [
  Component.ConditionalRender({
    component: Component.Comments({
      provider: "giscus",
      options: {
        repo: "CarlosLRamirez/notes",
        repoId: "R_kgDOOXCNEw",
        category: "Comments",
        categoryId: "DIC_kwDOOXCNE84Cqt0z",
        mapping: "pathname",
        strict: true,
        reactionsEnabled: true,
        inputPosition: "bottom",
        lightTheme: "light",
        darkTheme: "dark",
      }
    }),
    condition: (page) => page.fileData.frontmatter?.comments === true,
  }),
],

💡 Note: Even if VS Code shows a warning about afterBody not being part of PageLayout, Quartz will still render it correctly.

3. Enable comments in specific notes

In your Obsidian notes, include the following in the frontmatter:

comments: true

4. Preview and verify

Run Quartz locally:

npx quartz build --serve

Visit a note with comments: true and confirm Giscus is displayed after the main content.

✅ Result

  • Comments appear only where you want them
  • Rendered at the bottom of each note
  • Clean integration — no changes to Comments.tsx required
  • Fully Quartz-native setup and future-proof

✍️ Author

Carlos Leonel Ramírez — @CarlosLRamirez
Digital garden: carloslramirez.com/notes

Graph View