Giscus를 사용한 GitHub Discussions: 댓글 기능 구현하기

Giscus는 무료이며 DB도 필요하지 않기 때문에 개발자들 사이에서 매우 인기 있는 댓글 기능 구현 방법 중 하나입니다. 또한 GitHub Discussions와 같은 기능을 제공하기 때문에 개인 프로젝트부터 대규모 프로젝트까지 다양한 분야에서 사용됩니다.

또한 tailwind-nextjs-starter-blog와 같은 스타터 템플릿에서는 이미 Giscus가 준비되어 있기 때문에 간단하게 설정만 변경하면 댓글 기능을 사용할 수 있습니다. 따라서 개발자들은 더 많은 시간을 프로젝트에 집중할 수 있습니다.

Giscus를 사용한 GitHub Discussions: 댓글 기능 구현하기

GitHub Discussions는 오픈 소스 프로젝트에 참여하는 사용자들 간에 프로젝트 관련 소통을 할 수 있는 댓글 시스템입니다. GitHub Issues를 활용하여 사용자들이 프로젝트에 대한 의견을 제시하거나 문의, 답변 등을 할 수 있도록 고안되었습니다.

이전에는 utterances와 같은 서비스를 통해 Issues를 이용한 댓글 시스템을 구현하기도 했었습니다. 이번에는 Giscus를 사용하여 서버 없이 댓글 기능을 구현하는 방법을 알아보겠습니다.

저장소 설정하기

우선 Giscus를 사용하기 위해서는 해당 Repository의 경로를 지정해야 합니다. 이후에 https://github.com/apps/giscus 에 접속하여 Configure를 누르고 사용할 Repository를 선택해주면 됩니다.

Discussions 기능 활성화

GitHub Discussions 기능을 사용하려면 해당 Repository로 들어가서 Settings > General 화면에서 Discussions 기능을 활성화해주면 됩니다.

Giscus 활성화

Giscus 활성화를 위해서는 먼저 해당 저장소에 대한 설정이 모두 끝나 있어야 합니다. 그 후에 Giscus 홈페이지로 들어가서 설정값을 입력해주면 됩니다. 저장소 입력란에는 사용자 이름과 저장소 이름을 적으면 됩니다.

그리고 Category는 General로, 테마는 dark로 설정해주면 됩니다. 이후에는 siteMetadata.js 파일을 열어서 comment의 provider를 'giscus'로 변경해주면 됩니다. 그리고 .env 파일을 만들어서 Giscus에서 받은 값들을 입력해주면 댓글 기능 구현이 완료됩니다.

tailwind-nextjs-starter-blog 스타터 템플릿에서 Giscus를 적용하는 방법을 소개하였습니다. 이제 여러분도 Giscus를 활용하여 서버 없이 댓글 기능을 구현해보세요!