[Hugo] 静的ブログにgiscusでコメント機能を追加する方法
![[Hugo] 静的ブログにgiscusでコメント機能を追加する方法](https://assets.lain-lab.com/images/uploads/hugo-giscus.webp)
はじめに
Hugoに以前から追加したかったコメント機能を追加してみましたのでその備忘録メモです。
AIに相談したところ、いくつか選択候補を紹介してもらいましたが、一番お勧めっぽいgiscusをとりあえず導入して見ます。
giscus について
GitHub Discussions を使った軽量なコメントシステムで、Hugoのような静的なサイトにも導入する事が出来、Githubのアカウントがあれば簡単に使えてコメントも出来るようになります。
Githubのアカウントが必要になるので、その点がネックですが、匿名での投稿防止の他、セキュリティ管理も出来る為、安心して利用できるのがメリットです。
🧩 giscus の魅力
- 静的ブログでもOK（JSで動的読み込み）
- GitHub Discussionsを使うのでスパム対策も強い
- デザインが自然
- コメント管理はGitHubでできる！
📝 giscus のコメント管理方法
giscusのコメント管理は、GitHub Discussions上で行います。
- コメント投稿 → GitHub Discussions に自動でスレッドが生成
- 管理者は GitHub 上でそのスレッドにアクセス・返信・削除可能
- 通知も GitHub 通知に届く（もしくはメール連携）
🧩 コメントに関する課題と対策
| 課題 | 解決策 |
|---|---|
| スパム対策 | GitHubアカウント必須にする（giscus/utterances） |
| モデレーション | GitHub Discussions で管理 |
| 管理負担 | 通知ON＋リンク付き一覧で簡単管理 |
| 静的表示との相性 | JSで読み込むので静的でも問題なし |
📌 Hugo + giscus 導入の流れ（概要）
- GitHub Discussions を有効化（公開リポジトリ）
- giscus.app でスクリプト生成（Hugo用にカスタマイズ）
- layouts/partials/comments.html を作成
- single.html の末尾で {{ partial “comments.html” . }} を読み込む
- custom.css でコメント部分のスタイル調整（任意）
STEP 1：GitHub Discussions を有効化（公開リポジトリ）
対象のブログ用リポジトリ（例：fixxtan/my-blog）へアクセス
Settings → Features
に進む
「Discussions」にチェックを入れて有効化する
✅ GitHub Discussions が https://github.com/ユーザー名/リポジトリ/discussions で利用可能になります
STEP 2：giscus.app でスクリプト生成（Hugo用にカスタマイズ）
giscusアプリをインストール
インストール時の選択画面では、ブログ用に作成したリポジトリを選択した方が無難だと思います。
{{< link-card url=“https://github.com/apps/giscus” title=“Build software better, together” description=“GitHub is where people build software. More than 150 million people use GitHub to discover, fork, and contribute to over 420 million projects.” image=“https://github.githubassets.com/assets/github-logo-55c5b9a1fe52.png”
}}
giscus 公式サイトで必要情報を入力
{{< link-card url=“https://giscus.app/” title=“giscus” description=“A comments widget built on GitHub Discussions.” image=“https://opengraph.githubassets.com/4f866d5b634e7cd5422af77f8dbfb6d48dd288b7c5c18326544c1973210320ed/giscus/giscus”
}}
ページを開き、下記情報を入力：
| 項目 | 設定例 |
|---|---|
| Repository | fixxtan/my-blog（あなたのGitHub） |
| Category | General（Discussions内カテゴリ） |
| Mapping | pathname（記事URLに連動） |
| Theme | light または preferred_color_scheme |
| Language | ja（日本語対応） |
必要情報入力すると下にスクリプトコードが表示されるのでコピーします。
下記はサンプル
<script src="https://giscus.app/client.js"
data-repo="fixxtan/my-blog"
data-repo-id="XXXXXXXXXX"
data-category="General"
data-category-id="XXXXXXXXXX"
data-mapping="pathname"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="bottom"
data-theme="light"
data-lang="ja"
crossorigin="anonymous"
async>
</script>STEP 3：layouts/partials/comments.html を作成
下記のHTMLファイルを編集
my-blog/layouts/partials/comments.html
<section id="comments">
<h2>💬 コメント</h2>
<script src="https://giscus.app/client.js"
data-repo="fixxtan/my-blog"
data-repo-id="あなたのRepo ID"
data-category="General"
data-category-id="あなたのCategory ID"
data-mapping="pathname"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="bottom"
data-theme="light"
data-lang="ja"
crossorigin="anonymous"
async>
</script>
</section>※ Repo ID / Category ID は giscus.app に GitHub ログインすると自動取得できます。
✅ カスタマイズ例（必要に応じて） ― data-theme=“light” → preferred_color_scheme にするとダークモードにも対応 ― data-input-position=“bottom” → top にすると入力欄が上に来る ― data-lang=“ja” → 日本語UIで表示されます
STEP 4：single.html の末尾で comments.html を読み込む
下記のファイルを編集します。（ブログ記事表示用HTMLファイル）
my-blog/layouts/_default/single.html
< /main > または < /article> の直前など、適切な場所に以下を追記：
注意「｛」を半角の「{」に変換してください。
｛｛ partial "comments.html" . ｝｝※ PaperMod テーマでは main.html や single.html の構造が異なる可能性があります。
見つからない場合は、PaperMod の場合、以下にあるので
themes/PaperMod/layouts/_default/single.html
single.htmlファイルを以下へコピー（継承）します。
my-blog/layouts/_default/single.html
※Hugoは layouts/_default/ に同名ファイルがあると、テーマ内のファイルを上書きしてそちらを優先的に読み込みます。
🎯 確認
- hugo server でローカル確認
- コメント欄がページ下部に表示されるか
- 投稿には GitHub ログインが必要（動作確認には別アカウントでもOK）
- GitHub Discussionsにスレッドが生成されているか確認
コメントの管理
投稿された記事の管理は、GitHubのdiscussionsページで行えます。
[Hugo] 静的ブログにgiscusでコメント機能を追加する方法
Hugoにコメント機能をgiscusで実装する方法の紹介
humanxai.info
COMM_LOG: hugo-giscus