Posts disqus에서 utterances로 블로그 댓글기능 바꾸기
Post
Cancel

disqus에서 utterances로 블로그 댓글기능 바꾸기

disqus에서 utterances로 블로그 댓글기능 바꾸기


지금 블로그는 github page 기능으로 호스팅을 하여 만들었습니다.

그렇다 보니 다른 블로그 플랫폼(예: 티스토리)에서와 달리 기본적으로 제공하는 댓글 기능이 없었고, 초반에 여러 메뉴얼을 참고해서 disqus를 사용했습니다.

사실 disqus를 사용하면서 예전부터 들던 불편한 생각이 있었는데요..!

  • 댓글을 작성하려면, disqus 계정이 있어야 하는데 사실 너무 번거로운 일인 것 같다.

그렇지만 기본 댓글 기능이 없었기 때문에 불가피한(?) 선택이었습니다.

하지만 최근에는 방문자 분들께서 disqus로 댓글을 남겨 주셨는데, 이메일 알람이 오지 않는 경험을 겪게 되었습니다. (분명 설정상에는 알람 허용이 되어 있지만… 이 부분은 다시 한 번 알아봐야 할 것 같습니다.)

그래서 굳이 가입해야 하는 불편함도 있고, 요즘 따라 동작도 잘 되지 않는 이 disqus를 대신할 무언가를 찾다가 utterances 를 발견하였습니다.

왜 진작 이걸 사용하지 않았을까 하는 후회를…


utterances 사용하기

utterances 바로가기 : https://utteranc.es/

utterances는 GitHub issues를 기반으로 한 댓글 위젯이라고 설명하고 있습니다. 무엇보다도 가볍고, 오픈 소스이며, GitHub를 기반으로 동작하므로 댓글 기능으로 사용하기에 알맞겠다는 생각을 하였습니다.

또한 utterances를 사용하면, 댓글을 남기기 위해 github 계정이 필요하지만 disqus에 가입하는 것보다는 낫다고 생각하였습니다.

제 블로그에 와 주시는 분들이 IT쪽에 관심이 많으실 거라고 예상하면, disqus 계정보다는 github 계정을 가지고 계실 확률이 높다고 생각했기 때문입니다…!

  • 접근성 측면에서, disqus 계정보다는 github 계정이 훨씬 좋다고 판단!

그리고 블로그에 도입하는 방법도 정말 간단했습니다.


블로그에 utterances 설정하기

  1. 먼저 https://utteranc.es/ 에 들어갑니다.

  2. configuration 항목의 utterances app 링크를 클릭합니다.

  3. install 페이지에 들어와질 텐데, 초록색 install 버튼을 클릭하여 확인 후 아래와 같은 페이지에 오면 자신의 github page 저장소를 선택합니다.

  4. 그러면 다시 자동으로 utterances 설정 페이지로 이동됩니다. 아래의 repo: 부분에 github page 저장소 이름을 입력합니다. 저는 chanhuiseok/chanhuiseok.github.io 였습니다.

  5. Blog Post <-> Issue Mapping 항목에서 원하는 것을 선택하면 됩니다. 작성한 댓글은 github issues 기반으로 관리되는데, 그 코멘트와 블로그 포스트를 어떤 방식으로 매핑할 것인지 선택하는 부분입니다. 저는 맨 위 pathname을 선택했는데, 지금 이 포스팅을 예로 들면 repository의 issue 탭에 posts/talk-6/ 라는 제목으로 이슈가 생성될 것입니다.

  6. 이렇게 설정을 마치면 자동으로 맨 밑 Enable Utterances 부분에서 생성된 스크립트 코드를 확인할 수 있습니다. copy버튼을 눌러서 이 코드를 복사한 다음…

  7. 제 블로그 테마를 기준으로, disqus 댓글 기능은 _layouts/post.html에 코드로 포함되어 있었는데, 그 부분을 삭제하고 위의 6번에서 복사한 코드를 붙여넣어 줍니다.

  8. 이제 설정이 모두 완료되었습니다! 댓글을 달고, issue 탭에 정상적으로 생성되면 완료된 것입니다.


disqus로 댓글을 남겨 주신 분들께는 정말 죄송한 마음입니다.

빠르게 utterances로 전환해서 관리했으면 어땠을까 하는 큰 아쉬움이 남습니다…😥

[redux] 리덕스(Redux)란 무엇일까?: (1) 상태(state) 관리와 불변성

VS Code의 유용한 Extension(확장 프로그램) 살펴보기