Adding Comments to Posts Using Disqus

Many blogs include a commenting system that lets your community of readers interact with your posts. Hugo only generates static sites, but you can add support for comments using Disqus,^[27] a platform that hosts comments and provides tools for community moderation. Hugo has built-in support for Disqus. To use it, you’ll create a Disqus account for your site, set the site name in your Hugo site’s configuration file, and include the Disqus template on your pages.

Create a new account on Disqus for your site. Once your account is created, select the option to use Disqus on your site. Disqus will ask you to provide a few pieces of info about your site:

Fill in the name of your site and select the appropriate category. Take note of the URL that Disqus shows under the Website Name field; you’ll need the first part, which Disqus calls the “shortname,” to link your Hugo site to Disqus. In the preceding image, the URL for the site is pp-hugo-demo.disqus.com, so the shortname is pp-hugo-demo. Press the Create Site button to continue.

Next, select a plan. You can pay for Disqus or use the free ad-supported tier.

Once you’ve selected your plan, you’re presented with options to integrate Disqus with your site. Scroll to the bottom and choose the option to set up Disqus manually. This presents you with some code snippets you can add to your website. You can ignore this, as you’ll use Hugo’s built-in Disqus template shortly. Continue to the Configure Disqus option.

The Configure Disqus page lets you fill in the website URL, the description, and a few other attributes. You don’t need to fill these in now either. Press the Complete Setup button.

Then, open config.toml and add the following line to tell Hugo the shortname for the Disqus site you configured:

In this example, the shortname is pp-hugo-demo. Save the file and then stop the Hugo server and restart it again, just to make sure the new setting is applied.

Next, open the blog post layout at themes/basic/layout/posts/single.html, and after the article contents, add a new comments section that uses Hugo’s built-in Disqus template:

This template uses the disqusShortname shortname variable you set in config.toml and pulls in the Disqus commenting interface for this page. Save the file.

As it turns out, Disqus won’t load if your site is served from the localhost domain, so you won’t be able to see it in action. To get around this, you have a few different options:

• Host the site via a fully qualified domain name.

• Edit your local hosts file and create an entry like example.com that points to your local machine. Then visit http://example.com:1313 in your browser.

• Use a tunneling service and its client to proxy connections through external servers.

We’ll use the last approach, as it also offers an easy way to share your work with others while you’re developing your site. The service localtunnel.me^[28] is a free service that lets you do this quickly using their command-line client. The client is written in Node.js, which means you need Node installed on your local machine.

Use the npx command, included with Node.js, to launch the localtunnel client and proxy your site. Ensure the Hugo server is running, open a new Terminal window, and execute this command:

This downloads the localtunnel package and executes its binary. The -p flag specifies on which port your development server is running.

Use the URL you see in your terminal to access your site. Visit one of your posts and you’ll see your Disqus comments section at the bottom of the page:

As it stands now, you’ve added comments to every blog post. However, you might occasionally want to disallow comments on a page.

Open the first-post.md file and add a new piece of front matter that turns comments off:

Then, modify the post layout to use this value to determine whether or not the comments should display:

Return to your browser and visit the “First Post” page; you’ll see that comments are disabled for that page. Visit one of the other posts to ensure that you can still comment there. When you deploy your site to production, visitors will be able to comment and discuss your content, but only on the posts you choose. Remember to use Disqus’s interface to manage and moderate the comments people leave on your site though.

Switch to the terminal window that’s running the localtunnel server and use Ctrl+c to shut it down. You can then close the terminal window as you won’t need it anymore.

Your blog is almost complete. Let’s add one final feature: showing people other posts related to the one they’re reading.