Building a GitHub Pages Tech Blog with AI (3) - Setting up Giscus Comment System in 5 Minutes with MCP

💡 Solution (Ready-to-Use Code)

Problem: Adding comment system to Jekyll blog requires multiple service configurations and complex integration process Solution: MCP automates GitHub Issues + Giscus setup to instantly build complete comment system

# MCP execution results
├── _includes/comments.html          # ✅ Auto-generated
├── _layouts/post.html              # ✅ Auto-modified  
├── _config.yml                     # ✅ Giscus config added
└── assets/css/comments.scss        # ✅ Comment styling

📋 Implementation Method (3 Steps)

graph TD
    A[GitHub Repository] --> B[Enable Issues]
    B --> C[Install Giscus App]
    C --> D[MCP Auto-Setup]
    D --> E[Jekyll Integration]
    E --> F[Complete Comment System]
    
    style A fill:#f9f9f9
    style D fill:#e1f5fe
    style F fill:#c8e6c9

Step 1: GitHub Repository Preparation

Minimum manual setup required in GitHub:

Repository → Settings → Features
Check Issues checkbox ✅
Install Giscus app: https://github.com/apps/giscus
Grant repository permissions ✅

Step 2: Automatic Setup with MCP

MCP Prompt:
"Set up Giscus comment system for my Jekyll blog.

Repository info:
- GitHub username: kevinpark
- Repository: realcoding.github.io  
- Default language: en
- Theme: Match blog design

Required tasks:
1. Create _includes/comments.html
2. Add comment section to post.html layout
3. Add Giscus configuration to _config.yml
4. Style comment area

Generate and modify all files directly."

Step 3: Immediate Verification

# Restart local server
bundle exec jekyll serve

# Check comment section in post pages
# http://localhost:4000/posts/[post-name]

🔍 Why This Approach? (Simple Background)

Why Choose Giscus

Problems with existing comment systems:

Disqus: Advertising and privacy collection issues
Facebook Comments: Platform dependency
Self-hosted: Server management burden

Advantages of Giscus:

✅ GitHub account based (developer-friendly)
✅ Free and open source
✅ Complete integration with GitHub Issues
✅ Markdown support
✅ Responsive design

Core Value of MCP Automation

Manual Setup (30 minutes):

Generate configuration values on Giscus website
Copy/modify HTML code
Modify Jekyll layout files
Add CSS styling
Test configuration and debug

MCP Automation (5 minutes):

Input prompt
Verify auto-generated files
Test on local server

🛠️ Files Auto-Generated by MCP

1. _includes/comments.html

<!-- MCP auto-generation example -->
<div class="comments-section">
  <script src="https://giscus.app/client.js"
          data-repo="kevinpark/realcoding.github.io"
          data-repo-id="[AUTO_GENERATED_ID]"
          data-category="General"
          data-category-id="[AUTO_GENERATED_ID]"
          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>
</div>

2. Automatic Post Layout Modification

<!-- Auto-added to _layouts/post.html -->
<article class="post">
  {{ content }}
  
  {% if page.comments != false %}
    {% include comments.html %}
  {% endif %}
</article>

3. Configuration File Update

# Auto-added to _config.yml
comments:
  provider: giscus
  giscus:
    repo: "kevinpark/realcoding.github.io"
    repo_id: "[AUTO_GENERATED]"
    category: "General"
    category_id: "[AUTO_GENERATED]"
    mapping: "pathname"
    reactions_enabled: true
    theme: "preferred_color_scheme"

⚡ Advanced Customization

Comment Disable Option

# Disable comments for specific posts
---
layout: post
title: "Title"
comments: false  # Disable comments for this post
---

Dark Mode Integration

MCP auto-generated styles:

// assets/css/comments.scss
.giscus-frame {
  max-width: 100%;
  margin: 2rem 0;
}

@media (prefers-color-scheme: dark) {
  .giscus-frame {
    color-scheme: dark;
  }
}

🎉 Result Verification

Post-setup checklist:

✅ Comment section displays at bottom of posts
✅ Can write comments with GitHub login
✅ Auto-links to GitHub Issues
✅ Responsive design applied
✅ Dark mode theme synchronization

Next Step: Dark Mode Implementation

Now that the comment system is complete, next we’ll cover implementing dark/light mode toggle with MCP. We’ll create a theme system that perfectly integrates with Giscus comments.

📚 Complete Series List:

Previous in Series: Building a GitHub Pages Tech Blog with AI (2) - Complete Automation of SEO-Optimized Tech Posting with MCP

Next in Series: Building a GitHub Pages Tech Blog with AI (4) - Perfect Implementation of Dark/Light Mode with MCP