Step-by-Step Guide to Adding a Comments Section to Your Hugo Site

10 Mar 2024

In the world of static site generators, Hugo is renowned for its speed and flexibility. However, incorporating dynamic features such as a comments section requires a bit of external help. This article will guide you through adding a customizable comments widget to your Hugo site, enhancing interactivity and engagement for your visitors.

Step 1: Selecting the Right Place for Comments

First, decide where on your Hugo site you'd like the comments section to appear. A common choice is at the end of blog posts to facilitate discussion about the content.

Step 2: Modifying Your Hugo Template

To add the comments section, you need to edit the template file for your blog posts. This file is typically located in your Hugo site's layouts directory, under layouts/posts/single.html or a similar path, depending on your theme.

Step 3: Inserting the Comment Widget Code

Open the template file for editing and locate the position where you want the comments section to be displayed. Paste the comment widget code snippet into the HTML of the template file at this location.

<div
  id="zoomment"
  data-theme="light"
  data-language="en"
  data-gravatar="monsterid"
  data-emotions="❤️,😀,🪄,🥸,💡,🤔,💩,😢"
></div>
<script src="https://cdn.zoomment.com/zoomment.min.js"></script>

Step 4: Customize the Widget (Optional)

You can customize the widget's appearance and functionality by modifying the data- attributes in the div tag. For example, changing the data-theme attribute to "dark" could better suit your site's design, or adjusting the data-language might be necessary for your audience.

Step 5: Testing the Integration

After saving your changes, test the widget to ensure it's functioning correctly:

Rebuild your Hugo site by running hugo in your terminal.
Serve your site locally using hugo server and navigate to a blog post to check the comments section.

Conclusion

Integrating a comments section into your Hugo site can significantly enhance visitor engagement by encouraging discussions and feedback. By following the steps outlined in this guide, you can seamlessly add a customizable comments widget to your site, fostering a community around your content.