Hexo 블로그에 Utterances 적용하기

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

utterances 댓글

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

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

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

1
2
3
4
5
6
7
<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 생성

1
2
3
4
5
6
7
8
9
10
<!-- 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 설정 추가

1
2
3
4
5
6
# Utterances for comment
utterances:
enable: true
repo: [ENTER REPO HERE]
issue-term: title
theme: github-light

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

post.ejs에 utterances 추가

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

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

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

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

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

utterances로 댓글 적용 완료!