This post goes over how I migrated my Jekyll blog comments from Disqus to giscus.

Motivation

I didn’t like the ads displayed by Disqus so I decided to migrate to giscus, which is an open source comments system powered by GitHub Discussions.

giscus

I installed the giscus app to my repository.

I enabled discussions (Settings > Features > Discussions).

I created a category (Discussions > Categories > New category):

	Input
Category name	Comments
Description	Blog comments
Discussion Format	Announcement
Add this category to a section	No section

I filled out the configuration to generate the embed code:

	Input
Language	English
Repository	https://github.com/remarkablemark/remarkablemark.github.io
Page ↔️ Discussions Mapping	Discussion title contains page pathname
Discussion Category	Comments

I enabled the options:

• Use strict title matching
• Only search for discussions in this category
• Enable reactions for the main post
• Place the comment box above the comments
• Load the comments lazily

I added the giscus <script> to _layouts/post.html.

I disabled Disqus for posts before the date of the latest discussion:

{% assign post_date = page.date | date: "%s" %}
{% assign disqus_date_cutoff = "2021-01-13" | date: "%s" %}
{% if post_date < disqus_date_cutoff %}
<!-- disqus -->
{% endif %}

I added a button to load Disqus for those who want it:

<button id="disqus_button">Disqus</button>
<div id="disqus_thread"></div>
<script>
  window.disqus_config = function () {
    this.page.url = '...';
    this.page.identifier = '...';
  };
  var disqusButton = document.getElementById('disqus_button');
  disqusButton.addEventListener('click', function () {
    disqusButton.remove();
    var script = document.createElement('script');
    script.src = '//remarkablemark.disqus.com/embed.js';
    script.async = true;
    script.setAttribute('data-timestamp', +new Date());
    document.head.appendChild(script);
  });
</script>