블로그 만들기 시리즈

눌러서 열기

1. Hugo로 블로그 만들기

2. Github 페이지 연결하기

3. Giscus(댓글) 연결하기

Giscus란?

Github Discussions로 작동하는 댓글 시스템인데요. utterances에서 영감을 받아 시작된 프로젝트입니다!
22년 7월 1일 기준 Giscus 공식 레포의 Star가 2.4k개로 상당히 많은 활동적인 프로젝트란 걸 알 수 있죠.
아마 다른 개발자 블로그도 방문해보신 분들은 Giscus 이외에 uterrances나disqus를 사용한 댓글 시스템을 많이 보셨을거에요. 그럼 각각의 장단이 뭔지 간단히 소개해드릴게요.

Disqus

Disqus는 해외에서도 많이 사용되는 댓글 시스템인데요. SNS를 통한 로그인으로 댓글을 남길 수 있다는 점에서 많이들 애용하신 걸로 알고 있습니다.
하지만 2021년 1월을 기준으로 댓글 창에 강제적으로 광고가 붙게됐죠. 이 광고를 없애려면 매달 요금을 지불해야합니다.
광고가 붙게되면 시각적으로 블로그가 지저분해지는 요소도 있지만 OpenSource가 아니라는 점에서도 마이너스 요소였습니다.

Utterance

Github Issue를 활용해서 댓글 위젯을 만들어 주는 시스템입니다. Github Issue를 활용하다 보니 Github 계정으로 로그인해서 댓글을 달 수 있습니다. 그러다보니 개발자가 아니면 댓글을 남길 수 없다는 점에서는 아쉬움이 남습니다. 많은 블로그에서 Disqus 다음으로 많이들 쓰고 있는데요. Utterance도 제 리뉴얼 전 블로그에서 썻지만 Githug 레포에 계속 Open 이슈가 생긴다는 점. 그리고 이슈 커멘트가 계속 달린다는 점에서 불편함이 있었어요. 그래도 Github Issue를 기반으로 생성되다 보니 Markdown을 지원한다는 점에서 매우 유용합니다!

Giscus

자 이제 Giscus에 대해 소개를 해볼게요. Giscus는 Utterance와 매우 유사하게 Github 로그인을 통해 댓글을 남길 수 있다는 점. 그리고 Markdown을 지원한다는 점의 공통점이 있는데요.
그럼 어떤 점이 다르냐?
그건 바로 Github의 Discussion을 활용한다는 점입니다. Github Discussion 기능은 2020년 부터 시작되었는데요. OpenSource 커뮤니티와 개발자들 간의 커뮤니케이션 그리고 회사 내 enterprise 환경에서도 더 적극적인 커뮤니케이션 지원을 위해 도입된 Github의 기능입니다. image1 Github Discussion을 활용하다 보니 대댓글도 만들어지고 포스트 반응 추가도 가능하더라고요! 여러분도 한번 이 포스트에 편하게 테스트 해보세요 ㅎㅎ image2

Giscus 블로그에 연결하기

Giscus에 연결할 레포지토리 세팅

Giscus를 연결한 레포지토리를 세팅하기 위해선 3가지를 확인해야해요.

  1. Public 레포지토리이다.
  2. Giscus 앱이 레포지토리에 설치되어 있어야 한다.
  3. Discussion 기능이 활성화 되어 있어야 한다.

1. Public 레포지토리 설정

우선 레포지토리 명 우측에 Public이라고 적혀있는지 확인해보세요!
만약 안되어 있으면 아래 순서대로 설정하시면 됩니다.

  1. Giscus를 연결한 레포지토리로 이동합니다.
  2. 레포지토리명 아래에 Settings를 클릭합니다. image3
  3. 아래로 스크롤 하시면 Danger Zone이 나오는데요. 거기서 Change visibility를 클릭합니다. image4
  4. Make public 설정을 하시면 됩니다!

2. Giscus 앱 설치

  1. https://github.com/apps/giscus에 접속합니다.
  2. Configure를 누르고 진행하시다 보면 repository 선택 화면이 나옵니다.
  3. 전체 레포지토리를 다 선택하셔도 되고 특정 레포지토리만 선택해도 됩니다. (이건 추후에 수정이 가능해요) 그리고 Request를 클릭!
  4. 완료된 것을 확인합니다!

