Migrated from disqus to giscus
Yesterday, I migrated my comment box from disqus to giscus. I was using disqus for a long time, I think after I started this blog on 2017. But I was particularly not happy with the way disqus does not allow me and my readers to typeset maths equations. Since this blog is particularly about physics (maths, and sometimes computer science), I was looking for an alternative. I noticed giscus and utterances around a year ago and thought they could be a possible alternative. But, I kept on postponing the migration. One reason why I was not migrating was that there is no way to allow guest comments. Guest comments mean you do not need to log in to comment on the website. But now, I’m convinced that most of the readers are already familiar with GitHub and they can easily create a GitHub account. I apologize if it annoyed you. I think most undergraduate (or graduate) physics students (or researchers or physicists) nowadays may come across GitHub once or many. So, these are the reader circle that I’m targeting for this blog.
The giscus operates on GitHub Discussions, and utterances operates on GitHub Issues. GitHub uses Markdown for typesetting the comments, and also supports maths equations. Comparing these two, I found that GitHub Discussions is more suitable for my blog. So, I finally decided to migrate to giscus.
I’m writing this post for two reasons. First, I want to notify you that I have migrated my comment box to giscus. Second, I want to share some useful code snippets that I’m using for giscus.
If you open the giscus website then, there is a clear step on how to integrate giscus with your website. So, I don’t want to repeat the same thing here. But, I want to share four important things with you. i.e.
- I created two dedicated categories in GitHub Discussion of the comments-dedicated GitHub repo. Specifically for my blog /blog and mini-blog /thought. I recommend you use a category with the “Announcement” format so that new discussions can only be created by the owner of the repo and giscus bot.
- I added DNS-prefetch inside my
<head>tag. This is to make sure that the giscus web-app is functional before the<script>tag requested the resources. i.e.
<link rel="dns-prefetch" href="https://giscus.app">
- I added the custom theme in giscus script. You can find the theme here. I need to use JSDELIVR CDN to effectively use to deliver the theme to giscus app. i.e.
data-theme="https://cdn.jsdelivr.net/gh/physicslog/.com/style/giscus.css"
If you edited the CSS theme then, you need to purge the cache of the CDN using this link. If you don’t purge the cache then, the changes will not be reflected in the giscus app for up to 7 days. To purge, you need to put the URL of the data-theme on that website.
- I added
giscus.jsonfile in the root directory of the comments-dedicated GitHub repo. See here. i.e.
{
"origins": ["https://www.physicslog.com"],
"defaultCommentOrder": "newest"
}
The "origins" means giscus comment box will only show on the base and its relative URLs. Since I’m using hugo as a static website generator for this website, I need to do this to avoid creating a new discussion (in the comments-dedicated GitHub repo) by giscus bot with localhost as a base URL. The "defaultCommentOrder" means the comments will be shown in the order of newest first.
You may probably have a question: How do you migrate comments from disqus to giscus? The answer is quite simple. I was fortunate to have very few comments on my blog and mini-blog which I can manually copy and paste into the GitHub discussion. Before doing so, I first exported the disqus comment into xml file. The key point is that I gave credit to the comment owner as:
> Originally posted by Full-Name on Date-Time
Comments here ....
You can see the comment owner’s full name, and the date and time they published their comment in an exported xml file. If I’m the owner of the comment, then I just wrote:
> Originally posted on Date-Time
Comments here ...
If you are unfortunate to have very many comments then you can write a script using GitHub GraphQL API to do the same thing. Unfortunately, giscus does not have a feature to import comments from disqus. But, I think it is a good feature to have. I hope the giscus team will add this feature in the future.
I hope this will be useful for you if you are also planning to migrate from disqus to giscus.
Update (24 Jun 2023) If you want to change the font of the comment-box to Computer Modern then, you can use the following codes in your data-theme css file. The font is supplied by KaTeX.
/* Load the Computer Modern Font */
@import url("https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css");
main {
font-family: "KaTeX_Main" !important;
}
code,
kbd,
pre,
samp {
font-family: "KaTeX_Main" !important;
}
Any feedback?
If you guys have some questions, comments, or suggestions then, please don't hesitate to shot me an email at [firstname][AT]physicslog.com or comment below.
Liked this post?
If you find this post helpful and want to show your appreciation, I would appreciate "a Coffee or Nepali Chi·ya (चिया)". It's a small gesture that can make my day!
Want to share this post?
Written by Damodar Rajbhandari, a PhD candidate in the Mathematical Physics at the School of Mathematics & Statistics, University of Melbourne, Australia.
