・GitHubベースなので無料で広告なし。・コメントするためにGitHubアカウントが必要その他、以下のようなサービスもあります。以下のチュートリアルをGatsbyに適用します。参考資料giscusGitHub設定リポジトリ作成GitHubにログインし、リポジトリを作成する。普段利用しているものとは違うアカウントを作成しました。giscusをインストールチュートリアルのアドレスに従い、インストールします。https://github.com/apps/giscusリポジトリのDiscussion機能をONにする。するとGitHubのDiscussion機能が利用できるようになります。Discussion機能の理解(ブログのコメント機能とは関係なく)Discussion機能の仕組みを理解するため、GitHub画面からコメントを入れてみます。Discussion機能は、以下のような仕組みです。Discussion:1つの議題Comment:議題に対する意見Reply:意見に対する返信DDiscussionを作成してみます。Discussion作成Discussionに対し、コメントを入れます。マークダウン記法が使えます。2つ作成した結果です。giscusのソースコードを取得する以下のページからソースコードを取得します。好みに応じて、設定を入れていきます。→giscus「ページとDiscussions連携設定」では、GitHubに作られるDiscussionのタイトルのつけ方を選べます。今回は「Discussionのタイトルに<title>タグを利用する」を設定したので、ブログの記事ページの<title>タグの内容が、「Discussion」の名前になります。(イメージは後掲します)Gatsbyにgiscusコンポーネントを作成するここまで設定すると、ブログに設定する<script>タグが、設定項目の下のほうに表示されます。scriptタグはそのままGatsbyに使えないので、react-helmetを使います。以下ページに従ってインストールします。react-helmetgatsby-config.jsのpluginsオブジェクトに以下を追加します。/>コンポーネントを作成します。ポイントは以下の2点です。<Helmet>タグの中に、設定ページからコピーしてきた<script>を入れる。クラス名がgiscusであるタグ(<div>タグなど)を入れる。このタグを入れることで、<script>はどこにコメント欄を表示するか判断する。)}ブログの記事ページにコンポーネントを追加あとはいつも通りコンポーネントを記事ページに追加するだけです。記事ページの下部にコメント欄が表示されました。コメントしようとすると、権限を求められます。このワンクリックが面倒くさいと思われそうな気もしますね。コメントしてみるとこうなりました。GitHubのコンソールに戻って、リポジトリのDiscussion機能を見ると、Discussionが追加されていることがわかります。Discussionのタイトルは、設定したとおり<title>タグの中身が自動設定されています。おわりにgiscusを使ってコメント機能を実装しました。GitHubアカウントのログインが必要、というデメリットさえ飲めれば、簡単にコメント機能を実装することができます。売れっ子ブログであれば有料の機能でセキュリティも固めたほうが良いかもしれません。事業会社のシステム部門で働きはじめて5年目の会社員。システム企画/要件定義/システムアーキテクチャ等。Twitter→@bun_sugi過去の記事についてはてなブログに掲載の記事(主にプログラミングメモ)についてはこちらに掲載しております。エンジニアを目指す日常ブログお問い合わせ|プライバシーポリシ。