Moving from Disqus to Github comments

For a while I wanted to remove comments from my blog; mainly because there are few comments at all, and I don’t want to mess with the extra “brakes” from Disqus . Having looked at the Disqus boot time, I was shocked at what users of the site have to endure because of my fault (except for those who use blockers like Privacy Badger and uBlock Origin .

This article is tailored for Hugo, but the code is easily adaptable for any site.

What is wrong with Disqus?

Here's what a typical query log looks like with Disqus enabled .

And here is the log after disabling Disqus.

WHAT !?

The important points here are:

• Download time is reduced from 6 to 2 seconds.
• The number of network requests is reduced from 105 to 16.
• There are a lot of irrelevant requests across the network to monitor the user.

Among network requests, you can find these:

• disqus.com - Obviously!
• google-analytics.com - Numerous requests; no idea who is following you.
• connect.facebook.net - If you are logged in to Facebook, then they know about your visit to this site.
• accounts.google.com - Google also tracks your visit to this site through any of your Google accounts.
• pippio.com - LiveRamp authentication to collect information about you for business purposes.
• bluekai.com - Individual user tracking for marketing campaigns.
• crwdcntrl.net - A rather suspicious site that is mentioned in connection with the spread of viruses and spyware.
• exelator.com - Another site for tracking users, a virus is even named after it!
• doubleclick.net - This we all know: advertising and tracking user actions, belongs to Google.
• tag.apxlv.net - It is very suspicious and it looks like a trick that the owner has obfuscated his domain (I did not even know that such a technique works!). Adds a tracking pixel to your site.
• adnxs.com - Even more tracking garbage, although a bit more plentiful.
• adsymptotic.com - Advertising and surveillance that is supposed to use machine learning.
• rlcdn.com - Obfuscated advertising / tracking by Rapleaf.
• adbrn.com - “We provide a per-user journey across devices, channels, and platforms using matching technology through the Adbrain user ID.”
• nexac.com - Oracle's Datalogix, their own crap for surveillance and behavioral analysis.
• tapad.com - That's it, I'm tired of looking for information about them.
• liadm.com - More? Oh well then ...
• sohern.com - Hmm. Tracking down.
• demdex.net - Tracking. From Adobe.
• bidswitch.net - I 'll give you another hint ...
• agkn.com - ...
• mathtag.com - A funny name, maybe it's ... no. It is watching you.

I cannot visit many of these sites because they are blocked in uBlock Origin, so I had to collect information from Google search results and from third-party sites. Needless to say - it’s rather disgusting to see how some free products turn you into a product. Services that try to hide their purpose and purpose, why they monitor your actions, cause even more fears.

In any case, delete it. I apologize to everyone for poisoning their site with these networks. Let's move on to the best things.

Use Github for comments

I discussed removing Disqus, and @HarryDenholm mentioned that his friend managed to implement comments on his static Github blog using pull requests. I thought it was a brilliant idea and decided to find out if something like this could be done for Hugo on an external site.

The answer is contained in the Github Issue API . The process is quite simple and it already works for this blog post :

1. For each published post, open Issue in a repository on Github. For example, for this post it is open here .
2. All comments are posted directly on Github.
3. Add Javascript code to the site that reads the JSON description of the comments of this Issue and displays them.

The benefits of this approach you get immediately:

• Tracking site visitors is reduced to zero. Github itself only sees network requests to read from anonymous IPs.
• All comments are written in Markdown , with support for inline code, images, lists, and formatting.
• You can use Github's notifications of responses; you don’t even need to go to this site to read comments and participate in the discussion.
• Although this seems superfluous, you can integrate Github Reactions emojis (it can be useful for larger sites).

An API key is not required to read Github JSON data; they are fully open to access. Comments on this post can be read as JSON here . The first comment looks like this:

{
    "url": "https://api.github.com/repos/dwilliamson/donw.io/issues/comments/295004846",
    "html_url": "https://github.com/dwilliamson/donw.io/issues/1#issuecomment-295004846",
    "issue_url": "https://api.github.com/repos/dwilliamson/donw.io/issues/1",
    "id": 295004846,
    "user": {
        "login": "dwilliamson",
        "id": 1532903,
        "avatar_url": "https://avatars3.githubusercontent.com/u/1532903?v=3",
        "gravatar_id": "",
        "url": "https://api.github.com/users/dwilliamson",
        "html_url": "https://github.com/dwilliamson",
        "followers_url": "https://api.github.com/users/dwilliamson/followers",
        "following_url": "https://api.github.com/users/dwilliamson/following{/other_user}",
        "gists_url": "https://api.github.com/users/dwilliamson/gists{/gist_id}",
        "starred_url": "https://api.github.com/users/dwilliamson/starred{/owner}{/repo}",
        "subscriptions_url": "https://api.github.com/users/dwilliamson/subscriptions",
        "organizations_url": "https://api.github.com/users/dwilliamson/orgs",
        "repos_url": "https://api.github.com/users/dwilliamson/repos",
        "events_url": "https://api.github.com/users/dwilliamson/events{/privacy}",
        "received_events_url": "https://api.github.com/users/dwilliamson/received_events",
        "type": "User",
        "site_admin": false
    },
    "created_at": "2017-04-18T22:39:16Z",
    "updated_at": "2017-04-18T22:39:16Z",
    "body": "This is a comment"
},  

The first step is to add a new template to your directory with parts of the templates. It will read and display Github ( comments.html) comments . Here is the code I used:

var url = "https://github.com/dwilliamson/donw.io/issues/" + {{ $.Params.ghcommentid }}
var api_url = "https://api.github.com/repos/dwilliamson/donw.io/issues/" + {{ $.Params.ghcommentid }} + "/comments"
$(document).ready(function () {
    $.ajax(api_url, {
        headers: {Accept: "application/vnd.github.v3.html+json"},
        dataType: "json",
        success: function(comments) {
            $("#gh-comments-list").append("Visit the Github Issue to comment on this post");
            $.each(comments, function(i, comment) {
                var date = new Date(comment.created_at);
                var t = "
";
                t += "";
                t += "" + comment.user.login + "";
                t += " posted at ";
                t += "" + date.toUTCString() + "";
                t += "
";
                t += comment.body_html;
                t += "
";
                $("#gh-comments-list").append(t);
            });
        },
        error: function() {
            $("#gh-comments-list").append("Comments are not open for this post yet.");
        }
    });
});

It can be called from the post page:

{{ partial "comments.html" . }}

The variables referenced by the template should be added to the header of the html page. In this case, this is the only variable ghcommentid; it sets the Issue number, which is used for comments.

Summary

There is nothing more to add. Technically, you can generally post your posts as Github Issues and forget about the blog engine. But this seems to be misuse of the system.

This web site is operated on Github as a dwilliamson / donw.io . There is complete code for using Github as a comment engine.