はじめに #
本ブログではHugoのテーマ Blowfish を使用しています。 Hugoで構築した静的サイト（SSG）のブログにコメント機能を導入するにあたり、いくつか候補を検討しましたが、最終的に Giscus を選択しました。
検討の際、以下のツールが候補にありましたが、私の用途には合いませんでした。
- remark42: オープンソースでセルフホストできる優秀なツールですが、コメントデータ運用のために別途コンテナやサーバーを常時起動・管理する必要があるため、手軽さを重視して見送りました。
- Disqus: 導入自体は非常に簡単ですが、外部サービスにコメントデータを預けることになる点や、無料プランで表示される煩わしい広告、トラッキングなどが気になり、候補から外しました。
Giscusであれば、GitHub Discussionsをバックエンドに利用するため自前でのサーバー管理が不要です。広告もなく、データもGitHub上で透明性高く管理できるため非常にクリーンな運用が可能です。唯一の注意点として、コメントを投稿する読者側もGitHubアカウントが必要になりますが、技術系のブログであれば親和性が高いと判断しました。そんなにコメント来ることもないでしょうし。
なぜGiscusを選ぶのか：技術ブログに最適なメリット #
静的サイトジェネレーター（SSG）で構築したブログは、WordPressなどの動的サイトと違ってデータベースを持ちません。そのため、コメント欄を実装するには外部の仕組みを頼る必要があります。
数あるコメントシステムの中でGiscusが際立っている理由は以下の通りです。
- 完全無料かつオープンソース: 広告の非表示やデータ量による課金がありません。
- GitHubによる安全な認証: スパムコメントの書き込みを防止できます。
- テーマに合わせた外観カスタマイズ: ライトモードやダークモードへの切り替えにネイティブで対応しています。
- GitHub通知の活用: 読者からコメントがついた際、使い慣れたGitHubの通知機能でリアルタイムに検知できます。
1. GitHub リポジトリの準備 #
GiscusはGitHub DiscussionsのAPIを利用してコメントを読み書きするため、ホストしているリポジトリが以下の条件を満たしている必要があります。
- リポジトリを「Public」にする: 一般の読者がコメントを閲覧・書き込みできるようにするため、公開リポジトリである必要があります。
- GitHub Discussions を有効化*: リポジトリの
Settings>General>FeaturesセクションにあるDiscussionsにチェックを入れます。 - giscus app をインストール: giscus app にアクセスし、リポジトリへのアクセスを許可しておきます。
2. Giscus スクリプトの取得 #
環境が整ったら、Giscus公式サイトにアクセスしてブログに埋め込むための専用コードを生成します。
- 参考ページ: giscus.app
giscus.appのページにアクセスし、画面の指示に従って設定したいパラメータ（リポジトリ名、Discussionsのカテゴリー、テーマなど）を選択・入力していきます。
設定をすべて埋めると、画面最下部に以下のような構成の script タグ一式 が自動生成されるので、これをクリップボードにコピーしておきます。
3. Blowfishテーマでの実装（comments.html の作成） #
HugoのBlowfishテーマでは、独自のコメント用レイアウトファイルである layouts/partials/comments.html を配置することで、テーマ側のコードを汚さずにコメント機能をオーバーライド（上書き実装）できます。
- プロジェクトルートにある
layouts/partials/ディレクトリへ移動します。（ディレクトリが存在しない場合は新規作成します） comments.htmlという名前のファイルを新規作成します。- 先ほど「2.」の工程でGiscus公式サイトから取得したスクリプトコードを、そのままファイル内に貼り付けて保存します。
Blowfishテーマは、記事のメタデータ（Front Matter）に特定のフラグが立っている場合、この comments.html を自動的に記事の末尾へとレンダリングしてくれる仕組みになっています。
4. 記事の Front Matter を設定 #
コメント欄を表示させたい記事の Markdown ファイル（.md）を開き、冒頭のメタデータ（Front Matter）へ showComments: true を追記します。
- 設定例
---
title: hoge
showComments: true
---逆に、特定の告知記事や固定ページなど、コメントを受け付けたくないページでは showComments: false に設定するか、行ごと削除すればコメント欄は非表示になります。
5. ローカルでの動作確認とデプロイ #
設定が完了したら、ローカル環境で表示を確認します。
# ローカルサーバー起動
hugo serverブラウザで該当の記事を開き、記事の最下部にGitHubサインインボタン付きのコメント欄が表示されていれば実装完了です。
実際にテストコメントを書き込んでみると、連携したGitHubリポジトリの「Discussions」タブ内に対象のディスカッションが自動生成され、コメントが同期されていることが確認できます。
公式ドキュメント（参考） #
より詳細なカスタマイズや詳細な仕様については、以下の公式ガイドを参照してください。
