GitHub Pages で使えるコメントウィジェット utteranc.es が便利

先日ブログエンジンを自作して, GitHub Pages で自分のブログを構築したんですが, そこにコメント欄を付けたくて採用した utteranc.es がかなりいい感じなので書いておきます.

仕組み

レポジトリにあらかじめ utterances app をインストールしておくと, ブログ記事に対応した Issue がそのレポジトリに作られます. そして, ブログ記事のコメント欄に書き込むと該当の Issue のコメント欄に書き込まれ, Issue のコメント欄の内容がブログ記事のコメント欄の内容になります.

これによって, 静的サイトに簡単にコメント欄を付けることができます. ただし, コメントには GitHub のアカウントが必要になります.

utteranc.es はオープンソースで, 公式サイトいわくトラッキングも広告もなく, コメントデータは全て GitHub issue に保存されるので, 安心して使うことができそうです.

導入方法

コメント欄を付けたい GitHub Pages があるレポジトリに utterances app をインストールしたら, 記事に以下のスクリプトタグ

<script src="https://utteranc.es/client.js"
        repo="<username>/<repository>"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

を貼り付けるだけです(<username>, <repository> はそれぞれ GitHub のユーザ名, レポジトリ名に変えてください).
utteranc.es のウェブサイトで細かいカスタマイズをしたスクリプトタグを生成することができ, 例えば配色テーマや Issue との対応のさせかたなどを変更することができます.

いいぞ

シンプルでエレガントなのであんまり書くことがないですね. GitHub のアカウントが必要なのが難点ですが, 勝手に広告を入れたりトラッキングしてきたりする外部サービス¹に頼るよりよっぽどいいと思います. なんで知名度がないのか不思議なのでみんな使いましょう.

---

1. Disqus お前お前お前お前お前お前お前お前 ↩