📘 [GithubPages] Jekyll hydejack 댓글 기능 추가 - 6

2025년 03월 08일 in Study / ETC on #Jekyll #GithubPages

[GithubPages] Jekyll hydejack 댓글 기능 추가

---

• ✅Giscus 설정 방법
• 📑 Reference

그저 공부기록용 목적으로 블로그를 개설했지만 언젠가 블로그를 방문하는 사람이 생기지 않을까??😅 하는 생각에 언젠가 방문자들과 소통할 수 있는 댓글 기능이 있으면 좋겠다고 생각이 든다. jekyll hydejack은 정적 사이트 기반의 테마로 댓글 기능은 외부 서비스를 연동하여 구현해야 한다. 대표적인 방식은 disqus giscus utterances 3가지가 있다.

3가지 방식을 비교분석 해보았다.

시스템	Disqus	Giscus	Utterances
기반 플랫폼	Disqus 자체 시스템	GitHub Discussions	GitHub Issues
로그인 방식	이메일, SNS 가능	GitHub 계정만 가능	GitHub 계정만 가능
광고 여부	✅ (무료 플랜 기준)	❌	❌
속도	느림 또는 중간	빠름	빠름
무료 여부	조건부 무료 (프리미엄 유도)	✅ 완전 무료	✅ 완전 무료
테마 연동	다크모드 미지원	✅ 다크모드 지원	✅ 다크모드 지원
모바일 UI	불안정 (광고 혼잡)	✅ 깔끔하고 반응형	✅ 단순하고 반응형
개발자 친화성	❌ 일반 사용자 중심	✅ GitHub 기반 협업 친화	✅ 깃허브 댓글처럼 직관적
데이터 저장 위치	Disqus 서버	GitHub Discussion thread	GitHub Issue thread
익명 댓글	✅ 가능	❌ GitHub 계정 필요	❌ GitHub 계정 필요

disqus는 다양한 소셜 플랫폼 로그인이 가능하지만 광고가 있고 ui가 마음에 들지 않아서 탈락 gisus, utterances 두 서비스 다 Github API를 활용한 서비스인데 기반 플랫폼에 차이가 있다. 그러나 giscus를 선택한 이유는 issue보다는 discussions이 관리가 편할 것 같으며 대댓글 기능과 글 리액션 기능이 있어서 사용하기로 결정했다.

✅Giscus 설정 방법

---

1. 공개 저장소여야 합니다. 그렇지 않으면 방문자들은 Discussion을 볼 수 없습니다.
2. giscus 앱이 설치되어 있어야 합니다. 그렇지 않으면 방문자들은 댓글과 반응을 남길 수 없습니다.
3. Discussions 기능이 해당 저장소에서 활성화되어 있어야 합니다.

1,2,3번 조건이 완료되면 https://giscus.app/ko 설정 페이지에 들어간다.

차례대로 내려가면서 설정하면 아래쪽에 코드가 나올 것이다. 코드를 복사합니다.

# file: _includes/body/comments.html
<script src="https://giscus.app/client.js" 
data-repo="[ENTER REPO HERE]" 
data-repo-id="[ENTER REPO ID HERE]"
data-category="[ENTER CATEGORY NAME HERE]" 
data-category-id="[ENTER CATEGORY ID HERE]" 
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="ko" 
crossorigin="anonymous" 
async>
</script>

includes/body/comments.html 에 복사해둔 코드를 붙여넣습니다.

댓글 기능 추가 성공!!! 매일 하나씩 기능을 구현하다 보니 뿌듯하고 재미가 있습니다. 앞으로 열심히 블로그 활동 해보겠습니다.😀

---

📑 Reference

---

• https://github.com/apps/giscus
• https://disqus.com/
• https://utteranc.es/

---