Isso でブログにコメント機能を導入する

Posted on 2019/01/06 in tech

このサイトは最近 Pelican で作成したものに置き換えたのだけれど、 Pelican は静的サイトジェネレータなので、当然ながらコメント機能がついていない。

動的なコメントには Disqus を使えと書いてある のだが、Disqus はいきなり広告を出し始めて反発を買った とか。広告は上位のサイトだけとか、個人利用なら表示されないようだけれど、そういう不安の種は抱えたくない。

代替案

前提として、VPS があるので自前ホスティングでもよかった 3 つくらい良さそうなのを見つけた

Commento

Commento はデモ画面に惹かれた。

一度導入してみたのだが、無料の CE プランの場合コメントが投稿されたときの通知機能が使えない という致命的な問題がある。

スクリプト仕込んで自前の通知をつくってもよかったが、そこまでしたくない。

Staticman

Staticman は Github 上にコメントファイルをホスティングするという エンジニア的にはナイスな発想でコメント機能を提供している。

仕組みとしては、

  • コメント管理したいリポジトリのコラボレータに staticmanapp を追加する
  • コメント投稿時の POST リクエストを Staticman の API に送る
  • Staticman が API を通じてリポジトリにコメントファイルを push してくれる

リポジトリに追加されたファイルをサイトに埋め込めば、コメントが表示されるというわけ。

...そう。静的ファイルを静的サイトに埋め込むという泥臭い手法を取る必要がある。

Netilify 上にブログをホスティングして、コメントが投稿されるたびにブログをビルドをし直す という荒業をやってのける猛者もいたけれど、 ただのレンタルサーバでホスティングしたい。

Webhook つかった自前トリガでビルドしなおす仕組みをつくるのも考えたけれど、スマートではない気がする。 メンテ大変そうだし。

Isso

そして Isso に出会った。

Isso とは

a commenting server similar to Disqus

と言っているように Disqus と同様のコメントサーバを提供する。 SQLite でシンプルに実装してあり、すでに Disqus で管理しているコメントもインポートできるらしい。

日本語には対応してないけど、コメント自体に日本語が使えるなら大きな問題ではない。

Markdown も思いがけず使えるようなので嬉しい。

Isso のセットアップ

セットアップの方法については Qiita のほうに投稿したので、そちらを参照されたい1。

Pelican サイトに埋め込む

サーバのセットアップができたら、Pelican の各記事に埋め込むようテーマを編集する。

Pelican は Disqus には対応しているので、Disqus のタグを埋め込んでいる場所を調べると、 {テーマフォルダ}/templates/article.html で読み込んでいることがわかった2。

このファイルを開き、Disqus のタグ埋め込み部分を置き換えるか、その前後に以下のタグを挿入する。

<!-- Isso Start -->
<script data-isso="//isso.example.com/"
        src="//isso.example.com/js/embed.min.js"></script>
<section id="isso-thread"></section>
<!-- Isso End -->

細かい設定は Qiita の方に記載した。

いい感じにコメント機能が追加できた。

あとは記事を充実させたい。。

  1. Docker を使ったセットアップ方法になってます。 ↩

  2. テーマによって埋め込み方は多少違うとは思うが、各記事ページのテンプレートは article.html なので、このファイルにタグを埋め込めばよい。 ↩

blog docker oss