+++

「公開した記事に対して、読者から直接感想が聞きたい！」
「難しかった手順について、直接質問を受け付けたい！」

Webサイトを運営していると必ずそのような要望が出てきますが、静的サイトジェネレーターであるHugoには、動的にデータを保存する（WordPressのような）コメント機能が標準では備わっていません。
しかし、コメントに特化した専用の「外部ウィジェットサービス」を利用することで、驚くほど手軽に高機能なコメント欄を追加することができます。

この記事では、世界中のブログで最も広く使われているコメントシステムの一つである Disqus (ディスカス) の導入と設定方法を、分かりやすく解説します。

1. Disqusのアカウント作成

まずは Disqus公式サイト にアクセスして、アカウントを作成し、サイトを登録します。

  1. “Get Started” からサインアップ。
  2. “I want to install Disqus on my site” を選択。
  3. Website Name を入力。これが重要です！
    • ここで決めた名前が 「Shortname (ショートネーム)」 になります。
    • 例: my-blog と設定したら、Shortnameは my-blog です。

2. テーマ側の設定

Disqusを使うために、Hugoの設定ファイル hugo.toml に以下のコードを追記してください。
（ファイルの末尾などでOKです）

[services]
  [services.disqus]
    shortname = "" # ここにDisqusのShortnameを入れるとコメントが表示されます

この "" の部分を、先ほど取得した自分のShortnameに書き換えるだけです。
（空欄のままだとコメント欄自体が表示されないので、エラーも出ません）

例:

shortname = "my-awesome-blog-2024"

これだけで、すべての記事の下にコメント欄が表示されるようになります！🎉

3. 仕組みの解説 (上級者向け)

テーマ内では、以下のようなコードが layouts/partials/comments.html に書かれています。

{{ if .Site.Config.Services.Disqus.Shortname }}
    <!-- Disqusの読み込みコード -->
    <script>
        // ... (省略) ...
        s.src = 'https://{{ .Site.Config.Services.Disqus.Shortname }}.disqus.com/embed.js';
        // ... (省略) ...
    </script>
{{ end }}

if .Site.Config.Services.Disqus.Shortname という条件分岐があるため、
設定ファイルにShortnameが書かれていない時は、無駄なスクリプトは一切読み込まれません。
使わない人にも優しい設計になっています。

読者の声を取り入れてブログを活性化させよう

静的サイトであるHugoでは動的なコメント機能の自作はハードルが高いですが、専用の外部サービス（Disqusなど）を活用することで、設定ファイルへの数行の追加だけで簡単に手に入れることができます。
手軽に読者からの素直な感想や質問を受け取れるような窓口を作って、活発な交流が生まれる活気あるWebサイトを目指しましょう！