최근 블로그 댓글 시스템을 utterances에서 giscus로 전환했다. 이 글에서는 giscus를 적용한 과정을 다룬다.
배경
기존 댓글 시스템
utterances에서 댓글을 관리하던 방식
블로그를 처음 만들 당시에 댓글 시스템으로 utterances를 선택했다. utterances는 GitHub Issues를 기반으로 동작하며, 다음과 같은 장점이 있었다.
- 설치와 사용이 간단함: 간단한 스크립트 삽입만으로 적용 가능.
- 데이터베이스 관리 불필요: 별도 서버 없이 GitHub Issues로 댓글 저장.
- GitHub 인증 지원: GitHub 계정으로 로그인 가능.
- 광고 없음: 더 나은 사용자 경험 제공.
그 이후로 별다른 문제 없이 계속 utterances를 사용해왔다.
giscus로 전환
그러던 중 최근에 giscus라는 댓글 시스템을 알게 되었다. giscus는 GitHub Discussions를 기반으로 동작하며, utterances와 비교할 때 아래와 같은 장점이 있었다.
- GitHub Discussions 활용: Issues보다 댓글 관리에 적합한 구조를 제공.
- 게시글 반응(Reaction) 지원: 댓글뿐만 아니라 게시글에 대한 사용자 반응(이모지)도 확인 가능.
- 대화 뷰 제공: 답글이 계층적으로 표시되어 대화 흐름 파악이 쉬움.
특히 사용자 반응과 대화 흐름을 볼 수 있는 부분이 블로그 운영을 더 편리하게 만들어줄 것 같아, giscus로 전환을 결정하게 되었다.
giscus 적용
giscus를 블로그에 적용하는 과정은 크게 세 단계로 나뉜다.
댓글 관리용 저장소 준비
giscus는 Public 저장소에서만 작동한다. 내 블로그 저장소는 Private이었기 때문에 별도의 댓글 관리용 Public 저장소를 생성했다.
- 저장소 준비 과정
- 새로운 Public 저장소 생성 (예시:
blog-comments) - Discussions 기능 활성화
Settings > General > Features에서 Discussions를 활성화.
- 카테고리 설정
댓글 카테고리 생성 (예시:
Comments)![create category]()
기존 카테고리 삭제
![manage category]()
- 새로운 Public 저장소 생성 (예시:
- giscus 앱 설치
giscus 앱을 설치한다.
![install giscus]()
댓글 관리용 저장소를 선택한다.
![install giscus]()
giscus 스크립트 생성
giscus의 설정 마법사를 이용해 스크립트를 생성한다.
- 저장소
- 위에서 만든 저장소로 설정 (예시:
23tae/blog-comments)
- 위에서 만든 저장소로 설정 (예시:
- 페이지 ↔️ Discussions 연결
- Discussion 제목이 페이지
경로를 포함
- Discussion 제목이 페이지
- Discussion 카테고리
- 위에서 만든 카테고리로 설정 (예시:
Comments) - ‘이 카테고리에서만 Discussion 찾기’ 체크
- 위에서 만든 카테고리로 설정 (예시:
기능
![feature]()
블로그 설정
위에서 생성한 스크립트를 바탕으로 _config.yml 파일을 설정한다.
1
2
3
4
5
6
7
8
9
10
11
comments:
active: 'giscus'
giscus:
repo: 'your-github-username/blog-comments'
repo_id: 'your-data-repo-id'
category: 'Comments'
category_id: 'your-data-category-id'
mapping: 'pathname'
input_position: # optional, default to 'bottom'
lang: # optional, default to the value of `site.lang`
결과
Discussions에 추가된 댓글
답글과 이모지 모두 확인할 수 있다