Adding Disqus comments to a Hexo powered site

1. Set up your Disqus account
2. Add Disqus support to Hexo
   1. Edit the main config.yml file
   2. Create an .ejs file for Disqus
   3. Include Disqus in the template

Set up your Disqus account

First of all, one should visit https://disqus.com/ and create a new site to use their service.

Add Disqus support to Hexo

Edit the main config.yml file

Open the config.ym file in your root directory of your website, append the following content:

# DISQUS comments
disqus:
  enable: true
  shortname: my-website

Please change the string my-website with your own, which is the Shortname of your site on Disqus.

Create an .ejs file for Disqus

Create an .ejs file in your theme directory, such as themes/my-theme/layout/_partial/plugins/disqus/index.ejs:

<% if (config.disqus.enable && config.disqus.shortname){ %>
  <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.permalink %>';  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = '<%- page.date %>'; // 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://<%- config.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>
<% } %>

Include Disqus in the template

Edit themes/my-theme/layout/_partial/article.ejs, remove the existing code block around <section id="comments">(if any), and append the following code snippets to this file:

<% if (!index && post.comments) { %>
<section id="comments">
  <%- partial('_partial/plugins/disqus/index.ejs') %>
</section>
<% } %>

Now you should be able to see Disqus embeded on your web pages.