상세 컨텐츠

본문 제목

[블로그] DISQUS 소개 - 웹사이트/블로그에 댓글 서비스를 달자

IT 이야기

by IT/머신러닝 엔지니어의 독서/경제/육아 공부 리치윈드 - windFlex 2021. 6. 4. 19:35

본문

반응형

정적웹사이트에 댓글 기능을 달아 주자 - ft. Disqus

 

개츠비 (Gatsby) 블로그에 댓극 기능을 달아주자.

 

지금까지 개츠비(Gatsby)로 자신만의 블로그를 구축해 보았다. Gatsby를 다운받아 커스터마이징하여 빌드(Build)하고, Github에 올려서 Git Page로 자신만의 블로그로 만들었다. 블로그 아이콘도 변경 해 주었다.

그런데, 다시 생각해 보자. 개츠비(Gatsby)는 정적 웹사이트 생성기(JAM Stack)이다. 이 말은, 정적 HTML로 만들어서 단순히 네트워크 스토리지와 같은 저장소에서 불러와서 웹브라우저로 보여주는 것만 한다는 이야기다. 일반적인 웹사이트처럼 정보를 받아서 데이터베이트(DB)에 저장하는 등의 사용자 정보를 받을 수 없다는 것이다.

단순하게는, 이웃의 댓글, 좋아요 등의 피드백을 받을 수 없다는 것이다.

최근 정정 사이트를 사용하는 곳이 많아짐에 따라서, 댓글 등의 방문자 피드백을 받는 댓글 추가 기능이 별도의 서비스로 운영되고 있다. 대표적으로 디스커스(Disqus), 라이브리(livere) 등이 있다. 최근에는 네이버에서 유사서비스를 플러그인으로 제공을 하는것으로 알려져 있으나, 범용성이 낮아서 대상에서 제외한다.

여하튼, Gatsby에서는 Disqus에 대한 플러그인을 별도로 제공되고 있으며 유사 서비스중 가장 익숙하므로 Disqus가 무난하다 하겠다. 아래는 이번 글에서 목표로 하는 최종 아웃풋이다. 정적웹사이트 블로그에 Disus 댓글 기능을 추가하는 것이 목표이다.

웹사이트에서 방문자의 피드백을 받기 위한 댓글전용 서비스 (DISQUS)


디스커스 (Disqus) 설정하기

다음은 Disqus 공식 홈페이지 이다. 공식웹사이트에 접속하여 GET STARTED 를 눌러서 시작하자.

 

Disqus 설정 (Install )

Disqus 설정은 아래와 같은 절차를 필요로 한다. 어렵게 설명 되어 있지만 사실은 요금제를 설정하고 2번째 단계만 진행하면 된다.

  • Select Plan
  • Install Disqus
  • Configure Disqus
  • Setup Moderation

1단계. Select Plan.

2단계. Install Disqus

1) Gatsby-plugin-disqus 설치

2) Gatsby-config.js에 plugin을 설정한다.

3) 실제 웹페이지 적용하기

Disus 달기 상세 코드와 설명은  다음 웹페이지를 참조해 주세요.

https://tech.richwind.co.kr/gatsbyBlog_5/

 

블로그에 댓글기능 달아주기 (ft.Disqus 붙이기)

개츠비(Gatsby) 블로그에 댓글 기능을 달아주자. 지금까지 개츠비(Gatsby)로 자신만의 블로그를 구축해 보았다. Gatsby를 다운받아 커스터마이징하여 빌드(Build)하고, Github에 올려서 Git Page…

tech.richwind.co.kr

 

 

반응형

관련글 더보기

댓글 영역