ghost에 giscus설치로 댓글창 만들기
ghost 댓글 시스템
ghost의 기본 댓글 기능은 이메일을 제공한 사람들만 사용할 수 있어서,
접근성이 매우매우 떨어지는 편입니다.
![](https://blog.koder.page/content/images/2023/11/Pasted-image-20231012134302.png)
구독을 유의미하게 활용하실 분이라면 기본 댓글 시스템을 사용해도 괜찮겠지만,
저는 구독기능을 열심히 활용할 생각이 별로 없고
한국에서 블로그를 "구독" 한다는게 쉽게 와닿지 않을 것 같아서
별도의 댓글 시스템을 설치해 운영할 생각입니다.
giscus
댓글 시스템에는
- disqus
- utterances
- giscus
등이 주로 사용되는 것 같은데,
저는 이 중 giscus 을 사용해 댓글 시스템을 달아주도록 할 예정입니다.
disqus는 어느 정도 사용하면 광고가 붙는다는듯 해서 고려하지 않았고,
utterances 와 giscus 중 사용자 지정 테마를 지원하는 giscus를 선택했습니다.
필요하다면 css 조금 손봐서 사용하는 것까지 생각해두고 싶었습니다.
![](https://blog.koder.page/content/images/2023/11/Pasted-image-20231012134537.png)
giscus와 utterances 모두 github 로그인을 필요로 합니다만,
컴퓨터 공학과 연관된 주제를 주로 포스팅하는 블로그를 제작하기때문에
github 로그인이 큰 진입장벽이 되지는 않을것이라 보았습니다.
설치 전 설정
giscus는 github 레포지토리의 discussion 기능을 이용해서 댓글을 저장합니다.
별다른 데이터베이스가 필요하지는 않으나 깃허브 레포를 개설해줄 필요가 있습니다
![](https://blog.koder.page/content/images/2023/11/Pasted-image-20231012142102.png)
Private 레포지토리가 아닌 Public 레포지토리로 만들어야 합니다.
해당 레포의 Settings > Features > Discussions 으로 이동해서
Discussions를 활성화해줍니다.
![](https://blog.koder.page/content/images/2023/11/Pasted-image-20231012142320.png)
설치
https://github.com/apps/giscus
으로 이동해서 Install 버튼을 눌러 설치합니다.
![](https://blog.koder.page/content/images/2023/11/Pasted-image-20231012142522.png)
이어서 레포지토리를 선택하는 창이 나오면
Discussions를 활성화했던 레포지토리를 선택해줍니다.
![](https://blog.koder.page/content/images/2023/11/Pasted-image-20231012142610.png)
설치를 끝낸 뒤에는
https://giscus.app/ko
으로 이동합니다.
밑의 설정 탭에서
순서대로 빈칸을 채웁니다.
![](https://blog.koder.page/content/images/2023/11/Pasted-image-20231012143424-2.png)
![](https://blog.koder.page/content/images/2023/11/Pasted-image-20231012143437-1.png)
![](https://blog.koder.page/content/images/2023/11/Pasted-image-20231012153411.png)
저는 댓글 느리게 불러오기 옵션을 켜줬는데
이 부분은 취향껏 설정해주셔도 괜찮습니다.
테마는 취향껏 설정해주시고
설정을 마치면 홈페이지 내에 삽입해야할 소스코드가 생성됩니다.
아래 예시 소스코드처럼 생긴 본인만의 소스코드를 복사해주세요.
<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-strict="0"
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>
를 본인 블로그의 post.hbs의 하단에 추가합니다.
그리고
<div class="giscus"></div>
을 소스 내의 원하는 위치에 삽입하면 댓글란이 추가됩니다.
![](https://blog.koder.page/content/images/2023/11/Pasted-image-20231012153548.png)