블로그에 깃허브 댓글 적용하기(utterances)

얼마 전 이동욱님의 블로그에서 깃허브 계정으로 댓글을 다는 것을 보았다.

나도 개발블로그 흉내내고 싶어서 따라해봤다.

찾아보니 utterances라는 댓글 앱을 적용하면 된다고 한다.

장점

• 대부분 개발자는 깃허브 계정이 있다. 따로 티스토리 로그인을 하지 않아도 되고 비로그인 댓글만 남기고 가는 일도 없다. 제일 중요한...댓글 작성자의 깃허브 계정을 염탐할 수 있다!
• 댓글을 작성하면 깃허브 이슈에 추가된다. 만약 알림을 받고 싶다면 댓글 저장용 레포에 알림만 설정하면 된다.
• 마크다운 문법을 이용하여 작성할 수 있다. 개발자들은 마크다운에 환장하니까...
• 설치 과정이 아주 간단하다.

설치 단계

1. 신규 레포지토리 추가 
2. utterances앱 설치
3. 블로그 html에 스크립트 추가

신규 레포지토리 추가

먼저 신규 레포지토리를 만들자. 이름은 대부분 blog-comments로 하니 컨벤션에 맞춰보겠다.

 

레포 이름으로 고민하지 않아도 되서 너무 좋다.

 

주의!! 레포지토리는 꼭 public으로 만들자!!

private으로 하면 utterances쪽에서 레포지토리를 찾지 못해서 아무것도 안된다. 설치 사이트에 설명이 있으니 꼼꼼히 보자.

 

Json 파일 추가

레포지토리에 utterances.json file을 추가 한다. origins의 밸류는 블로그 도메인을 넣으면 된다.

{
  "origins": ["https://joyykim.tistory.com"]
}

 

utterances 앱 설치

github.com/apps/utterances 로 이동해서 깃허브에 앱을 설치, 추가한다.

방금 전 만든 레포지토리의 접근권한을 주면 된다.

 

레포지토리 접근 권한 설정

 

블로그 html에 스크립트 추가

utteranc.es로 이동해서 스크립트를 생성해보자. 몇가지 설정을 기입하면 알아서 스크립트를 만들어 준다.

 

먼저 레포지토리 주소를 아래의 칸에 기입한다. 계정/레포지토리 형식으로 기입하자.

 

레포 주소 기입 (계정/레포지토리)

 

다음은 블로그 글과 이슈를 매핑하는 방법, 이슈에 붙일 라벨, 댓글창 테마 등 자잘한 설정들을 선택한다.

 

완료되면 밑에 당신을 위한 스크립트가 준비되었다. 복사해서 블로그 html에 삽입하러 가보자.

 

 

블로그 html에 스크립트 추가

깃허브 블로그나 다른 플랫폼은 안해봐서 정확한 위치는 모르지만 일단 댓글이 들어갈 곳에 스크립트를 넣어야 한다.

여기서부턴 티스토리 블로그에서 스크립트 적용하는 방법이다.

 

우선 html을 편집해야 한다. 블로그 설정의 사이드바에서 스킨 편집을 선택한다. 그리고 오른쪽 상단에 html 편집을 클릭하면 된다.

 

블로그 설정 -> 사이드 바 -> 스킨 편집

오른쪽 상단 -> html 편집

 

검색(ctrl+f / cmd+f)으로 다음 태그를 찾는다.

<div class="article-reply">

이제 그 태그 안에 있는 모든 내용을 지우고 아까 만든 스크립트를 그 위치 그대로 기입하자. 다른 태그를 잘못지우지 않게 조심하자.

태그를 잘못 편집해서 처음부터 하고 싶은데 이미 저장이 되었다면 티스토리 홈페이지에서 스킨을 다시 적용하고 편집하자.

 

프론트엔드는 내 길이 아니다...

 

적용, 새로고침해서 확인해보자!!

 

 

테스트도 잘 된다

이슈도 잘 올라온다

 

 

블로그를 개발자스럽게 꾸미고 싶다면 utterances를 댓글 앱으로 적용해보자.

 

2021.01.17 업데이트
얼마 전에 알게 된 사실인데, 모바일 버전도 같이 스킨편집을 해줘야 한다!!
안그러면 모바일에선 기존 티스토리 댓글창만 보이고 utterances댓글창은 보이지 않는다!!
분명 티스토리 댓글창은 지웠는데 누군가 댓글을 썼다는 알림이 떠서 당황하고 PC로 확인해보니 댓글은 볼 수도 없는 바보같은 상황이 있었다...
모바일도 스킨편집을 할까 하다가 티스토리 통계창으로 한번에 블로그 관리를 하고 싶어서 utterances를 삭제하고 기존 티스토리 댓글로 변경ㅎㅎ

 

참고

utterances를 블로그 댓글로 적용하기