쉽게 내 사이트에 댓글 기능 추가하기 (Utterances)

Utterances를 이용해 쉽게 내 사이트에 댓글 기능을 추가해 보자.

 

https://utteranc.es/

utterances

 

Utterances는 깃허브 저장소의 이슈를 이용해 댓글 기능을 제공하는 오픈 소스 프로젝트입니다.

Utterances를 적용하면 다음과 같은 댓글 기능을 내 사이트에 쉽게 추가할 수 있습니다.

 

댓글을 입력하려면 깃허브(Github) 계정이 필요합니다.

 

내 사이트에 적용하는 법은 간단합니다.

먼저 https://github.com/apps/utterances 에 접속하여 Utterances 앱을 설치해줍니다.

Install을 누르면 utterances를 적용할 Github Repository를 선택하라는 창이 뜹니다.

원하는 Repository를 선택해주고 Install 클릭합니다.

(Repository가 없다면 새로 생성)

 

그후 utterance를 추가하고자 하는 곳에 다음 코드를 추가해줍니다.

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

[ENTER REPO HERE] 부분에 자신의 Repository 경로를 입력해주면 됩니다. (Theme은 utterances 공식사이트 참고)

 

그 후 자신의 사이트를 확인해 보면 댓글 기능이 추가된 것을 볼 수 있습니다.

(참고로 로컬 환경에서는 댓글 기능 확인이 어렵고 도메인이 존재하는 사이트에 올렸을 때 확인이 가능한 것으로 보입니다.)

 

다음과 같이 댓글을 등록하면

설정했던 Repository의 Issue에 댓글이 등록 된 것을 확인할 수 있습니다.

따라서 Issue를 통해 댓글 삭제 등 관리가 가능합니다.

 

적용된 예시는 제 포트폴리오 사이트에서 확인 가능합니다.

포트폴리오