HugoブログにGiscusコメントシステムを統合する

これは自分のブログシステムを構築するための第三回目のチュートリアルで、ブログにコメントシステムを追加します。

ブログを構築する過程で、良いコメントシステムはインタラクションを大幅に向上させることができます。今日は、GitHub Discussionsに基づくオープンソースコメントシステムであるGiscusをHugoブログに統合する方法を紹介します。

なぜGiscusを選ぶのか？

• 🚀 サーバー不要、GitHub Discussionsに基づく
• 🔒 安全かつ信頼性が高い、コメントデータはGitHub上に保存
• 🧩 ダークモードと適応型テーマをサポート
• 💬 匿名コメント（オプション）をサポート
• 🌍 多言語インターフェースのサポート

準備

始める前に、以下が必要です：

1. GitHubでホスティングされているリポジトリ
2. Discussions機能が有効化されている
3. Hugoブログ（任意のテーマで構いません）

ステップ1：GitHub Discussionsを有効化する

1. あなたのブログコードリポジトリを開きます（例：username/blog）。
2. Settings → Features をクリックし、Discussions にチェックを入れます。

   

ステップ2：Giscusを設定する

https://giscus.appに移動し、ページ内で：

1. あなたのGitHubリポジトリを選択します。
2. コメントをどのDiscussionカテゴリーに作成するか設定します（新しくannouncementなどを作成できます）。
3. カスタム設定：
   • Mapping：pathnameを選択することをお勧めします。つまり、ページパスに関連付けられた議論です。
   • Reaction：いいねなどの操作を許可するかどうか。
   • テーマ：light, dark, preferred_color_schemeなどをサポート。
4. 生成された<script>コードをコピーします。

   

   生成されたコードの例は以下の通りです：

<script src="https://giscus.app/client.js"
        data-repo="yourname/yourrepo"
        data-repo-id="REPO_ID"
        data-category="General"
        data-category-id="CATEGORY_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"
        crossorigin="anonymous"
        async>
</script>

ここでdata-repo、data-repo-id、data-category-idの3つのパラメータを記憶しておく必要があります。後の設定で使用します。

ステップ3：giscusをあなたのhugoテーマに統合する

私が使用しているテーマはhugo-narrowで、giscusコメントシステムが統合されていますので、ちょっと設定するだけで済みます。以下が私の設定です：

  comments:
    enabled: true
    # giscus, disqus, utterances, waline, artalk, twikoo
    system: "giscus"

    giscus:
      repo: "data-repo"
      repoId: "data-repo-id"
      category: "Announcements"
      categoryId: "data-category-id"
      mapping: "pathname"
      strict: "0"
      reactionsEnabled: "1"
      emitMetadata: "0"
      inputPosition: "bottom"
      theme: "preferred_color_scheme"
      lang: "ja"

ここでは、repo、repoId、categoryIdをステップ2で保存した値に置き換えることを忘れないでください。そうしないと、コメントが正常に表示されません。また、enableをtrueに、systemをgiscusに設定する必要があります。そうしないとコメントは表示されません。

最終的に、記事の下部にこのようなインターフェースが表示されます：

テスト

この記事の下にコメントを書いて、コメントが正常に表示されるか確認できます。コメント後のコメントはGitHubのDiscussionで確認できます。

例えば、こちらで私のブログのコメントを見ることができます。