Giscus 사용하기
Github Blog에 댓글 기능 적용하기
필요성
지금껏 네이버 블로그나 벨로그, 티스토리를 사용할 땐 댓글을 지원해서 필요성을 느끼지 못했지만 댓글이 없는 깃허브 블로그를 조금씩 익혀가다보니 댓글 기능이 있었으면 하는 바람이 샘솟았다.
서비스 종류
jekyll 테마 중 cirpy는 댓글 기능으로 Giscus, Disqus, Utterances를 지원한다. 우선 각각 기능에 대해 간단히 적어보았다.
| Disqus | Giscus | Utterances |
|---|---|---|
| SNS 계정 (페이스북, 구글 등)도 가능 | Github 계정 필수 | Github 계정 필수 |
| 무겁다 | 가볍다 | 가볍다 |
| 무료 이용 시 광고 (유료 사용 시 광고 제거) | 광고 X | 광고 X |
| 블로그 댓글 호스팅 서비스 | 오픈 소스 | 오픈 소스 |
| 기업에서 서비스 제공 | Utterances 기반으로 개발 / Discussions 사용 | Issue 사용 |
| 기능 多 | 커스텀 테마 지원, 다양한 언어 지원 외 대화에 최척화된 기능 보유 | issue(댓글) 등록 시 슬랙 / 메일 등을 통한 알림 기능 구현 가능 |
| 마크다운 사용 X | 마크다운 사용 O | 마크다운 사용 O |
| 서비스 안정성이 높다. | 지속적으로 업데이트 중이다. (최근 commit - 2달 전) | (최근 commit - 2년 전) |
이 중 나는 개인적으로 세 가지 중 디자인이 마음에 들었던 Giscus를 선택했다. (이 이유 외에도 Issue 보다는 Discussions에 댓글이 저장되는게 더 나아보였다.)
Giscus 사용하기
Repository 설정
- giscus를 연결한 저장소가 public이어야 한다.
- giscus 앱이 설치되어 있어야 한다.
- Discussions 기능이 해당 저장소에서 활성화되어 있어야 한다.
설치 방법
Giscus 앱을 설치한다.1 위 경로를 통해 github Marketplace에 들어가면 아래와 같은 화면이 나온다.
앱 설치 버튼 클릭 시 설치할 github 계정을 선택하는 페이지로 넘어간다.
계정 선택 후 giscus를 설치할 repository를 선택한다.
내 github 블로그 repository에 giscus가 설치되었다.
Settings -> General -> Features로 이동하여 discussions을 활성화 한다.
활성화하면 위와 같은 페이지가 뜬다. 이후 [Start Discussions]을 클릭하면 아래의 이미지처럼 Discussions이 환영해준다.
- Discussions이 활성화되었으니 블로그와 Discussions을 연동하기 위한 설정을 해야 한다. Giscus 설정에 가서 설정한 내용을 config와 giscus.html에 작성하면 된다. 자세히 설명하면 아래와 같다.
우선 연결할 저장소를 선택한다. 해당 저장소는 위에서 서술한대로 Public이고, 앱이 설치되어 있으면서 Discussions 기능이 활성화되어 있어야 한다.
페이지와 Discussions를 연결할 방법을 선택한다. 필자는 댓글이 등록될 때 생성될 Discussions의 제목을 해당 댓글이 적힌 페이지의 경로로 설정했다. (추후 댓글을 통해 수정해야 하는 내용을 알게 되었을 때 포스트 제목으로는 해당 파일을 찾기 어려울 것 같았기 때문이다.)
댓글이 저장될 Discussions의 카테고리를 선택한다. 필자는 Comments 카테고리를 생성하여 선택했다.
Giscus에서 제공하는 기능을 선택한다. 필자는 댓글 작성을 귀찮아 할 사용자를 위한 반응 (이모지)와 게시글을 읽을 때 댓글로 인한 로딩을 줄이기 위해 댓글 느리게 불러오기를 선택했다.
또한, 테마를 선택할 수 있다. 참고로 필자가 선택한 테마는 dark_tritanopia 이다.
외의 설정을 모두 완료하면 다음과 같이 설정에 대한 코드를 확인할 수 있다. 해당 코드를 _config.yml과 _inludes/comments/giscus.html에 넣은 후 push하면 적용된다.
_config.yml giscus.html 
⚠️ 카테고리 수정 시 주의할 점
- 선택한 Discussions의 카테고리를 이후 수정하게 된다면 카테고리명 뿐만 아니라 category_id도 수정해야 한다.
- 카테고리별 category_id가 달라서 만약 수정 후 카테고리명만 변경했다면 이전 카테고리명에 댓글이 추가된다.
- 즉, 카테고리명 A를 사용하다가 이후 B로 변경 (but category_id는 변경 X) => 이후 댓글 등록 시 A에 댓글이 등록된다.
- giscus.html은 _config.yml의 값을 가져오기 때문에 수정하지 않아도 상관 없다.
- 블로그에 적용된 모습은 다음과 같다.
블로그 적용 결과
github discussions
Discussions 카테고리 생성 방법
- Discussions 탭 클릭 -> Categories 오른쪽의 연필 아이콘 클릭
- [new category] 선택
- 생성할 카테고리 이름과 설명을 작성한 후 format 선택
- Open-ended discussion : 게시글 형태
- Question / Answer : 질문 - 답변
- Announcement : 저장소 관리자만 작성 가능
- Poll : 투표 내장
해당 카테고리에 대한 섹션 추가 X - default
참고
- 사용한 테마 : jekyll chirpy
Kane’s님 - 블로그 댓글, 반응 추가 (giscus)
Univdev 님 - 기술 블로그에 Giscus를 추가했습니다!
da-in 님 - [Blog] Git Blog에 댓글 기능 추가하기 (Jekyll, Chirpy, 400, 404 Error 정리)
Jaehee Jeon 님 - [GitHub] GitHub Discussion 템플릿 적용하기
컴퓨터 자체에 설치되는 것이 아닌, 크롬 확장 프로그램과 같이 GitHub의 기능을 확장하는 도구로 이해함 ↩︎