Update Mar 10, 2019:
Thanks to digitalap3: Hexo now adds disqus support by default in the after-footer.ejs. Just follow the directions below for changing the _config.yml, but there is no need to change any layout files with the default theme.

Disqus comments are a great way to let people comment on your articles. Disqus has automatic setup for nearly every CMS except Hexo. Unfortunately, like my adventures with deploying my site to Github Pages, this turned out to be trickier to add than I thought. Here is the easy way to set this up:

  1. Go to Disqus and create an account. As part of that process, you will choose a shortname value. Copy that value. It’s a little tough to find because there are TWO settings pages in Disqus–one for your account and one for your site. You can find your shortname on the settings page for your site here:

    1
    https://YOURSHORTNAMEHERE.disqus.com/admin/settings/general
  2. Open your _config.yml, and then enter the disqus_shortname parameter and assign it to your shortname, like so:

    1
    disqus_shortname: myshortnamegoeshere

    Also in _config.yml, set comments to true, like so:

    1
    comments: true

Update Mar 10, 2019:
Thanks to digitalap3: Hexo now adds disqus support by default in the after-footer.ejs. Just follow the directions below for changing the _config.yml, but there is no need to change any layout files with the default theme.

  1. Open footer.ejs. Paste in the universal disqus code like so:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <% if (config.disqus_shortname){ %>
    <script>
    var disqus_shortname = '<%= config.disqus_shortname %>';
    <% if (page.permalink){ %>
    var disqus_url = '<%= page.permalink %>';
    <% } %>
    (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//go.disqus.com/<% if (page.comments){ %>embed.js<% } else { %>count.js<% } %>';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    </script>
    <% } %>

    Also in footer.ejs, paste in the following markup where you want the comments to go.

    1
    <div id="disqus_thread"></div>

    My whole footer looks like this:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <% if (config.disqus_shortname){ %>
    <script>
    var disqus_shortname = '<%= config.disqus_shortname %>';
    <% if (page.permalink){ %>
    var disqus_url = '<%= page.permalink %>';
    <% } %>
    (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//go.disqus.com/<% if (page.comments){ %>embed.js<% } else { %>count.js<% } %>';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    </script>
    <% } %>

    <footer>
    &copy; <%= date(new Date(), 'YYYY') %>
    <span class="author">
    <%= config.author || '' %>
    </span>
    </footer>
    <div id="disqus_thread"></div>

Then clean and build:

1
2
$ hexo clean
$ hexo generate && hexo server

Viola. Comments!