Building Community: Adding Comments to the Zenith Blog

When building a blog, one of the most important features is the ability for readers to engage with your content. Today, I'm excited to share how I implemented a commenting system for the Zenith Reborn blog using Giscus—a GitHub Discussions-based solution that prioritizes privacy, performance, and ease of use.

Why Comments Matter

A blog without comments is a one-way conversation. Comments allow readers to:

• Share their thoughts and experiences
• Ask questions and get clarification
• Suggest improvements or alternative approaches
• Build a community around shared interests

But implementing comments comes with challenges: spam management, privacy concerns, infrastructure costs, and moderation overhead.

The Search for the Right Solution

I evaluated several commenting solutions:

Third-party platforms like Disqus are popular but come with privacy concerns—they track users across sites and inject ads. That's a non-starter for a privacy-focused blog.

Custom solutions using databases (Postgres, Supabase) and authentication (NextAuth.js) offer full control but require significant development time and ongoing maintenance.

GitHub-based solutions like Utterances (uses GitHub Issues) and Giscus (uses GitHub Discussions) struck the perfect balance: free, open source, privacy-friendly, and minimal maintenance.

I chose Giscus because GitHub Discussions are specifically designed for conversations, unlike Issues which are meant for bug tracking.

Implementation Details

The Technology Stack

The implementation uses three key pieces:

1. @giscus/react (v3.1.0) - Official React component for Giscus
2. GitHub Discussions - Storage for all comments (you own the data!)
3. GitHub OAuth - Secure authentication (users sign in with GitHub)

Component Architecture

I created a reusable GiscusComments component that matches the Zenith blog's phoenix theme:

// components/blog/GiscusComments.tsx
"use client";

import Giscus from "@giscus/react";

export default function GiscusComments() {
  return (
    <section className="border-primary-gold/20 mt-16 border-t pt-12">
      <div className="mx-auto max-w-4xl">
        <h2 className="font-playfair from-primary-gold via-primary-orange to-primary-amber mb-8 bg-gradient-to-r bg-clip-text text-3xl font-bold text-transparent">
          Comments
        </h2>

        <div className="rounded-lg bg-neutral-darkBg/50 p-6">
          <Giscus
            id="comments"
            repo="YOUR_REPO"
            repoId="YOUR_REPO_ID"
            category="Blog Comments"
            categoryId="YOUR_CATEGORY_ID"
            mapping="pathname"
            reactionsEnabled="1"
            theme="transparent_dark"
            loading="lazy"
          />
        </div>
      </div>
    </section>
  );
}

The component features:

• Phoenix gradient heading matching the site's gold-to-orange-to-red color scheme
• Transparent dark theme that blends seamlessly with the blog design
• Lazy loading for optimal performance—comments load only when users scroll to them

Integration Strategy

I integrated the comments section strategically in the blog post layout:

Blog Content (MDX)
    ↓
Author Section
    ↓
Comments Section ← NEW!
    ↓
Related Posts
    ↓
Navigation

This placement encourages discussion after readers finish the post but before they navigate away to related content.

Key Features

Privacy-First Design

Unlike traditional commenting platforms, Giscus:

• No tracking cookies - Fully GDPR compliant
• No ads - Clean, distraction-free experience
• No data mining - GitHub handles authentication, nothing more
• You own the data - All comments stored in your GitHub repository

Performance Optimization

Performance was a top priority:

Lazy loading: The Giscus script loads only when users scroll to the comments section. This keeps the initial page load fast—blog posts remain at just 112 kB First Load JS.

Minimal bundle size: The @giscus/react package adds only ~15 kB gzipped to the client bundle.

Static generation: Blog posts are still pre-rendered at build time using Next.js 15's generateStaticParams(), so comments don't impact SSG.

Built-in Moderation

Since comments are GitHub Discussions, moderation is straightforward:

• Edit or delete comments via GitHub's interface
• Lock discussions to prevent new comments
• Hide spam with GitHub's built-in tools
• Use your existing GitHub permissions model

User Experience

For readers, the experience is seamless:

1. Read the blog post
2. Scroll to the comments section
3. Click "Sign in with GitHub"
4. Leave a comment, reaction, or reply

GitHub handles notifications, so users get email alerts when someone replies to their comments.

The Results

The implementation added:

• 437 new lines of code across 7 files
• 1 new dependency (@giscus/react)
• 0 performance impact on initial page load (thanks to lazy loading)
• Full comment functionality with zero maintenance required

Technical Challenges

Challenge 1: Theme Integration

Problem: Giscus provides several built-in themes, but none matched the Zenith phoenix color scheme perfectly.

Solution: I used the transparent_dark theme, which blends with the site's dark background, and wrapped it in a container with the phoenix gradient heading. The result looks native to the site.

Challenge 2: Performance Impact

Problem: Adding third-party scripts can slow down page loads, hurting Core Web Vitals.

Solution: Giscus supports lazy loading out of the box. The component loads only when visible in the viewport, keeping Lighthouse scores at 100/100.

Challenge 3: Configuration Complexity

Problem: Setting up GitHub Discussions, installing the Giscus app, and getting the correct IDs can be confusing for future reference.

Solution: I created comprehensive documentation in GISCUS_SETUP.md with step-by-step instructions, troubleshooting tips, and testing checklists.

What I Learned

1. GitHub Discussions are powerful - They're not just for open source projects; they work great for blog comments too.

2. Privacy and features aren't mutually exclusive - Giscus proves you can have robust commenting without tracking users.

3. Lazy loading is essential - Modern web performance requires loading non-critical features only when needed.

4. Open source infrastructure - Building on GitHub's free infrastructure (Discussions, OAuth, notifications) reduces maintenance burden significantly.

The Developer Experience

From a development perspective, the implementation was remarkably smooth:

1. Install package: npm install @giscus/react
2. Create component: ~70 lines of React code
3. Configure GitHub: Enable Discussions, install Giscus app
4. Deploy: Automatic with Vercel

Total implementation time: ~2 hours including testing and documentation.

Conclusion

Adding comments to the Zenith blog was a deliberate choice to prioritize community engagement without sacrificing privacy or performance. Giscus proved to be the perfect solution—it's free, open source, privacy-friendly, and requires virtually no maintenance.

If you're building a blog and want to add comments, I highly recommend considering Giscus, especially if your audience is technical (since they likely already have GitHub accounts).

The comment system is now live on all blog posts. I'd love to hear your thoughts—scroll down and leave a comment below!