DEV Community

Waldemar Panas
Waldemar Panas

Posted on • Originally published at wpanas.github.io on

How to add Disqus to your GitHub Pages

#github #jekyll #tutorial #disqus

Add a partial with Disqus

Create a file _includes/disqus.html with following content. Then you need to replace YOUR_DISQUS_NAME with shortname that is identifying your website on Disqus.

{% if page.comments %} <div id="disqus_thread"></div> <script> var disqus_shortname = YOUR_DISQUS_NAME; var disqus_config = function () { this.page.url = "{{page.url | absolute_url }}"; this.page.identifier = "{{page.id}}"; }; (function() { var d = document, s = d.createElement('script'); s.src = 'https://' + disqus_shortname + '.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> {% endif %}

Create a layout with comments

In folder _layouts create a new HTML file blog.html. This layout will be extending default post layout with previously created partial.

--- layout: 'post' --- {{ content }} {% include disqus.html %}

Configure the new layout for all your posts

Now all you need to do to enable Disqus in your post is:

  • set blog as default layout for your posts,
  • enable flag comments by default.

To do so append file _config.yml with that configuration.

defaults: - scope: path: "" type: "posts" values: layout: "blog" comments: true

How to disable comments in selected post

Change comments flag to false at the begging of post file.

--- title: "My post without comments" comments: false ---

Top comments (0)