Jekyll에 Utterances, Giscus 댓글 적용하기

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

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

2022.08 Utterances에서 Giscus로 이사하였습니다. Giscus는 Github의 Discussions 기반의 댓글 시스템으로 Github issue 기반인 Utterances 보다 대화에 최적화된 기능들이 많이 존재합니다.

Utterances

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

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

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로 매핑했습니다. 잘 읽어보시고 결정하는게 좋을 것 같아요.

path, url, title 등 여러가지 기준을 제공해줍니다.

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

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

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

사용하기

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

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

Tips

Github repo 내 issue 탭에서 댓글 작성하기

댓글 작성은 블로그 내 embedded된 영역에서 바로 작성하실 수 있지만, 지정하신 repo의 각 issue에서도 작성이 가능합니다. issue에서 작성하면 사용자 멘션이나 이미지 업로드 등이 훨씬 수월하기 때문에 개인적으로는 대댓글 작성 시 issue에서 작성하는게 더 메리트가 크다고 판단됩니다 :D

Giscus

Giscus는 위에서도 이야기헀지만 Discussions 기반의 서비스입니다. 오픈소스이고 https://giscus.app/ko에 한글화도 잘 되어 있어 보시면 쉽게 적용하실 수 있습니다.

Utterances to Giscus

Github에서 공식적으로 Issue를 Discussions로 전환할 수 있도록 기능을 제공하고 있기 때문에 간단한 방법으로 Utterances(Issue)를 Giscus(Discussions)로 전환할 수 있습니다. 먼저 Giscus 앱을 Install 합니다. Repository는 Discussions를 사용할 Repo로 지정해주세요. 저는 Utterances와 동일한 Repo로 지정했습니다.

그리고 기존 Issues에 label을 달아줍시다. 저는 Utterances 설정 시 comment 라벨을 달아뒀었습니다.

이후 Labels에서 해당 라벨을 보면 Convert issues란 버튼이 있습니다. 해당 버튼을 눌러주시면 Confirm 이후 Migration이 시작됩니다.

네 Issue to Discussion 작업은 마무리되었습니다. Giscus에서 설정에 따라 나온 스크립트를 복사하여 댓글 영역에 붙여주시면 됩니다. 이는 Utterances와 동일합니다 :D

Giscus가 Utterances의 영감을 많이 받았다고 합니다. 그래서 사용 방법 자체가 굉장히 비슷합니다.