Comment on Github Page with Gitment

Last time, I added visitor statics system to my github page with Busuanzi. But a blog without a comment system is still not good enough. After hours of searching and testing, I finally implement it with a tool called Gitment. And if it works, you will be able to see a comment box below after you enter an article. (I didn’t set one on the home page.) And this article is an addition to the official guide, which might be more easy to understand and practice.

What is Gitment

According to the official document:

Gitment is a comment system based on GitHub Issues, which can be used in the frontend without any server-side implementation.

Actually, it create a issue for every article in your blog, and then every comment you add to the article will be added into the issue as well. And the OAuth mentioned in the official guide is used to get the access permission of your repository.

Get Started with Hexo

The official guide actually tells you about how to build a comment system, but not about how to build it under a particulay framework. And here’re some advices about building it under Hexo.

Where should I add my comment box

If you are using the default theme , I recommend you to add it in your /themes/landscape/layout/_partial/article.ejs, after the article tab like this:

<% if (!index) { %>
<div id="gitmentContainer"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
var gitment = new Gitment({
  owner: 'your user name',
  repo: 'your repo name',
  oauth: {
    client_id: 'your client id here',
    client_secret: 'your client secret here',
  },
})
gitment.render('gitmentContainer')
</script>
<% } %>

After you doing that, you will find a comment box under every article of yours. If you want to display a comment box on your home page, you’d better move this part to your footer.ejs and add it to the beginning of your file.