High‑Performance Comment Integration for Static Hugo Blogs Using getJSON and Waline

Static blogs lack built‑in dynamic features, so comments are usually handled by third‑party JavaScript widgets that fetch data at runtime, which slows down page load compared to dynamic sites. By using Hugo's getJSON method, comment data can be retrieved during the build process and rendered directly into the generated HTML.

The approach relies on three key components: (1) Hugo's build pipeline must be able to call external APIs, (2) the comment service (Waline) must expose HTTP endpoints for recent comments, comment counts, and paginated comment lists, and (3) the hosting platform (Vercel) must provide a deploy‑hook URL that can be triggered to rebuild the site whenever a comment is created, updated, or deleted.

Implementation steps include adding getJSON calls in Hugo templates to fetch recent comments, comment counts, and full comment lists, storing the results in a scratch variable, and rendering them with Hugo's templating syntax. Example snippets:

{{ $walineURL := .Site.Params.comment.waline.serverURL }}
最近回复
{{ $resp := getJSON $walineURL "/comment?type=recent" }}
  {{ range $resp }}
{{ .nick }}
：{{ .comment | safeHTML | truncate 22 }}
{{ end }}

For the comment list with pagination, the template first fetches the total comment count, then retrieves the first page of comments and, if more pages exist, iterates over the remaining pages, aggregating all comments into {{$scratch.Get "comments"}} for rendering.

{{$baseUrl := .Site.Params.comment.waline.serverURL}}
{{$slug := .Slug}}
{{$count := getJSON $baseUrl "/comment?type=count&url=/" $slug ".html"}}
{{$scratch := newScratch}}
{{$scratch.Add "comments" slice}}
{{ if gt $count 0 }}
  {{$comments := getJSON $baseUrl "/comment?path=/" $slug ".html&page=1&pageSize=100"}}
  {{ range $cmt := $comments.data }}
    {{$scratch.Add "comments" $cmt}}
  {{ end }}
  {{$totalPages := $comments.totalPages}}
  {{ if gt $totalPages 1 }}
    {{ range $page := seq 2 $totalPages }}
      {{$comments := getJSON $baseUrl "/comment?path=/" $slug ".html&pageSize=100&page=" $page}}
      {{ range $cmt := $comments.data }}
        {{$scratch.Add "comments" $cmt}}
      {{ end }}
    {{ end }}
  {{ end }}
{{ end }}
{{ range $cmt := $scratch.Get "comments" }}
{{$cmt.nick}}
{{$cmt.browser}}
{{$cmt.os}}
{{dateFormat $cmt.insertedAt "2006-01-02 03:04:05"}}
{{$cmt.comment | safeHTML}}
{{ end }}

Waline's webhook support is used to call a Vercel deploy‑hook URL (implemented in index.js ) after each comment mutation, ensuring the static site is rebuilt with the latest comment data.

const Waline = require('@waline/vercel');
const https = require('https');
const buildTrigger = _ => https.get('https://api.vercel.com/v1/integrations/deploy/xxxxx');
module.exports = Waline({
  async postSave(comment) {
    if (comment.status !== 'approved') return;
    buildTrigger();
  },
  async postUpdate() { buildTrigger(); },
  async postDelete() { buildTrigger(); }
});

Because Hugo caches API responses during a build, the number of external requests stays low, preserving third‑party rate limits. The only trade‑off is a slight delay in comment visibility, which is acceptable given Hugo's fast build times.