Utterances는 GitHub의 이슈(Issues) 시스템을 활용하는 경량 댓글 위젯입니다. 광고나 추적 기능 없이 무료로 사용할 수 있으며, 모든 댓글 데이터는 여러분의 GitHub 저장소에 안전하게 보관됩니다. 그럼, 지금부터 설치를 시작하겠습니다.
GitHub 저장소 설정#
Utterances는 댓글을 저장할 공간으로 공개(Public) GitHub 저장소를 사용합니다. 따라서 가장 먼저 댓글용 저장소를 준비해야 합니다.
- GitHub에 로그인한 후, 새로운 저장소(Repository)를 생성합니다.
- 저장소 이름을 정하고, 반드시 ‘Public’ 으로 설정합니다. Private 저장소는 Utterances가 접근할 수 없습니다.
- 나머지 옵션은 기본값으로 두고 ‘Create repository’ 버튼을 클릭하여 저장소를 생성합니다.
Utterances 앱 설치 및 연동#
다음으로, 생성한 저장소에 Utterances 앱을 설치하고 권한을 부여해야 합니다.
- GitHub Marketplace 로 이동합니다.
‘Install’ 버튼을 누르면 권한 설정 페이지로 이동합니다.(저는 이미 설치된 상태라 Configure 버튼이 표시됩니다.) 여기서 ‘Only select repositories’ 를 선택하고, 방금 생성한 댓글용 저장소를 지정해 주는 것이 좋습니다. 모든 저장소에 권한을 부여하는 것보다 보안상 안전한 방법입니다.
‘Install’ 버튼을 클릭하여 설치를 완료합니다.
Blowfish 테마 설정 파일 수정#
이제 Hugo 프로젝트의 설정 파일을 수정하여 Utterances를 활성화할 차례입니다. Blowfish 테마는 hugo.toml 파일을 통해 댓글 기능을 손쉽게 설정할 수 있도록 지원합니다.
- Hugo 프로젝트 폴더에서
layouts/partials/comments.html파일을 생성합니다. 내용은 utterances 홈페이지 에서 저장소 위치와 테마를 선택하면 자동으로 생성됩니다.
<script src="https://utteranc.es/client.js"
repo=[REPO_NAME]
issue-term="pathname"
theme=[THEME]
crossorigin="anonymous"
async>
</script>
- Hugo 프로젝트 폴더에서
config/_default/params.toml파일을 엽니다. - 파일의
[article]섹션 가장 아래에 다음과 같이 댓글 설정을 추가하거나 수정합니다.
[article]
...
showcomments = true
주의:
repo항목에는 본인의 GitHub 사용자명과 댓글용 저장소 이름으로 정확하게 수정해야 합니다. (예: "Gatsby-Lee/my-blog-comments")issueTerm은 각 게시물 페이지와 GitHub 이슈를 어떻게 연결할지 결정하는 중요한 설정입니다. 일반적으로pathname을 사용하면 문제없이 작동합니다.theme은 블로그 디자인에 맞춰 ‘github-light’, ‘github-dark’ 등 원하는 스타일로 변경할 수 있습니다.
확인 및 마무리#
모든 설정을 마쳤습니다. 이제 로컬 서버를 실행하여 댓글 기능이 정상적으로 작동하는지 확인합니다.
hugo server
웹 브라우저에서 http://localhost:1313/으로 접속한 후, 댓글 기능을 활성화한 게시물로 이동하여 페이지 하단에 Utterances 댓글 창이 나타나는지 확인하십시오. GitHub 계정으로 로그인하면 바로 댓글을 작성하고 테스트해 볼 수 있습니다.
이것으로 Hugo Blowfish 테마에 Utterances 댓글 기능을 성공적으로 설치했습니다. 이제 방문자들과 더욱 활발하게 소통하며 블로그를 풍성하게 가꾸어 나가시길 바랍니다. 궁금한 점이 있다면 언제든지 질문해 주십시오.