🚀 Build Lightning-Fast Sites with Hugo, Netlify, and Serverless Comments

Published on: 2021-12-12

Whether building a blog, documentation site, or portfolio, the goal is often to keep it fast, lightweight, and easy to maintain—without backend servers or complex CMSs. Static site generators like Hugo offer a fantastic developer experience, but the real challenge is making them feel dynamic—especially when adding features like comments.

This guide explains how to use tools like Hugo, Netlify, and FaunaDB to spin up a powerful static site—complete with dynamic comments—and host it online for free.

---

Why Hugo?

• ⚡ Extremely fast build times
• ✍ Markdown-based content
• 🔌 Plugin-free, batteries-included
• 🚀 Easy Netlify integration

Hugo is also easy to theme, and a blog can be running within minutes. But static sites have an inherent limitation: they’re static.

---

Making Static Interactive

Comments were needed, but relying on Disqus (ads, trackers) or running a dedicated server wasn’t an option.

Instead, this stack was used:

• 🖋 Hugo – generates the blog
• 🌐 Netlify – hosts and deploys it
• ☁️ Netlify Functions – handles serverless API
• 🦎 FaunaDB – acts as the database

---

Folder Structure

.
├── netlify/
│   └── functions/
│       └── comments.js
├── content/
│   └── posts/
├── static/
│   └── js/
│       └── comment.js
├── config.toml
└── netlify.toml

---

The Serverless Comment API (Netlify Function)

// netlify/functions/comments.js
const faunadb = require("faunadb");
const q = faunadb.query;

exports.handler = async (event) => {
  const client = new faunadb.Client({ secret: process.env.FAUNA_SECRET });

  if (event.httpMethod === "POST") {
    const data = JSON.parse(event.body);
    const res = await client.query(
      q.Create(q.Collection("comments"), { data }),
    );
    return {
      statusCode: 200,
      body: JSON.stringify(res),
    };
  }
};

---

Frontend Integration

In the Hugo theme, include a small JS file in static/js/comment.js to POST comment data to the Netlify Function.

fetch("/.netlify/functions/comments", {
  method: "POST",
  body: JSON.stringify({ name, comment }),
});

---

Netlify Configuration

# netlify.toml
[build]
  publish = "public"
  command = "hugo"

[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200

---

🧾 Summary

Using Hugo with Netlify and serverless functions results in a site that is:

• ✅ Fast
• ✅ Cheap (free tier)
• ✅ Serverless
• ✅ Fully under developer control

It’s a perfect setup for anyone—from solo devs to indie writers—seeking the benefits of a static site without sacrificing dynamic features like comments.

Tools like Netlify make going live incredibly simple, and Hugo makes content management feel like editing Markdown rather than battling a traditional CMS.