After 2 years running disqus on my blog, I have decided to switch over to gitment. The spam and slowness of Disqus is what drove me away from it. Plus no more ads for users.
Gitment is a small JS library that leverages on Github issues to store comments for each post:
- Each post will have a matching Github issue (example for this blog).
- Users will have to be logged in to github to post.
- Comments are saved as github comments on each issue/post
- Gitment takes care of displaying a form that allows users to see/post comments
Let’s get started.
Installation
You can use the hosted libraries:
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css"> |
or build them yourself
git clone git@github.com:imsun/gitment.git |
Once you are sure that gitment.browser.js
and default.css
are present on your site, let’s move on to the setup.
Setup Github
First of all we are going to need an OAuth application.
- Click here to register an OAuth application.
- Save the client ID and client secret somewhere.
- For the callback URL, use the same domain as your blog (I am using http://www.codeblocq.com/).
Integrate Gitment in Hexo
Let’s add a new configuration object to store our client Id and Secret. In your theme’s _config.yml
, add:
# Comments. |
We now need a <div>
container to tell gitment where to display the comments:
This is how I did it: (note the id="gitment-comments"
)
<if(page.comments && theme.comments && theme.comments.gitment){ > |
and we are now ready to initialize the gitment library:
<script> |
Important:
- the
id
should be a unique identifier for each post. Gitment will use it as the matching github issue name + will create one label with that id as well. Special character are not allowed and the max length is 50 chars. Make sure your use the regexp above to avoid issues down the line. - this script needs to be executed AFTER the
<div id="gitment-comments"></div>
has rendered, so make sure you place that script tag at the end of the<body>
or at least after thediv
. - Use your github hanlde as
owner
- Create a repo that will be used to store the issues. Since my blog is hosted on github pages, I am using that repository.
Initialize the comments for each page
At this point, deploy your blog and visit each page while logged in on github.
Click the Initialize comments
link on each page to open a comment thread (aka create a github issue) for that particular post.
Results below ;)