DISQUS on GitHub page

DISQUS is a centralized excel comments management tool. This post introduces basically how to add disqus plugin into a GitHub page generated by Jekyll.

DISQUS

1. First of all, you should go to disqus and signup.
2. Add your site to DISQUS. You can do this on the admin panel. DISQUS might direct you there automatically.
3. You should fill in some basic information like disqus shortname to identify your GitHub site, GitHub site url etc. In the community setting, Comments Count Link, change 0 Comments to Leave Comments. In the advanced setting part, you'd best fill in the trusted domain.

4. Finally you will get a piece of code depends on site platform. Since there is no default Jekyll platform, you choose universal code almost like this:

      
   <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 | prepend: site.url }}';  // Replace PAGE_URL with your page's canonical URL variable
       this.page.identifier = '{{ page.id }}'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
       };
   
       (function() {  // REQUIRED CONFIGURATION VARIABLE: EDIT THE SHORTNAME BELOW
       var d = document, s = d.createElement('script');
   
       s.src = '//EXAMPLE.disqus.com/embed.js';  // IMPORTANT: Replace EXAMPLE with your forum shortname!
   
       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" rel="nofollow">comments powered by Disqus.</a></noscript>
   
   <script id="dsq-count-scr" src="//EXAMPLE.disqus.com/count.js" async></script>
      
   

5. Pay attention to:
   1. Edit and uncomment the disqus_config part. Replace PAGE_URL and PAGE_IDENTIFIER with your own Jekyll page variable.
   2. Replace the EXAMPLE part with the disqus shortname just created for your GitHub site. That's all!

Embedding

1. After updating the code snippet, you will embed the code into your GitHub site source code.
2. Insert the code snippet between {% if layout.comments %} and {% endif %} of newly created _includes/disqus.html

3. Insert {% include disqus.html %} into _layouts/default.html after the {{ content }} part. The consequent code is like:

   <div class="container content">
        
     {{ content }}
     {% include disqus.html %}
        
   </div>
   

4. Insert a YAML Front Matter comments: true line into _layouts/page.html and _layouts/post.html respectively.
5. {% if layout.comments %} could be {% if page.comments %} depending on your needs. The latter requires comments: true on each post YAML Front Matter to turn on DISQUS comments. But the former seems not able to disable comments for a specific post. Details refer to Jekyll variable.
6. Up to now, you would have create a new file disqus.html, updated default.html, page.html and post.html. That's all!

Comments Counter

1. Besides comments, you can display the number of comments on a post.

2. Insert:

   <script id="dsq-count-scr" src="//EXAMPLE.disqus.com/count.js" async></script>
   

   to the end of _includes/disqus.html but before the last line {% endif %}. The EXAMPLE should be replaced your real disqus shortname.

3. Next insert:

      
   {% if layout.comments %} • <a href="{{ site.url }}{{ page.url }}#disqus_thread">Leave Comments</a>{% endif %}
      
   

   where you would like to show the comments counter. Usually, it should be _layouts/post.html. You can also insert it into index.html to show counters for each post on the front page of your site.

   The key is the trailing #disqus_thread which is the DIV id of the very first snippet code above. The layout in {% if layout.comments %} might be changed based on your previous choice.

   That's all!

Censorship

Seemingly DISQUS does not show up due to GFW block. To get this solved, you must:

1. Enable HTTPS for your site url. If you did not set a customized domain, then good luck. The original default GitHub page is accessed by HTTPS. Otherwise, you must set your own HTTPS which usually needs payment service.
2. Use a proxy to visit your HTTPS site.

Refs

1. sgeso main
2. perfectlyrandom
3. desiredperson