Github 블로그 댓글 기능

Github 블로그에 댓글 기능 추가 (feat. giscus)

안녕하세요. winey 입니다.
이번 포스트에서는 giscus를 이용해서 Github 블로그에 댓글 기능을 추가하는 방법에 대해서 공유하겠습니다.

---

giscus 다운로드 (내 블로그 Repo에 설치)

먼저 요기 로 이동하여서 내 블로그 Repository에 설치해주세요.

블로그 URL: [username/username.gituhub.io]

---

블로그 Repo에서 Discussions 기능 활성화

본인 블로그 Repository의 탭 메뉴의 Settigns > Features에서 Discussions을 활성화 해주시켜주세요.

해당 기능을 활성화 시키면 아래 사진 처럼 Disucssions 탭이 활성화 됩니다.

---

블로그 Repo에서 Discussions 설정

앞에 활성화 된 Disucssions에 들어가서 댓글을 위한 새로운 카테고리를 생성합니다.

New category를 클릭하여 Commenets 카테고리를 생성 해 줍니다.

내용은 아래와 같이 입력하시면 됩니다.

필요 없어보이는 카테고리도 정리해주고 나서 보면 아래와 같이 카테고리 리스트가 보입니다.

---

giscus와 내 블로그 Repo와 연동

먼저 요기으로 이동해주세요.

먼저 본인의 Repo를 입력 해주시면 됩니다..

앞서 우리가 생성한 카테고리를 선택 해줍니다.

아래로 주욱 내려가 보면 아래와 같이 giscus 사용 제목에 html 내용이 나오는데요.

<script src="https://giscus.app/client.js"
        data-repo={repo}
        data-repo-id={repo_id}
        data-category={category}
        data-category-id={category_id}
        async>
</script>

이 내용을 이제 우리 블로그 Repo의 _config.yml에 설정해주면 됩니다.

comments:
  active: "giscus" # The global switch for posts comments, e.g., 'disqus'.  Keep it empty means disable
  # The active options are as follows:
  disqus:
    shortname: # fill with the Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
  # utterances settings › https://utteranc.es/
  utterances:
    repo: # <gh-username>/<repo>
    issue_term: # < url | pathname | title | ...>
  # Giscus options › https://giscus.app
  giscus:
    repo: {repo}
    repo_id: {repo_id}
    category: {category}
    category_id: {category_id}
    mapping: # optional, default to 'pathname'
    input_position: # optional, default to 'bottom'
    lang: "ko" # optional, default to the value of `site.lang`
    reactions_enabled: # optional, default to the value of `1`

마무리

giscus를 통해 깃 블로그에 댓글 기능을 추가하는 방법에 대해서 포스팅 해봤습니다.
아직 블로그 초창기라 변경 하고 싶은 부분이 많은데 변경되는 내용에 대해서는 꾸준히 블로그에 기록해보도록 하겠습니다.