GitHub 블로그에 채팅 시스템 추가_02

블로그에 채팅 시스템 추가하기 💬

---

블로그에 댓글 시스템으로 Utterances를 추가하는 방법을 소개한다. 단계별로 따라 하면 금방 완료할 수 있다.

---

Step 1: Utterances 설치

1. Utterances GitHub 페이지로 이동.
2. Configure 버튼 클릭.
3. 댓글을 적용할 GitHub 리포지토리 선택 후 설정 완료.

---

Step 2: _config.yml 파일 수정

블로그 설정 파일에 Utterances를 추가한다.

comments:
  provider: "utterances" # 채팅 시스템 활성화
  utterances:
    repo: "M0S-quito/M0S-quito.github.io" # 본인의 GitHub 리포지토리
    issue_term: "pathname" # 댓글을 식별하는 기준 (예: pathname, title 등)

---

Step 3: post.html 파일 수정

포스팅 템플릿 파일에 Utterances 스크립트를 추가한다.

<script src="https://utteranc.es/client.js"
        repo="M0S-quito/M0S-quito.github.io" # 본인의 GitHub 리포지토리
        issue-term="title" # 포스팅 제목으로 이슈 생성
        theme="github-light" # 테마 설정
        crossorigin="anonymous"
        async>
</script>

• 위 코드를 포스팅 템플릿 파일의 하단에 추가한다.
• 필요에 따라 theme 옵션을 변경할 수 있다.

---

Step 4: 변경 사항 GitHub에 Push

모든 설정이 끝났다면, GitHub에 Push하여 변경 사항을 적용한다.

---

⚠️ 문제 해결: 채팅 시스템 중복 시

• 로컬 환경에서는 정상적으로 작동하지만, GitHub 배포 후 댓글이 중복되는 경우:
  1. _config.yml 파일에서 provider 항목을 주석 처리한다.

# comments:
#   provider: "utterances"

1. 변경 사항을 다시 Push하여 중복 문제를 해결.

---

Utterances로 깔끔하고 효율적인 댓글 시스템을 추가해보자! 🚀