How do I use disqus comments in github pages blog (Markdown)?

Is it possible to integrate disqus html comments in a blog using github-pages? I like the idea of using github, jekyll and markdown to manage my site and blog for simplicity. However, I'd like to include disqus commenting capability. However, since markdown generates the html - how do I include the html/js code for disqus ?

Solution 1:

The easiest and cleanest way to do it is to create a partial with the HTML that disqus provides in your _includes/ folder (e.g. _includes/disqus.html) and then just including it in your posts layout file (e.g. _layouts/post.md):

{% include disqus.html %}

You can see an example here: post layout and disqus partial.

Solution 2:

There is an "official" way to accomplish this task. You can find the Disqus indication at this link. In details, the procedure is the following:

1. Add a variable called comments to the YAML Front Matter (i.e. the header of your post file) and set its value to true. A sample front matter might look like:

    layout: default
    comments: true
    # other options
   

2. Create a new template file (i.e. disqus.html) and put the Universal Embed Code there between {% if page.comments %} and {%- endif -%}.

3. Include the disqus.html file into your post template.

Hope it helps :)

Solution 3:

Include the disqus comment in your post.html, and set an identifier for the comment count link:

<div id="disqus_thread"></div>
<script type="text/javascript">
    var disqus_shortname = '<your-disqus-name>'; 
    var disqus_identifier = '{{ page.id }}'; 
...
</script>

In your default.html template include the comment count script:

<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = '<your-disqus-name>';
...
</script>

Then add the link to the comments using the data-disqus-identifier attribute, so that the comment count will show up after each post in your blog's main page:

<a href="{{post.id}}" data-disqus-identifier="{{post.id}}">Leave a comment</a>