Blog | loke.dev

Static sites offer incredible performance and security benefits, but adding interactive features like comments can be challenging. Fortunately, Disqus provides an elegant solution that works perfectly with static site generators like Gridsome. In this comprehensive guide, I'll walk you through the entire process of adding Disqus comments to your Gridsome site.

What is Disqus and Why Use It with Gridsome?

Disqus is a popular comment hosting service that loads asynchronously on your pages through an iframe. This approach offers several advantages for static sites:

No server-side code required
Handles user authentication and moderation
Provides spam filtering and notifications
Offers social media integration
Works seamlessly with static site generators

For Gridsome sites, Disqus is particularly valuable as it adds dynamic functionality without sacrificing the benefits of static site generation.

Step 1: Create a Disqus Account and Site

Before adding Disqus to your Gridsome site, you'll need to set up an account:

Sign up for an account at https://disqus.com/
Select "I want to install Disqus on my site" when prompted
Fill in the required information about your site
When asked "What platform is your site on?", scroll down and select "Universal Code"
Complete the setup process

During this process, you'll create a unique Shortname for your site. This identifier is crucial as you'll need it to configure Disqus on your Gridsome site.

Disqus shortname example

Step 2: Install vue-disqus in Your Gridsome Project

The easiest way to integrate Disqus with Gridsome is using the vue-disqus package, which provides a convenient Vue component for Disqus integration.

Install the package using npm:

npm install vue-disqus

Step 3: Configure vue-disqus in Your Gridsome Project

After installation, you need to register the vue-disqus plugin in your Gridsome project. Open your main.js file located in the src directory and add the following code:

import VueDisqus from 'vue-disqus'
 
export default function (Vue, { head }) {
  Vue.use(VueDisqus)
}

This registers the Disqus component globally, making it available throughout your Gridsome site.

Step 4: Add the Disqus Component to Your Templates

Now you can add the Disqus comment section to any page or template in your Gridsome site. The most common place is at the bottom of blog post templates.

Here's how to add it to your blog post template:

<template>
  <Layout>
    <div class="post-content">
      <!-- Your post content here -->
      <h1>{{ $page.post.title }}</h1>
      <div v-html="$page.post.content" />
 
      <!-- Disqus comments section -->
      <div class="comments-section">
        <h2>Comments</h2>
        <vue-disqus
          shortname="YOUR_DISQUS_SHORTNAME"
          :identifier="$page.post.title"
          :url="websiteUrl + $page.post.path"
        ></vue-disqus>
      </div>
    </div>
  </Layout>
</template>
 
<script>
export default {
  data() {
    return {
      websiteUrl: 'https://yourdomain.com' // Replace with your actual domain
    }
  }
}
</script>

Replace YOUR_DISQUS_SHORTNAME with the shortname you created during the Disqus setup process.

Understanding the Disqus Component Properties

The vue-disqus component accepts several important properties:

shortname: Your unique Disqus identifier (required)
identifier: A unique identifier for the page (typically the post title or ID)
url: The canonical URL of the page
title: The title of the page (optional)
language: The language code for the comments (optional)

For optimal SEO and comment synchronization, it's recommended to provide both the identifier and url properties.

Best Practices for Disqus Integration

To ensure the best experience with Disqus on your Gridsome site:

Use consistent identifiers: Ensure each page has a unique, consistent identifier to prevent comment threads from being duplicated or lost.
Consider lazy loading: For better performance, consider loading Disqus only when users scroll to the comments section.
Provide a canonical URL: Always include the full URL to your page to ensure comments are properly associated with the correct page.
Test in development and production: Disqus behaves differently in development environments, so always test your implementation in production.

Conclusion

Adding Disqus comments to your Gridsome site is a straightforward process that enhances user engagement without sacrificing the benefits of a static site. By following the steps outlined in this guide, you can quickly implement a robust commenting system that works across all your pages.

For more advanced configurations and customization options, refer to the official Disqus documentation and the vue-disqus GitHub repository.

Have you implemented comments on your static site? What challenges did you face? Share your experiences in the comments below!

Did you find this article helpful? Follow me for more web development tips and solutions to common challenges.

Adding Comments to Your Gridsome Site with Disqus: A Complete Guide