3. Discussion 기능 활성화

  1. 위에서 Giscus 앱을 설치한 레포지토리의 Setting으로 이동합니다.
  2. 그리고 아래로 스크롤을 내리시다보면 Features 아래에 Discussions 체크박스가 있습니다.
  3. 체크박스를 클릭합니다! image5
  4. Discussions 탭이 생긴걸 확인하고 눌러봅니다.
  5. 왼쪽에 Categories를 추가하거나 아니면 있는걸 그대로 사용해도 됩니다. 이 Category 중 한 곳을 지정해서 Giscus 댓글들이 오픈되게 됩니다.

블로그 Giscus 연결

이제 이 부분이 핵심인데요. 사실 블로그의 theme마다 Giscus를 이미 자체적으로 지원 하는 곳도 있고 활성화를 시키더라도 Giscus 연동이 안되는(보통 rendering 문제가 아닐까 싶습니다) 경우도 있을 수 있어요.
이 부분은 만약 안된다면 사용하시는 theme 레포지토리에 가서 확인하시길 바랍니다.

<script src="https://giscus.app/client.js"
        data-repo="[ENTER REPO HERE]"
        data-repo-id="[ENTER REPO ID HERE]"
        data-category="[ENTER CATEGORY NAME HERE]"
        data-category-id="[ENTER CATEGORY ID HERE]"
        data-mapping="pathname"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="light"
        data-lang="ko"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>

위 형태의 js script를 여러분이 사용하시는 theme의 layouts으로 추가를 하면 되는데요. 레포지토리의 id나 카테고리의 id가 뭔지를 잘 모르실 수 있는데 https://giscus.app/ko 여기의 설정 부분에 가시면 위 형태의 템플릿 스크립트를 손쉽게 만드실 수 있어요! 그리고 완성된 스크립트를 layouts/partials/comments.html에 추가해봅니다! 여기까지 잘 설정하셨으면 블로그 포스트 하단에 댓글 창이 생기신걸 확인하실 수 있어요!

더 우아하게 만들어보자

Masking

이런 repo-id나 category-id 같은 경우에는 바로 html에 넣는 것보다 config.yaml의 파라미터로 넘겨주는 방식이 보안적인 측면이나 민감한 정보를 보호하는 측면에서 더 좋을 수 있을텐데요. 그런건 손쉽게 아래와 같이 수정하면 간단히 가능해요!

<!-- comments.html -->
<script src="https://giscus.app/client.js"
    data-repo={{ .Site.Params.giscus.repo }}
    data-repo-id={{ .Site.Params.giscus.repoId }}
    data-category={{ .Site.Params.giscus.category }}
    data-category-id={{ .Site.Params.giscus.categoryId }}
    data-mapping={{ .Site.Params.giscus.mapping }}
    data-reactions-enabled={{ .Site.Params.giscus.reactions_enabled | default 1 }}
    data-emit-metadata={{ .Site.Params.giscus.emit_metadata | default 0 }}
    data-input-position="top"
    data-theme="preferred_color_scheme"
    data-lang="ko"
    data-loading="lazy"
    crossorigin="anonymous"
    async>
</script>

# config.yaml

params:
  giscus:
  repo: "my/repository"
  repoId: "myrepoid"
  category: "Comments"
  categoryId: "categoryid"
  mapping: "pathname"
  reactions-enabled: "1"
  input-position: "top"

마치며

이외에도 여러분들이 사용하시는 theme에 맞게 css를 수정해서 적용도 해보고 적극적으로 custom화 하는 것도 하나의 재미 요소입니다! 저 같은 경우에는 PaperMod theme에는 Light/Dark 모드 변경이 되는데 이에 맞춰 댓글 창의 theme도 수정되도록 커스텀화 해봤어요~

다음에는 여러분들의 만든 hugo 블로그 코드를 private 레포지토리에 올려놓고 Github Action을 통해 public 레포지토리에 자동으로 static website로 배포해주는 방법에 대해 소개해드리겠습니다.
이건 여러분들의 config.yaml을 공개 레포에 올리지 않아도 된다는 점에서 매우 유용해요! 그래서 꼭 따라해보시길 바랍니다ㅎㅎ