GitHub Pages vol.2 Disqus 댓글 기능 추가하기

안녕하세요!

 

제 깃헙 페이지에 댓글 기능을 추가하며 작업했던 내용을 공유드리겠습니다.

Disqus와 Jekyll 연동하기로 구글링하면 많은 포스팅이 나오나... 역시 저한테 딱 맞는 가이드는 없어서 좀 조합을 해야 했네요.

 

제가 한 방법이 정답은 아니지만 일단 제 깃헙 페이지에 잘 추가되어 기록으로 남깁니다.

---

https://starrything.github.io/portfolio/2022-01-18-Portfolio.html

Portfolio · About Me

위 링크가 제 깃헙 페이지 인데요.

 

가장 하단으로 스크롤을 내려보시면 이렇게 Disqus 가 플러그인되어 있는 것을 확인하실 수 있습니다.

 

 

그럼 이제부터 순서대로 작성해보겠습니다.

---

Step1. Disqus 회원가입하기

Disqus 홈페이지로 이동하여 회원가입을 진행합니다.

(로그인되어 있지 않으면 Get Started를 눌러 바로 회원가입 페이지로 이동할 수 있습니다.)

 

https://disqus.com/

Disqus – The #1 way to build your audience

Signup page

Step2. Account 생성하기

회원가입하여 로그인하였으면 이제 디스커스를 시작할 수 있습니다.

 

"Get STARTED"를 눌러 진행해 봅시다.

 

본인 깃헙 페이지에 추가할 예정이니 아래에 있는 옵션(I want to install Disqus on my site)을 선택합니다.

 

 

디스커스에서 관리되는 웹사이트 이름을 임의로 작성해 줍니다. (*추후 지킬에 반영할 short name 입니다.)

카테고리도 적당히 선택합니다.

 

그리고 [Create Site]를 클릭하면 디스커스에 본인이 신청한 계정이 등록됩니다.

 

첫번째는 과금에 대한 부분입니다. 

 

 

저희는 일단 스크롤을 좀 내려서 Basic 무료 플랜을 선택합니다.

선택하고 나면 바로 두번째 단계로 넘어가게 되는데요.

 

저희는 Jekyll을 선택하겠습니다.

Select Platform

 

자 이제 지킬에 대한 디스커스 설치 지침에 대한 화면이 표시됩니다. 

Install Instruction

1번은 각 포스트의 변수(comments)를 true로 설정해야 한다고 언급하고 있습니다.

 

 

제 깃헙 페이지를 보시면 포트폴리오(Portfolio) 포스트 상단에 1번을 적용하였습니다.

로컬 워크스페이스

 

그리고 2번 내용을 이제 살펴보겠습니다.

해당 내용은 2개로 구분되어 확인하셔야 합니다.

코멘트 태그를 표시하는 부분과 디스커스 유니버설 임베드 코드 이렇게 2가지 입니다.

 

앞 부분은 실제로 화면에서 어디에 디스커스 코멘트를 표시할지를 나타내고, 후자는 디스커스 코멘트를 불러오는 영역이라고 생각하시면 됩니다.

음... 직접 아래에서 이제 살펴보시죠.

 

Disqus 코멘트 표시 위치 잡기

먼저 실제 화면에서 디스커스 코멘트를 표시할 영역부터 살펴보겠습니다.

 

저는 포스트의 제일 하단에 디스커스를 위치시켰습니다.

 

 

이렇게 하려면 제가 사용하는 지킬 테마인 jekyll-gitboot에서 "/_includes/body.html" 파일에 적용하였습니다.

가장 하단에 위치시킨 것이 보이시죠?

저는 추가로 약간의 여백을 위해 style="padding: 20px;"을 추가하였습니다.

 

위에서 각 포스트에 comments 변수에 true로 지정하셨던 거 기억나시나요?

그에 대해서 body.html의 조건문으로 필터링하고 있습니다.

 

Disqus(Universial Embed Code) 추가하기

자 위에서 Disqus 위치를 표시할 때 disqus.html을 추가하였습니다.

이 파일을 "/_includes"디렉토리에 생성해 줍니다.

 

그리고 Disqus 페이지에서 코드를 복사해서 붙여넣기 해줍니다.

아래처럼 하시면 됩니다.

Disqus - Install instruction

"Universal Embed Code"를 클릭합니다. 

위 내용을 복사하여 본인의 "/_includes/disqus.html" 파일에 붙여넣습니다.

디스커스 쓰레드 중복을 피하기 위하여 RECOMMENDED CONFIGURATION VARIABLES도 수정하는 것이 좋지만 그대로 적용하셔도 무방합니다.

 

disqus_config

로컬에서도 지킬을 테스트해 볼 수 있습니다.

로컬에서 구동했을 때 댓글을 달게 되면 같은 콘텐츠에 대해 2개의 URL이 생기게 되어 댓글 불일치 현상이 발생합니다.

 

이를 위해 disqus_config를 설정해 주도록 합니다. 

 

---

이제 디스커스 구성 단계에서는 본인의 깃헙 페이지 주소를 입력하고 넘어갑니다. (Website URL)

 

드디어 마지막 단계입니다.

게스트 사용자도 댓글을 달 수 있도록 Balanced를 선택할 수 있고, 디스커스 로그인 유저만 댓글을 달 수 있도록 Strict로 설정할 수도 있습니다.

 

---

 

마지막으로 "_config.yml" 파일에 comments 속성을 추가합니다.

(들여쓰기 조심하세요.)

provider에는 "disqus"를 입력하고, disqus.shortname에는 위에서 입력하셨던 "Website name"을 입력하시면 됩니다.

 

 

살짝 왔다 갔다 하면서 글을 작성했습니다.

하지만 작업 순서대로 기록했기 때문에 큰 어려움은 없으셨으리라 기대해봅니다.

 

혹시 궁금한 점 있으면 피드백 주세요!

 

 

감사합니다.