Enable visitor comments on your Middleman static website with Disqus

Enabling your visitors and users to leave comments adds interactivity to your website and allows you to collect feedback. One simple way to do it is to use Disqus. First, go to Disqus and open an account.

Disqus homepage screenshot o

Luckily, there is a Disqus gem specifically for Middleman. As per its instructions on Github, add the gem to your Gemfile:

# Gemfile
gem "middleman-disqus"

Don't forget to stop your middleman server in development and run bundle install . To configure Disqus, add the following to your config.rb . Be careful about the two options in development:

# config.rb
configure :development do
  activate :disqus do |d|
    # Two options in development

    # Option 1: Use a special development shortname
    d.shortname = "development-shortname"

    # Option 2: Disable Disqus in development
    d.shortname = nil
  end
end

configure :build do
  activate :disqus do |d|
    # using a different shortname for production builds
    d.shortname = "production-shortname"
  end
end

Basically, in Disqus you set up one project for production, your site you want to show comments on. For development, you should not use the same project that you have in production. That leaves you with two options: Setting up a separate project / website in Disqus ("NEW_STATIC_WEBSITE-development"). Alternatively, you can choose to not show Disqus in development by setting d.shortname = nil . As I don't show Disqus everywhere and like to have my development pages as similar as possible to production, I go with the first option.

So, where can you find the "shortname" to input into config.rb ? Just go into your Disqus dashboard and head over to Settings / General. You can find the shortname as second item:

Disqus where to get shortname id o

Once you added the shortnames to config.rb Disqus should be working! Now you just need to call it at the desired spots in your website. Generally, just calling <%= disqus %> anywhere you want it to appear.

Since I use Bootstrap, I always call it together inside col and row div's. So I created this little partial:

/partials/_disqus.html.erb

<div class="row">
  <div class="col">
    <%= disqus %>
  </div>
</div>

Inside my erb-page I then just call:

<%= partial "/partials/disqus" %>

To provide some context, a clean template for a new page together with frontmatter / SEO tag and disqus in bootstrap looks as follows:

---
title: "Title text"
description: "Description text"
---

<div class="container">
  <div class="row">
    <div class="col">
      <h1 class="main-title"><%= current_page.data.title %></h1>
      <p>Lorem ipsum...</p>
    </div>
  </div>
  <%= partial "/partials/disqus" %>
</div>

I hope this article helps — let me know any feedback in the Disqus comments below! :D

comments powered by Disqus