【Astro】GithubのPrivateリポジトリにGiscusのコメント機能を導入する方法

Astroでブログやウェブサイトを構築していると、訪問者とのコミュニケーション手段としてコメント機能を追加したいという場合があるでしょう。

しかし、コメント機能を一から自作するのは技術的なハードルが高い上に、運用やセキュリティ面でも手間がかかります。

そこで今回の記事では、Github Discussionsをベースにしたシステム「giscus」を導入して、Astroのサイトにコメント機能を追加する方法を紹介します！

Astro製のサイトにコメント機能を手軽に追加したい場合は、ぜひこの記事を参考に試してみてください。

giscusとは

本題に入る前に、まずはgiscusについて簡単に説明します。

giscusに関する説明をスキップしたい場合はこちらから読み進めてください。

giscusの特徴

giscus とは、Github Discussionsを利用したコメントシステムです。

メリットを簡単にまとめると、以下の通りです。

• オープンソース
• 利用は完全無料
• データベース不要（データはGithub Discussionsに保管される）
• Light/Darkモードに対応
• 多言語対応
• 自動でコメントや編集内容を取得
• セルフホスティング可能

無料で使える上にデータベースを用意しなくてもいいので、実装のハードルが低いのが強みですね。

giscusの注意点

上で紹介した通りgiscusには多くのメリットがありますが、以下のような注意点もあります。

• コメントするにはGithubアカウントが必要
• publicリポジトリのみで利用可能

コメントするにはGithubアカウントが必要

giscusで作成したコメント機能でコメントやリアクションを行うには、Githubアカウントが必要となります。

開発者であればGithubアカウントを持っていることが多いので良いですが、それ以外のユーザーはコメント機能は一切使えないという問題があります。

そのため、サイトのターゲットによってはgiscusは適していないかもしれません。当サイトのようなテックブログであれば、訪問者の多くは開発者なので問題ないでしょう。

publicリポジトリのみで利用可能

giscusを利用するには、Githubのリポジトリがpublicである必要があります。

しかし、この点に関してはPrivateリポジトリでも利用する方法がありますので、問題ありません。

giscusコメント専用のリポジトリを新規で作成し、

• プロジェクトのリポジトリをprivateにする
• コメント専用のリポジトリをpublicにする

という方法で、Privateリポジトリでもgiscusを利用することができます。

Astroでgiscusを利用する手順

ここからは、実際にAstroのサイトにgiscusを導入する手順を解説します。

1. Githubでpublicの新規リポジトリを作成する
2. SettingsからDiscussionsにチェックをつける
3. giscusをインストールする
4. giscusの設定を行う
5. scriptタグを記事ページに追加する

1. Githubでpublicの新規リポジトリを作成する

まず最初に、giscusのコメントを保管するためのリポジトリを作成します。

※もしプロジェクトのリポジトリがpublicの場合は、スキップしてください。

2. SettingsからDiscussionsにチェックをつける

次に、リポジトリの[Settings]ページに移動します。

[Discussions]にチェックをつけます。

3. giscusをインストールする

次に、giscusアプリをインストールします。

Github Appsの giscusページ にアクセスし、[Install]をクリックします。

giscusを利用するリポジトリを選択し、[Save]をクリックします。

4. giscusの設定を行う

giscusがインストールできたので、次はgiscusの設定を行います。

https://giscus.app/ja にアクセスします。

まずは[設定]→[リポジトリ]から、ユーザー名/リポジトリ名を入力します。

全ての条件を満たしている場合は、緑のチェックマークが表示されるはずです。

上記以外の設定に関しては、自身のサイトに合わせて行ってください。

• ページとDiscussions連携設定
• Discussionで使用するカテゴリ
• 機能
• テーマ

これらの4つの設定を行うことで、giscusの設定は完了です。

このうちの「Discussionで使用するカテゴリ」に関してはAnnouncementsにすることが推奨されているので、Announcementsを設定しておきましょう。

これらの設定が終わると、埋め込み用のscriptタグが表示されるので、コピーしておきます。

これでgiscus側での作業は完了です！

5. scriptタグを記事ページに追加する

最後に、Astroプロジェクトをエディタで開き作業を行います。

Comments.astroコンポーネントを作成し、先ほどコピーしたscriptタグをペーストします。

また、scriptタグにはis:inlineを追記しておきます。

    <script is:inline src="https://giscus.app/client.js"
  data-repo="リポジトリ名"
  data-repo-id="リポジトリID"
  data-category="カテゴリー"
  data-category-id="カテゴリーID"
  data-mapping="pathname"
  data-strict="0"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-input-position="bottom"
  data-theme="preferred_color_scheme"
  data-lang="ja"
  data-loading="lazy"
  crossorigin="anonymous"
  async>
</script>
  

こちらのコードはダミーですので、自身の埋め込みタグを使用してください。

スタイルを追加する場合は、styleタグにis:globalディレクティブを付与することで適用できます。

    <style is:global>
  .giscus {
    margin-top: 40px;
  }
</style>
  

次に、このComments.astroコンポーネントを記事ページに追加します。

記事のテンプレートファイルを開き、コメント機能を表示したい箇所にCommentsコンポーネントを追加してください。

    ---
import Comments from '@/components/Comments.astro';
---
 
<Layout>
  <!-- 任意の箇所に埋め込む -->
  <Comments />
</Layout>
  

これで記事ページをブラウザで開くと、添付のようなコメントセクションが表示されているはずです。

以上でgiscusの導入は完了です！

【まとめ】GithubのPrivateリポジトリにGiscusのコメント機能を導入する方法

今回は、Astroのサイトにgiscusを導入する方法を解説しました。

Privateリポジトリでサイトを管理している場合でも、コメント用のPublicリポジトリを別で作成することで利用可能になります。

Astroで作成したサイトやブログにコメント機能を追加したい場合は、ぜひgiscusを利用してみてください。

もしこの記事が役に立ったなら、以下からリアクションやコメントをいただけると嬉しいです・・！