최근에 블로그를 blogger에서 github page로 옮기면서 댓글을 작성할 수 있는 환경이 없는 상태입니다. Jekyll에서 기본적으로 사용하는 Disqus의 경우 개인적으로 광고 이슈때문에 좋아하지 않기 때문에 댓글 서비스를 다시 찾아봤고, github issue 기반의 댓글 서비스인 Utterances를 알게 되었습니다.

그래서 현재 블로그에 Utterances를 적용하면서 방법 정리할겸 글로 남겨둡니다.

Utterances

먼저 Utterances의 동작 방식 가볍게 살펴봅시다. 위에서 이야기드렸듯이 github issue 기반의 서비스인데, 사용자가 댓글을 등록하면 지정된 repo에 issue로 댓글이 등록됩니다. 이 과정에서 url, path, title 등으로 어떤 글에서 온 댓글인지 인지할 수 있는 값을 같이 남기고 Github issue search API 를 통해서 데이터를 가져와서 뿌려주는 형태로 동작합니다.

댓글을 등록하는 과정은 github bot으로 만들어서 처리하는 것 같네요.

Add it!

Utternaces App 설치

우선 github app에서 utternaces를 설치해줍니다. https://github.com/apps/utterances

이 때 댓글 등록을 위해 권한을 요구하는데요, 전체 repo 정보는 줄 필요가 없으니 댓글이 등록된 Issue를 관리할 repo만 주시면 될 것 같습니다. 저는 github page가 private repo에 있기 때문에 퍼블릭 데이터용 repo로 따로 지정했어요.

설정 후 댓글 추가하기

설치하면 utterance.es 사이트로 이동됩니다. 여기서 repo 이름과 스타일 등 적입맛에 맞게 설정해줍니다. 여기서 중요한건 post와 issue를 매핑하는 방법인데요, 깔끔하게 구성하면 title 등이 좋긴한데, 제목이 바뀌거나 하는 경우에 연결이 유실될 수 있어서 저는 path로 매핑했습니다. 잘 읽어보시고 결정하는게 좋을 것 같아요.

설정을 마무리하면 아래와 같이 스크립트 코드가 하나 만들어집니다.

<script src="https://utteranc.es/client.js"
        repo="hahwul/asset-of-hahwul.com"
        issue-term="pathname"
        label="comments"
        theme="dark-blue"
        crossorigin="anonymous"
        async>
</script>

이 코드를 이제 댓글이 삽입될 위치에 넣어주시면 됩니다. 저는 post에만 노출시킬 생각이라서 post layout 코드쪽에 넣어줬습니다.

사용하기

이제 실재로 댓글을 써보면 잘 동작하는 걸 확인할 수 있구요,

지정했던 repo의 이슈에 댓글이 등록되는걸 볼 수 있습니다.