utterances로 Jekyll에 댓글 기능 추가하기

Yun Seongmin·2020년 1월 4일
1

Jekyll

목록 보기
1/2
post-thumbnail
post-custom-banner

댓글 시스템 고르기

가장 먼저 떠오른 페이스북 댓글 플러그인은 모바일에서 계속 에러가 나던 경우가 있어서 제외했고 Disqus는 무거워서 가벼운 블로그를 추구하는 필자의 블로그에 맞지 않았다.
고민하던 와중에 utterances를 찾게 되었는데, utterances는 상당히 재미있는 댓글 시스템니다.
Disqus처럼 따로 자체적으로 서버를 제공하는게 아니라 Github Issue를 이용한다.
utterances로 댓글을 달면 필자가 설정한 Repo의 Issue란에 자동으로 Issue를 생성하고 그 Issue를 가져와 보여주는 방식이다.

utteranc 설치

1. 저장소 생성

먼저 utteranc가 Issue를 생성할 Repo가 필요하다.
Repo의 이름은 상관없고 공개된(Public) Repo여야 한다.

utteranc Github App 설치

  1. utteranc Github App에 가서 Install을 누른다
    Intall App 1
  2. 위에서 생성한 utteranc 용 Repo를 선택한고 Install을 누르면 끝 😀
    Intall App 2

3. 설정 파일 복사하기

자동으로 리다이렉트되는 utteranc 메인 페이지에서 configuration부터 알맞게 채워넣은뒤 Enable Utterances에 있는 <script...을 복사한다.

4. 댓글을 표시할 곳에 붙여 넣기

각자 테마에 따라 다르니 설명하긴 힘들것 같고 각자 쓰는 브라우저의 개발자 도구를 사용해 원하는 곳을 찾고 해당 부분에 넣으면 된다.
만약 tale 테마를 쓰고 있다면 이 커밋과 같이 수정하면 된다.

단점

  1. Github Issue를 사용하는 만큼 Github 아이디가 없으면 사용이 불가능하다.
    다만 블로그 주제의 특성상 최소 Github 아이디를 가진 사람이 들어올 것 같아 큰 걱정은 안된다.
  2. 사진 첨부가 귀찮다.
    사진을 올리기 위해서는 먼저 댓글을 달고 나서 ilcm96 commented 4 hours ago4 hours ago 부분을 클릭해서 Github Issue 페이지로 이동해서 사진을 업로드 해야 한니다.
    다만 에러나 로그는 사진 대신 Markdown 문법을 활용하면 될 것 같아서 아직은 다른 댓글 시스템으로 옮길 생각은 없다.

마치며...

이렇게 Github Page에 댓글 시스템을 추가하는 법을 알아보았다.
더 다양한 기능을 원한다면 Gitalk을 살펴봐도 좋을 것 같다.

post-custom-banner

0개의 댓글