Using Disqus with Netlify
Tags: netlify, disqus, staticsitegeneration
Published: 2020-07-07 18:51:07

---
title: Using Disqus with Netlify
published: true
date: 2018-07-20 11:37:01 UTC
tags: netlify,disqus,staticsitegeneration
canonical_url: https://youknowfordevs.com/2018/07/20/using-disqus-with-netlify.html
---

To use Disqus on Netlify you can either let Netlify do the work of embedding the required snippet, or get your static-site generator (SSG) to take the strain.

<!--snip--->
# Netlify

![Netlify Logo](https://youknowfordevs.com/images/uploads/netlify.svg)

Netlify is great. In the [search for the ideal blogging platform](/2012/02/24/choosing-a-blogging-platform/) it has the perfect architecture.

First, you write all of your posts in Markdown and keep them in a Git repo, and then use a static-site generator (SSG) to build your blog. Of course you do, you might say…where’s the news?

Well, second, whilst you might be used to running your SSG locally and then pushing the generated HTML to somewhere like S3 or a CDN, with Netlify that’s done for you, by connecting Netlify to your GitHub, GitLab or Bitbucket repo.

Yawn…you can do that with GitHub Pages, you tell me.

But here is where it gets interesting; Netlify has built a whole set of features into its build process that can help you manage the _generated_ blog without having to modify the repo itself. You can add forms and logins to your blog, for example.

![AWS Lambda Logo](https://youknowfordevs.com/images/uploads/aws-lambda.jpeg)

And if you want to take the site beyond a blog and into application territory you can even add AWS Lamda Functions.

# Using Netlify Snippets

![Disqus Logo](https://youknowfordevs.com/images/uploads/disqus.svg)

The easiest way to get Disqus going in Netlify is to create a snippet. Simply paste the code from Disqus’s instructions for the [universal embed code](https://help.disqus.com/installation/universal-embed-code).

There are two problems with this, though.

The first is that Netlify only supports placing snippets before the closing `head` tag or before the closing `body` tag. However, for Disqus to look its best in our blog it would ideally be placed before the _footer_. In the case of this blog (which is generated by Jekyll) that’s just before the closing `article` tag.

The second issue is that in order to solve the [split threads and missing comments problem](https://help.disqus.com/troubleshooting/use-configuration-variables-to-avoid-split-threads-and-missing-comments) we’d like to be able to insert the page URL and a unique identifier into the embedded script. This is not possible in Netlify snippets though, since there is no support for variable substitution.

However, neither of these issues is a show-stopper; having the Disqus comments placed at the end of the page rather than before the footer looks a bit odd but not terrible. And I’ve seen many sites that don’t bother to put the page URL and identifier values into the Disqus script–probably because they have canonical URLs for their site pages and don’t suffer from the ambiguity that can cause the ‘split threads’ problem.

So if neither the layout or canonical URLs problems are an issue for you then using Netlify snippets is certainly the best way to go, because it is _completely independent of the SSG used to generate the site_.

# Using the SSG

The other approach to incorporating Disqus is to get your SSG to do the work. Most SSGs will let you trigger inclusion of the snippet required with just a little bit of configuration. In the case of Jekyll it’s a simple case of adding the shortname for the particular Disqus configuration for your site, to the `_config.yml` file. In my case it looks like this:

```yml
.
.
.
disqus:
  shortname: you-know-for-devs
.
.
.
```

Jekyll won’t add the correct snippet in preview sites but it will when generating a site in production mode. This is easily done in Netlify by setting `JEKYLL_ENV` to the value `production` in the _Build environment variables_ section of your site’s _Settings_:

![Set JEKYL_ENV in Netlify](https://youknowfordevs.com/images/uploads/set-jekyll_env-netlify.png)

Once the config and environment variable are added the result is that the correct snippet is embedded by Jekyll at the end of the `article` tag (looking much neater than at the end of `body`) and the page’s URL and a unique identifier are added to the configuration used to communicate with the Disqus back-end.

One thing that caught me out for a little while is that if there is no site URL set in the config then the embedded script fails to make the connection with Disqus. It’s a simple fix; just make sure to have `url` set in `_config.yml`:

```yml
.
.
.
url: "http://youknowfordevs.com" # the base hostname & protocol for your site, e.g. http://example.com
.
.
.
```

That’s it. Commit and push your configuration changes to your repo and let Netlify do its magic–a few seconds later you have Disqus comments on your site.