DisqusでHugoブログにコメント機能を追加してみた

Disqusとは

Disqus（ディスカス）は、Webサイトやブログに中央集権型のコメント機能を提供するオンラインサービスです。

X（Twitter）、Facebookなどのソーシャルネットワークとの統合をサポートしています。

Disqus

More publishers trust us to engage, grow, and understand their audiences than any other. Build your on-site community wi…

disqus.com

Hugoへの組み込みについて

Hugoには、Disqusをテンプレートに読み込むために必要なコードが付属しているため、Disqusアカウントを登録して設定を変更することで簡単に組み込むことができます。

📖 参考

• Comments | Hugo

Hugoへの組み込み手順

Disqusのアカウント作成

Disqusの公式サイトの「Get Started」からアカウントを登録します。

アカウント作成後、「I want to install Disqus on my site」を選択します。

必要事項を入力し「Create Site」ボタンを押下します。

プラン選択画面が表示されます。
今回はコメント機能の使用だけなので無料の「Basic」を選択しました。

プラットフォームを選択する画面が表示されます。
選択肢にHugoはないので「I don’t see my platform liseted, install manually with Universal Code」を選択します。

インストール用のコードが表示されますが、Hugoでは使用しないためそのまま画面下の「Configure」ボタンを押下します。

「Website Name」、「Website URL」を入力して「Next」ボタンを押下します。

プロファイルの「Balanced」か「Strict」を選択して「Compleate Setup」ボタンを押下します。
（後で変更できるようなのでとりあえず「Balanced」を選択しました。）

設定が完了するので「Configure your site’s community settings」を選択するか、メニューの「General」を開きDisqusの設定画面を表示します。

ここで表示される「Shortname」を記録します。

Hugoの設定

Hugoの設定ファイル（hugo.toml）に「Shortname」を設定します。

[services]
  [services.disqus]
    shortname = '{Disqusの設定画面で表示されたShortname}'

個別記事のテンプレートファイル（layouts/_default/single.html）にHugoの組み込みDisqusテンプレートを設定します。

{{ template "_internal/disqus.html" . }}

📖 参考

• Comments | Hugo