디스커스 (disqus) 로 깃허브에 댓글 기능 달기 (jekyll, github pages)

깃허브 페이지스에 기술 블로그를 만들면 댓글 기능이 제공되지 않으니

디스커스 (disqus) 를 이용해서 댓글 기능을 추가하려고 한다.

​

​

1. 디스커스에 계정을 생성한다

https://disqus.com/

2. 디스커스 관리자에서 사이트를 생성하면 shortname 을 이용해서 댓글을 추가할 수 있다.

Sign In - Disqus

Signup Login Login to Disqus with your social media account or email address Email Password Forgot your password?

disqus.com

https://disqus.com/admin/

​

shortname 을 skyksit-github-io 라고 만들었다.

​

​

3. 관리메뉴에서 Installation > Jekyll > Universal Code 를 disqus 를 사용하기 위한 코드가 나온다.

해당 코드로 include 용 disqus.html 파일을 생성한다

<div id="disqus_thread"></div> <script> /** * RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS. * LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/ /* var disqus_config = function () { this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable }; */ (function() { // DON'T EDIT BELOW THIS LINE var d = document, s = d.createElement('script'); s.src = 'https://skyksit-github-io.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); </script> <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

​

4. config.yml 파일에 disqus 아이디를 추가한다

# Disqus discus-identifier: skyksit-github-io # add your discus identifier

​

5. 글작성 용 post 레이아웃 파일에 disqus 를 사용할 경우 댓글을 추가한다.

{% if page.comments %} <div id="post-disqus" class="container"> {% include disqus.html %} </div> {% endif %}

​

6. post 를 작성할 때 comments : true 로 댓글을 활성화 시켜준다.

--- layout: post title: 'First Post' author: byoungchul.kim date: 2017-10-16 13:00 tags: [github] image: /files/covers/first_post.jpg comments : true --- ##제목을 적어봐요 내용을 적어봐요

​

최종 결과물

https://skyksit.github.io/2017/10/17/welcome-to-jekyll/

​

post 하단에 disqus 를 이용한 댓글 기능이 추가됨

​