Jocodoma

Joco's Tech Blog

0%

Enabling Gitment Comment System on Hexo NexT

Posted on In , Disqus:
Symbols count in article: 2.5k Reading time ≈ 2 mins.

Last time we talked about how to set up Disqus as comment system on my blog. Although Disqus is a one of popular comment systems, it sometimes can be slow. So, let us try Gitment this time.

What is Gitment?

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

Setup on Hexo NexT

  • Click here to register a new OAuth application on your Github account. Following is my settings:
    1
    2
    3
    4
    Application name: Gitment-Joco-Blog
    Homepage URL: https://jocodoma.github.io/
    Application description: Joco blog comment system
    Authorization callback URL: https://jocodoma.github.io/
  • For the callback URL, use the same domain as your blog.
  • Save the client ID and client secret for _config.yml.

Repository for Gitment

  • You can either create a repository for Gitment or use an existing one. In my case, I use my blog repo:

    1
    git@github.com:jocodoma/jocodoma.github.io

    Later, you should be able to see all the comments on this repo as issues:
    https://github.com/jocodoma/jocodoma.github.io/issues

Update _config.yml

Hexo NexT theme already supports Gitment. No additional changes required. We just need to update _config.yml file.

1
2
3
4
5
6
gitment:
  enable: true
  github_user: jocodoma  # MUST HAVE, Your Github Username
  github_repo: jocodoma.github.io  # MUST HAVE, The name of the repo you use to store Gitment comments
  client_id: xxx  # MUST HAVE, Github client id for the Gitment
  client_secret: xxx  # EITHER this or proxy_gateway, Github access secret token for the Gitment

Turn Off Gitment on Page/Post

In order to turn off Gitment on a particular page or post, you can add the following line to front-matter of your page/post:

1
comments: false

For more information, please see Hexo Front-matter.

Known Issue: File Name Length

When initialize comments, you may see “Error: Validation Failed“. It may be due to the length of file name of your page/post is over 50 characters.

One solution is to change the way how Hexo NexT render Gitment.

title: File: themes/next/layout/_third-party/comments/gitment.swig
1
2
3
4
5
6
7
8
9
10
11
12
<script>
  function renderGitment() {
    var gitment = new {{ CommentsClass }}({
--    id: window.location.pathname,
++    id: '{{ page.date }}',
      owner: '{{ theme.gitment.github_user }}',
      repo: '{{ theme.gitment.github_repo }}',
      {% if theme.gitment.mint %}
        lang: '{{ theme.gitment.language }}' || navigator.language || navigator.systemLanguage || navigator.userLanguage,
      {% endif %}
  ...
  ...

Reference: https://github.com/imsun/gitment/issues/66