feat: add utterances로-댓글-기능-추가하기.mdx

Author: eottabom

posts/etc/utterances로-댓글-기능-추가하기.mdx

@@ -0,0 +1,59 @@
+---
+title: "Utterances 로 댓글 기능 추가하기"
+date: "2022-02-08"
+updated: "2025-06-30"
+tags: ["Etc"]
+summary: "Adding comment features with utterances"
+description: "github 이슈 기반으로 연동하는 utterances 댓글 기능 추가"
+---
+
+:::info
+`utteracnes` 기반으로 댓글 기능을 추가하는 방법
+:::
+
+:::neutral
+네이버블로그나 tistory 블로그를 사용했을 때는 자체적인 댓글 기능이 있어서 전혀 신경을 쓰지 않았다.
+하지만, Jekyll 기반으로 github page 를 이용하다보니, 댓글 기능이 필요하다는 생각이 문득 들었다.
+Jekyll 기반일 때는 블로그 주석 호스팅 서비스은 `disqus` 를 이용해서 댓글 기능을 추가할 수 있었지만,
+`disqus`는 별개 서비스라는 생각이 들었고, 페이지 한 눈에 보이는 경우 로드가 늦게 되는 것을 볼 수 있었다.
+결국, 다른 댓글 기능을 찾아보았는데, `utteracnes`라는 것을 알게 되었는데 댓글을 달면 Github 저장소에 Issue 에 댓글이 남겨지는 기능이었다.
+(사실 댓글이 달리는 경우는 없었어서 필요한가 의문이 들었지만, 그래도 적용해보았었다.)
+:::
+
+---
+
+## Q. Utterances?
+
+<BlueText><span style={{ fontSize: '1.5rem', }}>A. </span></BlueText>
+[Utterances](https://utteranc.es/)는 Github Issue 기반으로 comment 를 작성할 수 있게 한다.
+
+---
+
+## Utterances 적용하기
+
+`Utterances`는 정말 간단하게 적용할 수 있다.
+### 1. Utterances 사이트 접속
+* [https://utteranc.es/](https://utteranc.es/)
+### 2. configuration 에서 repo 설정
+* `사용자명/저장소이름`
+* ex) `eottabom/eottabom.github.io`
+
+<div style={{ textAlign: 'center' }}>
+    <img src="/img/post/etc/utterances/configuration.png" alt="configuration" style={{ display: 'inline-block' }} />
+</div>
+
+### 3. Blog ↔ Issue Mapping 설정
+<div style={{ textAlign: 'center' }}>
+    <img src="/img/post/etc/utterances/issue-mapping.png" alt="issue-mapping" style={{ display: 'inline-block' }} />
+</div>
+* (1) 이슈 제목에 페이지 경로 이름이 포함
+* (2) 이슈 제목에 페이지 URL 포함
+* (3) 이슈 제목에 페이지 제목이 포함
+* (4) 이슈 제목은 og: title 페이지를 포함
+* (5) 특정 번호
+* (6) 이슈 제목에는 특정 용어가 포함
+
+### 4. 해당 스크립트 복사 후 post 레이 아웃등 원하는 곳에 include
+<div style={{ textAlign: 'center' }}>
+    <img src="/img/post/etc/utterances/copy-script.png" alt="copy-script" style={{ display: 'inline-block' }} />
+</div>