Hugoのコメント機能としてDisqusを利用する

Hugoでコメント機能を導入するには、外部のサービスを利用するのが簡単です。今回は、広く利用されている Disqus を入れてみました。

気になるお値段

50,000 pv/日から有料となります。

また、通常ではコメント非表示にしておいて、ボタンクリックで表示させる仕組みを入れれば、pv数は下げられます。
私が利用している hugo-theme-meme もこの機能があります。

迷いそうなとこだけpickup。

1.sign up
Disqus の GET STARTED からsign upします。

2.install on my site を選択

名称やURLを入力します。

3.platform選択一番下のmanualを選択します。

コードが生成されます。
これを突っ込めば利用できます。

Themeによっては、より簡単に設定できるようにしているものもあります。
私が利用している hugo-theme-meme もかなり簡単で、以下3箇所修正すれば利用できました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
# config.toml
diff --git a/config.toml b/config.toml
index c63c193..c5a32e6 100644
--- a/config.toml
+++ b/config.toml
@@ -648,7 +648,7 @@ uglyURLs = false
     # Note: render only in production
     #       environment

-    enableComments = false
+    enableComments = true
     # Note: *global settings*
     #       `comments` in post’s Front Matter
     #       has a higher priority than here
@@ -657,8 +657,8 @@ uglyURLs = false
     autoLoadComments = false

     ## Disqus
-    enableDisqus = false
-    disqusShortname = ""
+    enableDisqus = true
+    disqusShortname = "rochefort-dev"

1.記事の最後に以下リンクが表示されます。

これをクリックすると

2.コメント欄が表示されます。