giscusの使い方を徹底解説：GitHub連携で作るモダンなコメント機能

ブログやドキュメントサイトを運営していると、「読者とどうやってコミュニケーションを取るか」は大きな課題になります。従来はDisqusなどの外部コメントサービスが定番でしたが、広告表示やトラッキング、デザインの不統一が気になる人も多いはず。そこで注目されているのが giscus です。
giscusは、GitHub Discussionsをバックエンドにした、オープンソースで軽量なコメントシステム。この記事では、giscusの特徴から導入手順、実運用のコツまでを分かりやすく解説します。

giscusとは何か？

giscusは、GitHub上のDiscussionsをコメント欄として利用するウィジェットです。Webページに埋め込むと、訪問者のコメントが指定したGitHubリポジトリのDiscussionsに紐づいて保存されます。
主な特徴は以下の通りです。

  • 広告なし・無料：個人ブログや技術ドキュメントに最適
  • プライバシー配慮：サードパーティトラッカーを使わない
  • テーマ切り替え対応：ダーク/ライトなどサイトデザインと統一可能
  • Markdown対応：技術ブログとの相性が抜群
  • GitHub認証：スパム耐性が高い

特に、GitHubを日常的に使うエンジニアにとっては、運用コストが低く、履歴管理やモデレーションがしやすい点が大きなメリットです。

導入前の準備

giscusを使うには、次の3つを用意します。

  1. GitHubアカウント
  2. Discussionsを有効化したリポジトリ
  3. giscus GitHub Appのインストール

まず、コメントの保存先となるリポジトリを作成し、リポジトリの「Settings」→「Features」からDiscussionsを有効にします。次に、giscusの公式ページからGitHub Appをインストールし、対象リポジトリへのアクセスを許可してください。これで基本的な準備は完了です。

giscusの設定と埋め込み

公式サイトの設定ジェネレーターを使うと、埋め込み用のスクリプトが自動生成されます。設定項目は以下がポイントです。

  • Repository：コメントを保存するリポジトリ
  • Mapping：ページとDiscussionの対応方法（URL、pathname、titleなど）
  • Category：投稿されるDiscussionのカテゴリ
  • Theme：light、dark、preferred-color-scheme など
  • Language：表示言語（日本語可）

生成された<script>タグを、コメントを表示したい位置（記事下など）に貼り付ければ完了です。
Hugo、Next.js、Astroなどの静的サイトジェネレーターでも、コンポーネント化すれば簡単に再利用できます。

実運用での注意点

1. パブリックリポジトリが前提
giscusはパブリックリポジトリでの運用が基本です。プライベートリポジトリでは、読者が閲覧・投稿できないため注意してください。

2. モデレーションの設計
コメントはGitHub Discussionsとして蓄積されるため、Issueと同様に削除、ロック、通報対応が可能です。荒らし対策として、カテゴリを分けたり、最初の投稿を承認制にするなど、運用ルールを決めておくと安心です。

3. SEOへの影響
コメントはクライアントサイドで読み込まれるため、検索エンジンに直接インデックスされにくい場合があります。SEOを重視する場合は、記事本文の情報設計をより重視しましょう。

他サービスとの比較

  • Disqus：導入が簡単だが、広告やトラッキングが気になる
  • Utterances：GitHub Issuesを使うが、議論向きではない
  • giscus：Discussionsを使うため、スレッド構造や返信が分かりやすく、長期的な議論に向く

技術ブログやドキュメントの「質問・補足・改善提案」を受け付けたい場合、giscusは特に相性が良い選択肢です。

まとめ

giscusは、無料・広告なし・GitHub連携という現代的な要件を満たしたコメントシステムです。導入もスクリプトを貼るだけで簡単、運用もGitHubの既存機能を活用できるため、保守コストが非常に低いのが魅力です。
もしあなたが、技術ブログや個人サイトで「読者と健全に議論できる場」を探しているなら、giscusは有力な選択肢になるでしょう。まずはテスト用リポジトリで試し、サイトのデザインや運用方針に合うかを確認してみてください。