1. 댓글 기능 방식 선택#

이제는 블로그에다가 댓글 기능을 추가해 보자

정적 블로그는 서버가 없기 때문에 자체적으로 댓글을 저장하기 어렵다. 따라서 외부 댓글 시스템을 붙이는 방식이 일반적인데, 이번에는 GitHub Discussions를 댓글 저장소로 사용하는 giscus를 사용해서 댓글 기능을 만들어보자

giscus를 사용하면 다음과 같은 장점이 있다.

GitHub 계정으로 댓글을 작성할 수 있다.
댓글 데이터가 GitHub Discussions에 저장된다.
무료로 사용할 수 있다(제일 중요)
정적 사이트인 Hugo 블로그에도 쉽게 붙일 수 있다.

2. GitHub Discussions 활성화#

먼저 댓글을 저장할 GitHub 저장소에서 Discussions 기능을 켠다.

GitHub 저장소로 이동한 뒤 Settings > General > Features 로 들어가서 Discussions 항목을 체크해주자.

체크 후 Set up discussions 버튼이 보이면 클릭한다. 처음 생성되는 Discussion 글의 제목과 내용은 기본값을 사용해도 되고, 간단히 수정해도 된다.

설정을 완료하면 저장소 상단에 Discussions 탭이 생긴다.

3. giscus 앱 설치#

giscus가 GitHub Discussions에 댓글을 생성하려면 GitHub App 권한이 필요하다.

https://github.com/apps/giscus 로 이동해서 Install 버튼을 누른 뒤, 댓글을 사용할 저장소를 선택해주자

나는 블로그 저장소에만 사용할 것이므로 블로그 저장소인 LampSeeker/lampseeker.github.io

저장소에만 허용하고 설치를 완료했다.

4. giscus 설정값 생성#

이제 giscus 설정 페이지로 이동해서

bookmark https://giscus.app/ko giscus.app

저장소 입력 칸에 계정/깃헙 블로그 주소를 입력해주자

5. 페이지와 Discussion 연결 방식 선택#

밑에도 여러 설정이 있는데 하나씩 차례대로 설정해주자

페이지 ↔ Discussions 연결
댓글을 각 글마다 따로 관리하려면 pathname 방식을 선택
글 URL 마다 댓글방을 따로 만들기 때문에 가장 무난하다
엄격한 제목 일치 사용
지금처럼 비슷한 제목의 Discussion이 여러 개 생기는 걸 줄여주는 옵션이다. 체크해주자
Discussion 카테고리
이전 단계에서 만들어둔 카테고리를 선택해주자.
이 카테고리에서만 Discussion 찾기
체크 유지
메인 포스트에 반응 남기기: 체크
Discussion 메타데이터 보내기: 해제
댓글 위에 댓글 상자 배치: 해제
댓글 느리게 불러오기: 체크(페이지 로딩 속도)
댓글 테마는 마음대로 설정해주자

6. 생성된 script 코드 확인#

설정을 마치면 giscus 페이지 아래쪽에 <script> 코드가 생성된다. 내 것을 예시로 들면

<script src="https://giscus.app/client.js"
        data-repo="LampSeeker/lampseeker.github.io"
        data-repo-id="개인마다 다름"
        data-category="General"
        data-category-id="개인마다 다름"
        data-mapping="pathname"
        data-strict="1"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="ko"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>

이 값들을 Hugo 댓글 partial에 넣어주자

7. Hugo 댓글 partial 추가#

Hugo Book 테마는 댓글 영역을 partial로 분리해서 처리한다.

따라서 테마 파일을 직접 수정하지 않고, 프로젝트의 layouts 폴더에 같은 경로의 partial을 만들어 덮어씌워주자.

다음 파일을 생성한다.

layouts/partials/docs/comments.html

그리고 giscus에서 생성된 script 코드를 넣어주자

{{- if and .IsPage (ne .Params.comments false) -}}
<section class="notion-comments" aria-label="Comments">
  <script src="https://giscus.app/client.js"
    data-repo="LampSeeker/lampseeker.github.io"
    data-repo-id=""
    data-category="General"
    data-category-id=""
    data-mapping="pathname"
    data-strict="1"
    data-reactions-enabled="1"
    data-emit-metadata="0"
    data-input-position="bottom"
    data-theme="preferred_color_scheme"
    data-lang="ko"
    data-loading="lazy"
    crossorigin="anonymous"
    async>
  </script>
</section>
{{- end -}}

여기서 data-repo-id와 data-category-id는 사용자마다 다르다.

따라서 위 값을 그대로 복사하지 말고, giscus 설정 페이지에서 생성된 값을 사용해야 한다.

8. 댓글 기능 활성화#

댓글 partial을 추가해도 Hugo Book 설정에서 댓글 기능이 꺼져 있으면 화면에 표시되지 않는다.

다음 (config/_default/params.toml)파일을 열어서 BookComments 값을 true로 변경해주자.

이제 Hugo가 페이지를 렌더링할 때 글 하단에 댓글 영역을 추가한다.

9. 빌드 확인#

로컬에서 Hugo를 실행해 댓글 영역이 정상적으로 들어가는지 확인해보자

빌드가 성공하면 로컬 서버를 실행한다.

hugo server

브라우저에서 글 페이지에 접속한 뒤, 하단에 giscus 댓글 영역이 보이면 정상적으로 적용된 것을 확인할 수 있다.

10. 특정 페이지에서 댓글 숨기기#

모든 페이지에 댓글을 표시하고 싶지 않을 수도 있다. 이 경우 해당 글의 front matter에 다음 값을 추가하면 된다.

comments: false

위에서 작성한 partial은 이 값을 확인한다.

html

{{- if and .IsPage (ne .Params.comments false) -}}

따라서 comments: false가 있는 페이지에서는 giscus 댓글이 표시되지 않는다.

Github 블로그 생성(2) - 댓글 기능 추가