Hexo 블로그에 Utterances 적용하기

Hexo 블로그를 운영하며, 댓글 라이브러리로 Disqus를 사용했었는데, 현재 내 블로그를 접속하는 사람들은 아마도 개발자들일 것이고, 개발자들이라면 Github UI가 익숙할 것 같다는 생각이 들었다. 그래서 Disqus대신 Github UI를 경험할 수 있는 Utterances 라이브러리를 블로그 댓글로 사용해보기로 결정하였다.

아웃사이더님의 블로그 글(페이스북 댓글을 utterances로 교체했습니다)에 의하면 Utterance는 Github의 이슈검색 API를 사용한다고 한다. Utterances를 사용하기 위해서는 Github에 댓글을 위한 repo를 만들어야 하는데, 댓글이 작성되면 이 repo에 이슈로 등록이 된다.

Github에서 repo를 만들었다면, 아래 Utterances 코드([ENTER REPO HERE])에 해당 저장소 주소를 작성하면 된다.

그리고 아래 Utterances 코드([ENTER REPO HERE])에 해당 저장소 주소(예: youngjinmo/hexo-utterances)를 작성하면 된다.

<script src="https://utteranc.es/client.js"
        repo="[ENTER REPO HERE]"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

hexo는 레이아웃에 따라 코드가 분리되어 있다. utterances는 댓글에 해당하므로 댓글 라이브러리들이 저장되어 있는 디렉토리에 utterances 코드를 저장해야 한다.

utterances.ejs 생성

<!-- utterance comment -->
<% if (config.utterances.enable == true) { %>
<script src="https://utteranc.es/client.js"
        repo="[ENTER REPO HERE]"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>
<% } %>

이 코드를 hexo 블로그 디렉토리내 /themes/[your theme]/layout/comment/ 에 파일을 만들어서 저장하는데, 이 때 파일명은 utterances.ejs 로 저장한다.

_config.yml에서 utterances의 enable 상태가 true로 전환일 때만 utterances가 사용되는 코드이다.

_config.yml에 utterances 설정 추가

# Utterances for comment
utterances:
  enable: true
  repo: [ENTER REPO HERE]
  issue-term: title
  theme: github-light

hexo 블로그가 저장되어 있는 디렉토리에 가면 _config.yml 파일이 있다. 여기서 가장 아래쪽에 utterances 설정을 담은 코드를 작성해주자.

post.ejs에 utterances 추가

<!-- Comment - utterances -->
<%- partial('comment/utterances') %>

이제 게시글을 작성할때 utterances가 적용되어야 하므로 /themes/[your theme]/layout/ 에 있는 post.ejs 파일에 위의 코드를 추가한다. <%- partial('') %>에 넣는 주소는 utterances.ejs가 저장되어 있는 경로를 의미한다.

여기까지 마무리하고 hexo g 를 통해 블로그에 최종적용하면 된다.

테스트로 이 포스트에 댓글을 작성해보았다. 댓글을 작성하면 아래처럼 Github을 통해 알람을 확인할 수 있다.

그리고 댓글 저장소에는 이 댓글이 이슈로 등록이된다.

utterances로 댓글 적용 완료!