Posts How to add Disqus comments to Jekyll Blog
Post
Cancel

How to add Disqus comments to Jekyll Blog

So you have set up your brand new Jekyll blog and now here looking for setting up a commenting system on it. Look no where, as this post is exactly what you been looking for.

I have read numerous articles on setting up comments on a Jekyll powered static blog, but found using Disqus as the most easiest method.

  1. Sign Up for a Disqus account.

  2. Register your blog/site in Disqus and create a short-name.

  3. Open your Jekyll site’s config.yml and add the below code

1
2
3
4
5
# Disqus Comments
disqus:
    # Leave shortname blank to disable comments site-wide.
    # Disable comments for any post by adding `comments: false` to that post's YAML Front Matter.
    shortname: disqus_shortname

Remember to change the disqus_shortname with your site’s shortname that you created in step 2.

  1. Create a file called disqus.html inside Jekyll’s _includes folder and add below code in it and save.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="disqus_thread"></div>
  <script>
    var disqus_config = function () {
      this.page.url = 'https://techslam.net/posts/How-to-add-Disqus-comments-to-Jekyll-Blog/';
      this.page.identifier = 'https://techslam.net/posts/How-to-add-Disqus-comments-to-Jekyll-Blog/';
    };
    (function() {
      var d = document, s = d.createElement('script');
      s.src = 'https://techslam.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" rel="nofollow">comments powered by Disqus.</a></noscript>
  1. Finally, edit the post.html file located inside _layout folder and add the following code just after the end of </article> tag. If you dont see the article tag, probably due to usage of some custom themes, then in that case look for ` {{ content }} ` and place the code just after that -
1
2
3
{% if site.disqus.shortname %}
{%   include disqus.html %}
{% endif %}

Once you have completed all the above steps, you can now commit your changes and push it to your Live site :

1
2
3
4
5
6
7
git add --all

git commit -m "add disqus"

git push -u origin master

That’s all, your static Jekyll website is now powered with Disqus commenting system. Please let me know through comments if this post was helpful to you, or if you need any help setting this up. Good Luck :)

See Also

Tags :
Aslam
Hi, I’m Aslam. I work as a Software Consultant for an US based software service company. Performing the role of a lead developer and application support engineer in Markit Enterprise Data Management tool for an UK based leading Asset Management Company. Currently based at Edinburgh, United Kingdom. Previously, worked as a RoR developer at Foradian. I maintain this blog as a hobby to keep my passion for web technology alive while Iam not busy with my day job. Articles here are mostly about the topics that interest me and that I research. Tweet to me at @tweeslam.

OLDER POST NEWER POST

Comments powered by Disqus.

Recent Update

Contents

Search Results