何気無く見てたら

PagermodのDiscussionsを見ていたら、「giscusってサポートしないの?」という議題がありました。

adityatelange/hugo-PaperMod · Discussions · GitHub

覗いてみると、コメント機能のことらしいです。

コメント機能について

Hugoは静的サイトジェネレーターです。
コメント機能はデータベースが必要になるので、静的サイトの機能だけでは実現できません。
そのため、外部ツールを利用することとなります。

utterances

今使っているのが utterances です。

1年前に書いた記事がこちら。
コメント欄を付けてみた(utterances編)

ちょびっと解説したのがこちら。※別サイト
Hugoにコメント機能を付ける · k-kaz が Hugo で遊ぶサイト

使っているとは書きましたが、誰からもコメントが付かないのですが・・・。

giscus

話題に出ていたのが、こちらの giscus です。
utterances から着想を得ましたと書かれている通り、よく似ています。

ともにGitHubの機能を使いますので、コメントするにはGitHubアカウントが必須です。
技術系のサイトならいざ知らず、うちのようなサイトだとアカウント持っている人が皆無だから、ほとんど機能しませんね・・・。

utterances は、GitHubのIssuesという機能を使い、giscus は、Discussionsという機能を利用します。

そもそもIssuesとDiscussionsの機能的な違いがあまり分かっていませんが、Discussionsは議論用の機能なので、コメント欄としてはこちらが向いているということは分かりました。

このサイトで議論するほどのコメントは付きませんけど。

機能のひとつとして、記事読み込み時にコメント欄を読み込まず、コメント欄付近にスクロールしたら読み込むという遅延読み込みに対応しています。
ページの表示は1秒でも速くしたいですから、こういう気遣いは良いですね。

設置してみた

具体的なところは、また k-kaz が Hugo で遊ぶサイト のほうに改めて書きたいと思いますので、ここでは概要だけ。

  • GitHub
    1. コメントを保管するリポジトリを作る 今回はutterancesで使ったものを流用
    2. そのリポジトリでDiscussionsの機能を有効にする
  • giscus アプリ
    1. GitHub Apps - giscus へ移動する
    2. インストールする インストール先は今回のリポジトリを選択
  • giscus 設定
    1. giscus へ移動する
    2. 自分好みに設定をしていく
    3. コードができあがるのでコピーする
  • Hugo テーマ
    1. コメントを表示したいところへ先程のコードを貼り付ける

こんな感じで、すぐに終わりました。

現在、記事の下に表示されているのが、giscusのコメント機能です。
記事へのリアクションもありますね。

リアクション及びコメントは、githubにサインインしてご利用いただく形です。
興味がある方はぜひ。

追記 2024-02-21

下記サイトに記事を追加しました。
Hugoにコメント機能を付ける(giscus編) · k-kaz が Hugo で遊ぶサイト