---
title: "Adding the utterances Comment System to the Hexo NexT Theme"
description: "Intro\nI happened to be redecorating my  blog and realized I still didn't have a comments section"
author: "kidneyweakx"
published: 2019-10-26T14:30:00.000Z
updated: 2025-12-17T23:03:38.041Z
lang: en
tags: ["程式筆記", "Javascript", "hexo"]
canonical: https://kidneyweakx.com/blog/19log-1026-hexo-com?lang=en
alternate_zh_tw: https://kidneyweakx.com/blog/19log-1026-hexo-com.md
alternate_ja: https://kidneyweakx.com/blog/19log-1026-hexo-com.md?lang=ja
---

# Adding the utterances Comment System to the Hexo NexT Theme

### Intro

> I happened to be redecorating my `hexo` blog and realized I still didn't have a comments section

* `Next` actually already comes with a lot of comment systems built in, e.g. Disqus, gitment, etc...

* I don't really use Disqus, and signing up for yet another account is painful for someone as chronically lazy as me, so I turned to `gitment`, a tool that turns GitHub issues into a comment system.

* But while reading around, I came across this post: [Everyone should stop using Gitalk, Gitment, and other GitHub OAuth Apps that ask for excessive permissions](https://www.v2ex.com/t/535608).

* hmmm... I don't want to get messed with by some malicious engineer QAQ

#### Why Utterances

So I went with [utterance](https://utteranc.es/)
It also uses GitHub to store comments, which is a really fun approach.
And it asks for way fewer permissions. Genuinely great tool.

***

### Setup

#### Authorization

Authorize utterances so it can take comments and post them to the `Issues` in your `repo`
First open this link <https://github.com/apps/utterances>
It'll ask you to authorize it; I picked my hexo blog repo
![](https://raw.githubusercontent.com/kidneyweakx/img-host/image/image/utter-01.jpg)

#### Configuration

Head to this URL <https://utteranc.es/> 
In the repo: field under `configuration`, enter the `repo` you just authorized
![](https://raw.githubusercontent.com/kidneyweakx/img-host/image/image/utter-02.jpg)
Then copy this script
![](https://raw.githubusercontent.com/kidneyweakx/img-host/image/image/utter-03.jpg)
e.g. you can add a `label` so the comments look nicer in `Issues`

### Setting it up in Next

In `commenets.swig` inside the `theme\next\layout\_partials` folder, add

```js
  {% if theme.utterances.enable %}
    <div class="comments" id="comments">
        <script src="https://utteranc.es/client.js"
                repo="[ENTER REPO HERE]"
                issue-term="pathname"
                label="💬"
                theme="github-light"
                crossorigin="anonymous"
                async>
        </script>
    </div>
```

Just put it right after

```js
{% if page.comments %}
```

and you're good
Then, in the theme config file `_config.yml`, add

```js
# utterances
utterances:
  enable: true
```

And that's it\~\~ (confetti)

### Summary

There's actually also an npm module, [Hexo NexT Utteranc](https://github.com/theme-next/hexo-next-utteranc), but I don't think it's worth installing yet another thing; the official instructions are already very detailed.
If you have any questions, feel free to leave a comment.