GitHub 블로그에 댓글 기능 달기 (Utterances 활용)

내가 쓴 글에 댓글을 달 수 있었으면 좋겠다는 생각에, GitHub 기반 블로그에서 댓글 기능을 구현해보았습니다.

1. 목표

• 블로그 게시글에 댓글 작성 기능 추가
• 댓글 내용을 GitHub Issue로 관리

2. 구현 순서

1️⃣ 댓글용 GitHub Repository 만들기

댓글을 따로 관리할 수 있도록 전용 레포지토리를 생성합니다.

Issues 탭이 활성화되어 있으면 준비 완료입니다

2️⃣ Utterances 설치

Utterances 공식 사이트에 접속하여 아래 과정을 따릅니다

1. 페이지 중간쯤에 나오는 utterances app 링크 클릭
2. Install 버튼 클릭
3. Only select repositories 선택 후, 아까 만든 댓글용 레포 선택
4. 다시 Install

설치가 완료되면 다시 Utterances 메인으로 돌아옵니다.

3️⃣ Script 생성 및 삽입

1. owner/repo 형식으로 댓글용 저장소 입력 예: wjswldjs/wjswldjs.github.io.comment

2. 하단 스크립트 복사

3. 복사한 스크립트를 블로그 테마 파일 /_layouts/post.html의 가장 하단에 붙여넣기

  ...
  </div>
  <!-- div.post-tail-wrapper -->

  <script
    src="https://utteranc.es/client.js"
    repo="wjswldjs/wjswldjs.github.io.comment"
    issue-term="pathname"
    theme="github-light"
    crossorigin="anonymous"
    async
  ></script>
</article>

3. 결과

정상적으로 적용되면 블로그 게시글 하단에 댓글 창이 생깁니다 ✨

실제로 댓글을 달아보면 GitHub의 Issue 탭에서 게시글별로 댓글이 잘 정리되어 있는 걸 확인할 수 있습니다.

4. 정리

• Utterances를 이용하면 GitHub 기반 Blog 댓글 시스템을 간편하게 붙일 수 있다.
• 별도의 DB 없이도 GitHub 저장소로 댓글을 관리할 수 있다는 점이 큰 장점인 것 같다.