1!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},t=(new e.Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="5b96eb6a-bdc3-404e-8034-658fcef9fd32",e._sentryDebugIdIdentifier="sentry-dbid-5b96eb6a-bdc3-404e-8034-658fcef9fd32")}catch(e){}}(),(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7959],{5517:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>a});var s=n(7876),i=n(1668);let o=n(6738).A;function r(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{children:"Using GitHub for comments on your blog"}),"\n",(0,s.jsx)(t.p,{children:"As I've just started to build my personal website, I wanted to add a comment section for each published article. Previously I've used Disqus to do so - however, this time I wanted to keep it as lightweight as possible."}),"\n",(0,s.jsx)(t.h2,{children:"The problem with Disqus"}),"\n",(0,s.jsx)(t.p,{children:"Disqus is a great product, no question there. But all the great features Disqus has to offer come with a price. A price you will pay with the loading time of your website:"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{src:"/disqus_load_time.png",alt:"disqus load time"})}),"\n",(0,s.jsxs)(t.p,{children:["If you are interested in details how Disqus works, check out the article I wrote a few years back on the topic on the RisingStack blog: ",(0,s.jsx)(t.a,{href:"https://blog.risingstack.com/on-third-party-javascript-in-production/",children:"On Third-Party JavaScript - In Production Case-Study"}),"."]}),"\n",(0,s.jsx)(t.h2,{children:"What I ended up using instead: GitHub"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.a,{href:"https://developer.github.com/v3/",children:"GitHub has a very well documented REST API"}),", which exposes most of the resources used by GitHub. Luckily, it also exposes issues, with all of their information, ",(0,s.jsx)(t.a,{href:"https://developer.github.com/v3/issues/#get-a-single-issue",children:"including comments"}),"! \uD83E\uDD17"]}),"\n",(0,s.jsx)(t.p,{children:"The only thing left was to write a small JavaScript snippet that grabs the details of an issue and append it to the website. The script looks like something like this:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-javascript",children:'const apiUrl =\n "https://api.github.com/repos/gergelyke/gergelyke.github.io/issues/<%- page.githubIssueId %>/comments";\n\n$(function () {\n $.ajax(apiUrl, {\n headers: {\n Accept: "application/vnd.github.v3.html+json",\n },\n dataType: "json",\n success: function (comments) {\n const $commentSection = $(".blog-post-comments");\n comments.forEach(function (comment) {\n $commentSection.append(\n `\n <div class="comment">\n <a class="commenter" href="${comment.user.html_url}" \n target="_blank">${comment.user.login}</a>, \n ${new Date(comment.created_at).toUTCString()}\n <p>\n ${comment.body_html}\n </p>\n </div>\n `\n );\n });\n },\n });\n});\n'})}),"\n",(0,s.jsx)(t.p,{children:"Actually, you can already comment on this post using the very technique you just read about! Give it a try! \uD83D\uDE0E"}),"\n",(0,s.jsxs)(t.p,{children:["You can see the actual implementation ",(0,s.jsx)(t.a,{href:"https://github.com/gergelyke/gergelyke.github.io/blob/master/src/themes/cactus-light/layout/_partial/comments.ejs",children:"here"}),"."]}),"\n",(0,s.jsx)(t.h2,{children:"Gotchas"}),"\n",(0,s.jsx)(t.p,{children:"As most solutions, using GitHub for the comment engine on your site has some drawbacks:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:"https://developer.github.com/v3/#rate-limiting",children:"GitHub rate limits its' APIs"}),", so this solution won't work if you have a huge number of visitors,"]}),"\n",(0,s.jsx)(t.li,{children:"it only suits audiences with GitHub accounts."}),"\n"]}
1),"\n",(0,s.jsx)(t.p,{children:"If you are ok with this limitations, GitHub provides a great way to let your audience comment on your writings."})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,s.jsx)(o,{...e,children:(0,s.jsx)(r,{...e})})}},6304:(e,t,n)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/using-github-for-comments-on-your-blog",function(){return n(5517)}])}},e=>{e.O(0,[4938,8265,6738,636,6593,8792],()=>e(e.s=6304)),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.