How to Install Disqus to Jekyll Static Site
Hands-on guide to embed Disqus comments into a Jekyll site
I don’t really use Disqus anymore, but some websites still prefer to use it. If you’re using a Jekyll site, such as one hosted on GitHub Pages, you can embed Disqus easily.
Enough chit-chat — let’s get started!
Update _config.yml
First, we need to add a new configuration to the _config.yml file.
This will be used to store your Disqus settings.
We’ll mainly need the shortname, but you’re welcome to expand it further.
# 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: your_shortnameReplace the shortname value with the one you get when setting up a new site on Disqus.
Once the configuration is ready, let’s create a new Disqus component for our Jekyll site.
Disqus Component for Jekyll
Now let’s create a reusable Disqus component.
Create a new HTML file called disqus_comments.html in the following path:
_includes/components/disqus_comments.htmlHere’s a basic Disqus embed code you can use:
{% if page.comments != false and jekyll.environment == "production" %}
<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.url | absolute_url }}'; /* Replace PAGE_URL with your page's canonical URL variable */
this.page.identifier = '{{ page.url | absolute_url }}'; /* 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://{{ site.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 %}
{% if page.comments != false and jekyll.environment != "production" %}
<p>Disqus is disabled for non-production environments</p>
{% endif %}This script will only run in production.
It will only be shown if you set a valid shortname.
If not, no comments will be displayed.
Of course, you’re welcome to modify or expand the script as needed.
Embed into default.html
Now let’s embed the Disqus component into every single post on your Jekyll site.
By default, the file you need to edit is default.html, located at:
_layouts/default.htmlMake sure to place the following snippet right below {{ content }}:
{% if site.disqus.shortname %}
{% include components/disqus_comments.html %}
{% endif %}The next time you build your Jekyll site, your Disqus comments should appear on your posts.
Conclusion
That’s it for today. Thanks for reading!
As usual, if you have any questions or a better method, leave a comment below. Thanks for reading, and see you next time!