Add giscus to your Private GitHub repository blog for commenting

3 min readJun 20, 2024

So I recently added giscus to my kubernetes blog unyaml.com and I am here to share the process.

Note:

If you blog content on private github repository and you want to add commenting feature on your blog (public), you can’t do that. It will work but only the person who has access to your repo (private) will be able to commit.

My blog repo is private and so to add public commenting feature to it, i made a new public repo and configured giscus to it and then used that giscus componet and added it to my private site.

Oh, and my blog is built using nextjs.

This is how giscus works.

You add giscus app to your repo.
You enable discussions on your public repo.
You get the creds for the component, something like this

// Comments.tsx
import Giscus from '@giscus/react';
import React from 'react';
import { useTheme } from 'next-themes';


export default function Comments() {
    const { theme } = useTheme();


    return (
        <Giscus
            id="comments"
            repo="zriyansh/unyaml-blog-comments"
            repoId="R_kgXXXXXXXw"
            data-category="Q&A"
            data-category-id="DIC_xxxxxxxXd84CgN06"
            mapping="title"
            term="abcd!"
            reactionsEnabled="1"
            emitMetadata="0"
            inputPosition="top"
            theme={theme === 'dark' ? 'dark' : 'light'}
            lang="en"
            loading="lazy"
        />
    );
}

// modify the values as per your wish.
// use https://giscus.app/ to get the repoId and data-category-id.

4. Add the component to your nextjs / react codebase.

5. Add it to the blog/post layout after importing.

index.tsx
import { PropsWithChildren } from 'react';
import WithTableOfContents from '@/components/layouts/WithTableOfContents';
import Head from '@/components/meta/Head';
import SkipNavigation from '@/components/navigations/SkipNavigation';
import PageHeader from '@/components/PageHeader';

import { getPostOgImageUrl, getPostStructuredData } from '@/helpers/post';

import PostFooter from '@/contents-layouts/Post/PostFooter';
import PostMeta from '@/contents-layouts/Post/PostMeta';
import Comments from '@/components/Comments'
import type { TPostFrontMatter, TTableOfContents } from '@/types';

interface PostProps {
  frontMatter: TPostFrontMatter;
  tableOfContents: TTableOfContents;
}

function Post({
  frontMatter: { title, description, caption, category, date, lang, tags, authors },
  tableOfContents,
  children = null,
}: PropsWithChildren<PostProps>) {
  // get og image urls
  const postOgImages = getPostOgImageUrl({
    category: caption || category,
    title,
    date,
    lang,
    tags,
    authors,
  });

  // get structured data
  const structuredData = getPostStructuredData({
    title,
    dateModified: date,
    datePublished: date,
    images: [postOgImages['1/1'], postOgImages['4/3'], postOgImages['16/9']],
  });

  return (
    <>
      <Head
        title={title}
        description={description}
        ogImage={postOgImages.default}
        structuredData={structuredData}
      />
      <SkipNavigation />
      <PageHeader title={title} description={description} caption={caption} />
      <PostMeta date={date} lang={lang} authors={authors} />
      <WithTableOfContents tableOfContents={tableOfContents}>
        {children}
        <PostFooter tags={tags} category={category} />
        <Comments /> // HERE IS THE GISCUS COMMENT COMPONENT
      </WithTableOfContents>
      {/* <WithReactions contentTitle={title} contentType="POST" /> */}
    </>
  );
}

export default Post;

Thats all there is to it. Now it should be there in all your blogs.

I use `pages/blog/blog1.mdx` based routing and not app based routing for my blog.

Start by visiting https://giscus.app/ and providing the repo name and the kind of discussion you want to create.

giscus stores the comments in your repo’s discussion.

Select the below option

Discussion title contains page <title>giscus will search for a discussion whose title contains the page’s <title> HTML tag.

Now,

giscus will map the content between the <title> to the name of the discussion.

Your comment box wont work if your discussion is not names exactly / contains the words same as the content inside <title>. If you dont want to use title, there are other options such as url, pathname, etc above for you to choose from. Title works for me personally.

Ex —

Note: This repo should be public, you blog content can be private if you want to. If even your content is in public repo, use that repo only.

Add giscus to your Private GitHub repository blog for commenting

Note:

Written by Priyansh Khodiyar