HugoのブログにDisqusでコメント機能をつける
日付 タグ hugo カテゴリ hugo目次
Hugoでコメント機能はどうやって付け足しするか
Hugoはご存知のように静的なサイトジェネレーターだ。動的にプログラムを動かしたりとかそういったことができない代わりに、レスポンスが軽快で手軽なサイト構築ができるメリットがある。
しかし、動的なプログラムが動かせないがゆえに制限も出てくる。では、コメント機能なんかはつけられないのか?
いや、そこはお問い合わせフォームでGoogleフォームを使って問い合わせフォームを加えることができたように、外部のサービスを利用することでコメント機能を付け足すことが可能となる。
ここではDisqusを利用してコメント機能を付け足す手順を見ていく。
https://disqus.com - Disqus
![](/images/hugo-disqus/9576D154A8DDB2D0A98EEC0A36C9DAC8.jpg)
HugoではこのDisqusのHTMLタグをテンプレートで挿入できる機能が最初から入っているので、HTML側の調整は簡単であるが、 Disqus側での登録が必要である。
Disqusを利用してコメント機能を付け足す手順(Disqusサイト側)
まずはDisqusでアカウントを作る必要があるので、 「Get Started」から。
![](/images/hugo-disqus/F218A1BF6BEDBEA63EB614074E9BFCCD.jpg)
メールアドレスで登録でもいいし、Facebook, Twitter, Googleアカウント連携でのアカウント登録もできるようだ。 好きな方法で登録をする。
アカウント登録、初回ログインが成功したら、この画面に進むので「I want to install Disqus on my site」を選択。
![](/images/hugo-disqus/E1E2EE142C4E94C44D67C6A57256E78A.jpg)
Website Nameを入力してCategory, Languageを選択。 なお、Website Nameで入れた文字列が、URLのshortname.disqus.comサイトのshortnameの部分になる。
![](/images/hugo-disqus/1EA739032647C9629D3274CD9C3BF587.jpg)
情報を入力していき、「Create Site」をクリックする。
Select Planで無料Basicプランを選択して「Subscribe Now」
![](/images/hugo-disqus/F1B47C0F56FDDD0FAA5B6C87EA398044.jpg)
なお、料金プランによる違いは以下に説明があるが、本サイトは趣味のブログなのでBasic。 https://disqus.com/pricing/ - Disqus pricing
次にサイトが何で作られているかの選択だが、ここではHugoの選択はないので、
「I don’t see my platform listed, install manually with Universal Code」
を選ぶ。
![](/images/hugo-disqus/4D748C142CFF0257CE2DCE0321CDAC90.jpg)
次にサイトへコピペする用のHTMLタグの説明が出てくるが、Hugoのテンプレートコードを使うので、ここはコピペは必要ない。
![](/images/hugo-disqus/004A3BA3C96E5D6D7F72BADF248DD16A.jpg)
![](/images/hugo-disqus/87BE459C62C4E429314496D05CF8BF5A.jpg)
ここで下の方にある「Configure」を選ぶ。
サイトの情報を入力する項目が出てくるので、
![](/images/hugo-disqus/F3B9E0C64B68F2A2DCE60C7193BEED3A.jpg)
Website URLや必要に応じてComment Policy URL、Description等を入力したら、
「Complete Setup」
以上で、Setup Complete!
![](/images/hugo-disqus/9E6D2A209BD79B5A6641762EEA928F31.jpg)
さて、先ほど出てきたshortnameをHugo側に書き込みするのだが、忘れた場合は、上のメニュー欄にある「Settings」からいつでも確認することが可能である。
![](/images/hugo-disqus/10E6E192C8E8484BA6042A9986DAEA08.jpg)
Disqusを利用してコメント機能を付け足す手順(Hugo調整側)
ここからHugo側でDisqusのHTMLテンプレートを入れる作業をしてく。
まずはconfig.tomlの調整から。
config.tomlでDisqusサイト側で設定したshortnameを設定する。
disqusShortname = "[ここにshortnameを入れる]"
次にDisqusのコメントHTMLを設置したい場所で、
{{ template "_internal/disqus.html" . }}
を読み込めばいいのだが(だいたいはフッターの近くになると思うが)
自分の場合、記事ごとに設置す/設置しないを選択できるように、
各ブログ記事のMarkdownのヘッダー中で、discussion = true/falseの設定を入れることでコメント欄を表示、非表示をコントロールできるようにしたので、
single.html
のフッター近くで、
{{ if eq .Params.discussion true}}
{{ template "_internal/disqus.html" . }}
{{ end }}
を入れ込み、Markdownの各記事のヘッダーで
discussion: true
あるいは
discussion: false
を入れるようにした。
Disqusの動作チェック
残念ながらローカル環境では動作チェックができないので実際の動作環境はリリース環境なり、プレビュー環境なりにデプロイしてのチェックになるようだ。
ローカル環境(127.0.0.1のIPアドレス)で動かした場合、このような表示が出る。
![](/images/hugo-disqus/476FD9EA968C4BFC852739F2683E5AA5.jpg)
ローカルでチェックできないので、Netlifyへのデプロイ後の後づけでのチェックだが、実際に投稿することはできた。
![](/images/hugo-disqus/83E50232F61C9414C59176F574E63036.jpg)
なお、デフォルトの設定ではコメントを投稿する投稿者はDisqusアカウントか、Facebook, Twitter, GoogleのどれかでDisqusへの連携認証が必要になっているようだ。
![](/images/hugo-disqus/9A3838484185F502B95A1A83BAD81092.jpg)
comments powered by Disqus