Geekly Articles each Day
📜 ⬆️ ⬇️

Moving from Disqus to Github comments

For a while, I wanted to remove comments from my blog; mainly because there are few comments here at all, and I don’t want to mess around with the extra “brakes” from Disqus . Looking at the download time of Disqus, I was shocked that I had to endure site visitors through my fault (except for those who use blockers like Privacy Badger and uBlock Origin .

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

What is wrong with Disqus?


This is what a typical query log with Disqus turned on .
')

But the log after disconnecting Disqus.


WHAT !?

The important points are as follows:


Among the network requests you can find such:

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 pretty disgusting to see some free products turn you into a product. Even more concerns are caused by services that are trying to hide their purpose and purpose, why they are watching your actions.

In any case, delete it. I apologize to everyone for poisoning your site with these networks. We turn to the best things.

Use Github for comments.


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

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

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

You get the benefits of this approach immediately:


Github JSON data does not require an API key to read; they are fully open for 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 catalog with parts of the templates. It will read and display Github comments.html ( comments.html ). 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 <b><a href='" + url + "'>Github Issue</a></b> to comment on this post"); $.each(comments, function(i, comment) { var date = new Date(comment.created_at); var t = "<div id='gh-comment'>"; t += "<img src='" + comment.user.avatar_url + "' width='24px'>"; t += "<b><a href='" + comment.user.html_url + "'>" + comment.user.login + "</a></b>"; t += " posted at "; t += "<em>" + date.toUTCString() + "</em>"; t += "<div id='gh-comment-hr'></div>"; t += comment.body_html; t += "</div>"; $("#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, it is the only ghcommentid variable, it sets the Issue number that is used for comments.

Summary


Add nothing more. Technically, you can generally post your posts as Github Issues and forget about the blog engine. But it seems the system is misused.

This website is managed on Github as dwilliamson / donw.io. There is a complete code for using Github as a comment engine.

Source: https://habr.com/ru/post/327424/

More articles:


All Articles