Add giscus and applause-button to Jekyll/Chirpy blog

Motivation

It is nice to provide interactive features on your blog. Typical blog services provide a comment feature and applause button for readers to interact with your blog. I have added the features to this blog site using two features below. Both are free and very easy to set up.

• https://github.com/giscus/giscus
• https://github.com/ColinEberhardt/applause-button

Let’s begin.

applause-tool

This is a zero-configuration button for adding applause / claps / kudos to web pages and blog-posts. Check out the applause-button site and see how it works. This blog has a nice blog with this tool.

Chirpy Configurations

There are three files that you need to activate the applause-tool. Go to the pages and update them accordingly.

_sass/layout/post.scss

# https://github.com/iptracej/iptracej.github.io/blob/master/_sass/layout/post.scss#L350-L359

applause-button {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  margin-top: 64px;

  .count-container {
    color: inherit;
  }
}

_includes/head.html

# https://github.com/iptracej/iptracej.github.io/blob/master/_includes/head.html#L50-L52

<!-- applause-button.css-->
<link rel="stylesheet" href="https://unpkg.com/applause-button/dist/applause-button.css">
<script src="https://unpkg.com/applause-button/dist/applause-button.js"></script>

_layouts/post.html

# https://github.com/iptracej/iptracej.github.io/blob/master/_layouts/post.html#L86-L89

<applause-button class="mb6"
color=rgb(79,177,186)
url=https://iptracej.github.io/posts/add-giscus-and-applause-button-to-jekyll/ >
</applause-button>

Now git add, commit, and push to the github repo. You will see the applause button activated to your post.

giscus

This is a comments system powered by GitHub Discussions, enabling visitors to leave comments and reactions on your website via GitHub! Basically the visitors needs to login with github account and leave comments and provide reactions.

Install giscus

• Go to the site GitHub Apps - giscus and select ‘Install’.
• Select ‘Only select repository’ and choose <yourname>/<yourname>github.io.
• Click on ‘Install’. You will see what giscus has configured.
• Click on ‘Save’.
• Go to https://github.com/<username>/<username>.github.io/settings
• Click on ‘GitHub Apps’ on your left side. You will see giscus app installed.

Configure Discussions on Github

-Go to https://github.com/<username>/<username>.github.io/settings

• Click on checkbox ‘Discussions’

Create a new category on Discussions on Github

• Navigate to the main page of the repository (<username>/<username>.github.io) where you want to create a category.
• Under your repository or organization name, click Discussions.
• In the left sidebar, to the right of “Categories”, click ‘Edit’ icon.
• Click New category.
• Type ‘Posts’
• Select ‘Open-ended discussion.
• Click ‘Create’
• Optionally, Edit the emoji, title, description, and discussion format for the category. For more information about discussion formats, see About discussions - GitHub Docs

Giscus Java script

Go to Giscus app page - https://giscus.vercel.app/

Scroll down the page. You see the ‘Configuration’ section. Almost all settings will be unchanged except for the following sections.

• Repository - Under Repository section, insert your /username.github.io
• Discussion Category - Select ‘Posts’ you have just created on Github.
• Theme - Choose your theme.

Now you see your Javascript on the page.

<script src="https://giscus.app/client.js"
        data-repo="<username>/<username>.github.io"
        data-repo-id="<your id>"
        data-category="Posts"
        data-category-id="<your id>"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="dark_dimmed"
        data-lang="en"
        crossorigin="anonymous"
        async>
</script>

Copy it to the head.html under _includes directory.

# https://github.com/iptracej/iptracej.github.io/blob/master/_includes/head.html#L54-L69

<script src="https://giscus.app/client.js"
        data-repo="<username>/<username>.github.io"
        data-repo-id="<your id>"
        data-category="Posts"
        data-category-id="<your id>"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="dark_dimmed"
        data-lang="en"
        crossorigin="anonymous"
        async>
</script>

And update the post.html under _layouts directory.

 # https://github.com/iptracej/iptracej.github.io/blob/master/_layouts/post.html#L143-L145

<div class="giscus-frame" style="margin-top: 24px">
  <div class="giscus"></div>
</div>

That’s it.

Now you see both interactive functions to your blog. I hope you enjoy this bog and see you next time. Happy Hacking.