Hugoはデフォルトでコメント機能を持っていない。

公式ドキュメントにはDisqusを使ってコメント機能を実装する方法などが紹介されているが、有料だったり広告が出たりであまり評判は良くないようだ。

色々調べたところIssoというPython製のコメント用サーバを使うことで、無料かつ広告なしでコメント機能を実現できると分かった。

今回はその方法をご紹介。

Issoとは

IssoとはPython製のコメントサーバである。

SaaS系のコメントツールと違って自前でサーバを動かす環境を用意するという手間はかかるが、その反面Hugoに限らずあらゆるwebコンテンツにコメント機能を実装することができる。

機能に関してもメールでのコメント通知、連投防止、管理画面など一通りのものは揃っている。

環境

  • Hugo 0.145.0
  • PaperMod (commit e2e1011bdecaf84d59c70fa42ff3d2c29c537b65)
  • IssoのDockerイメージ latest(2025-04-16時点)

方法

0. 前提

今回はHugoで作成したブログをhttps://blog.zurukumo.devに、Issoのコメントサーバをhttps://blog-api.zurukumo.devにデプロイすることを想定している。

ブログはVercel上にデプロイし、コメントサーバはさくらのVPSにコンテナデプロイした。

1. Issoでコメントサーバを作成する

コメントサーバの構成は以下の通り。

.
├── config
│   └── isso.cfg
├── db
│   └── comments.db
└── docker-compose.yml
└── .env

config/isso.cfgにIssoの設定を書き、docker-compose.ymlにコンテナの構成を書く。

db/comments.dbはコンテナを立ち上げると自動で作成されるので、用意するのはdbディレクトリだけでOK。

docker-compose.ymlは以下のように書いた。

docker-compose.yml
services:
  isso:
    image: ghcr.io/isso-comments/isso:latest
    env_file: .env
    ports:
      - "8080:8080"
    volumes:
      - ./config:/config
      - ./db:/db

Issoは公式がDockerイメージを配布してくれているので、それを使えば上記のような簡素な設定で問題なく動く。

次にconfig/isso.cfgにIssoの設定を書く。

config/isso.cfg
[general]
dbpath = /db/comments.db
host = https://blog.zurukumo.dev
notify = smtp

[server]
listen = http://localhost:8080/

[moderation]
enabled=false

[smtp]
username = (自分のメールアドレス)
password = ${SMTP_PASSWORD}
host = smtp.gmail.com
port = 587
security = starttls
to = (自分のメールアドレス)
from = "isso comments" <(自分のメールアドレス)>
timeout = 10

[guard]
enabled = true
ratelimit = 2
direct-reply = 3
reply-to-self = false
require-author = false
require-email = false

[hash]
salt = ${HASH_SALT}
algorithm = pbkdf2

[admin]
enabled = true
password = ${ADMIN_PASSWORD}

Server Configulationを参考にしながら書いた。

[general]のhostには自分のブログのURLを指定する。これによって指定したURL以外からのIssoサーバへのアクセスが弾かれるようになる。

とにかくコメントする人がストレスなくコメントできる方が良いと思って、承認なし、ユーザー名・メールアドレスの入力不要という設定にした。

${ENV_VAR}のように記述することで環境変数の値を参照することができるので、秘匿情報は.envに書いた。

この環境変数を展開する書き方はバージョン0.13.1で追加された比較的新しめの機能なので、古いDockerイメージなどでは使えない可能性があることに注意する(なのでタグにlatestを指定している)。

IssoではSMTPサーバを指定することで、コメントされたときにメールで通知を行うことができる。

今回は一番手軽そうなGmailのSMTPを使うことにした。

usernameには自分のGoogleのメールアドレスを設定し、hostにはsmtp.gmail.comを、portには587を指定すればよい。

passwordにはGoogleのパスワードではなく、アプリパスワードを指定する。

こちらの記事を参考にしてアプリパスワードを発行した。

既にGoogleで二段階認証をしているユーザーならワンクリックで終わると思う。

.envは以下のように書いた。

.env
SMTP_PASSWORD=XXXXXXXX
HASH_SALT=YYYYYYYY
ADMIN_PASSWORD=ZZZZZZZZ

SMTP_PASSWORDには上記で発行したGoogleのアプリパスワードを、HASH_SALTとADMIN_PASSWORDに関しては適当な乱数を生成して指定した。

ここまでやったらdocker compose upでコメントサーバが立ち上がるはずだ。

2. Hugo側の設定をする

次にHugo側の設定をする。

まずはコメント用のスクリプトを配置する。

テーマによって配置場所の調整が必要だが、PaperModの場合は/layouts/partials/comments.htmlに配置するといい感じで記事の下にコメントを表示してくれた。

/layouts/partials/comments.html
<script
  src="https://blog-api.zurukumo.dev/js/embed.min.js"
  data-isso="https://blog-api.zurukumo.dev/"
  data-isso-vote="false"
></script>
<section
  id="isso-thread"
  data-isso-id="{{ .Page.Path }}"
  data-title="{{ .Page.Title }}"
>
</section>

クライアント側の設定はClient Configulationで確認することができる。

自分は投票を無効にするためにdata-isso-vote="false"を指定した。

scriptのsrcやdata-issoのベースURLにはデプロイしたコメントサーバのURLを指定する。

投稿されたコメントがどの記事に対するコメントなのかを判別するために、data-isso-idには.Page.Pathを指定する。

記事によっては.Page.Permalinkを指定しているものもあったが、その場合はブログのドメイン変更に耐えられないので、個人的には.Page.Pathの方が良いんじゃないかと思う。

あとはカスタムCSSを書いたりしてスタイリングをしたりもしたが、ほぼ黒魔術みたいになったので今回は省略。

Issoではデフォルトでメールアドレスの入力欄やウェブサイトの入力欄が表示されるのだが、個人的には不要に感じたのでCSSを使って非表示にした。

余談1. ローカルでテストする

上記の手順を踏めばHugoにコメント機能を実装することができるが、ローカルでテストできないとなにかと不便なのでローカルでテストする方法を説明する。

今回はIssoコンテナをhttp://localhost:8080で立ち上げて、Hugoをhttp://localhost:1313で立ち上げることを想定する。

まずは、/layouts/partials/comments.htmlのhttps://blog-api.zurukumo.devをhttp://localhost:8080に変更する。

次にngrokやcloudflare tunnelなどを使ってhttp://localhost:1313をHTTPS化する。

Issoはセキュリティなどの関係でHTTPのリクエストを受け付けないので、面倒だがHTTPS化する必要がある。

次にconfig/isso.cfgのhostにngrokなどでHTTPS化したURLを設定する。

あとはHTTPS化したURLにアクセスして動作確認をすればOK。

余談2. 管理画面にログインしてみる

コンテナをhttps://blog-api.zurukumo.devにデプロイしている場合は、https://blog-api.zurukumo.dev/adminにアクセスすることで管理画面にアクセスできる。

.envに書いたADMIN_PASSWORDをパスワードとして入力すればOK。

無事アクセスできた。

管理画面

まとめ

かなり手軽にコメント機能を実装することができた。

そもそもこのブログにコメントする人がいるのかどうかは謎である。