CINXE.COM
Static comments script for Hugo (in PHP) - tips & tricks - HUGO
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Static comments script for Hugo (in PHP) - tips & tricks - HUGO</title> <meta name="description" content="I finally managed to fix a few annoying issues :wink: with my first approach, and this one finally works: Baking static, Markdown-ready comments right into your Hugo pages/posts without a subscription or even a GitHub ac&hellip;"> <meta name="generator" content="Discourse 3.4.0.beta3-dev - https://github.com/discourse/discourse version 5bf5d1335680f28a8eb65c488353be9585eed08e"> <link rel="icon" type="image/png" href="https://global.discourse-cdn.com/flex036/uploads/gohugo/optimized/2X/6/66a05218f64425b2fa59ede30c1b4b7dc1fdf5f9_2_32x32.ico"> <link rel="apple-touch-icon" type="image/png" href="https://global.discourse-cdn.com/flex036/uploads/gohugo/optimized/2X/c/c2d3414c64e766d814100b32063948e604298a70_2_180x180.png"> <meta name="theme-color" media="all" content="#0a1922"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover"> <link rel="canonical" href="https://discourse.gohugo.io/t/static-comments-script-for-hugo-in-php/51924" /> <link rel="search" type="application/opensearchdescription+xml" href="https://discourse.gohugo.io/opensearch.xml" title="HUGO Search"> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/color_definitions_hugo-light_1_3_09733212c5bcbf3d2262e9135364889a94410a8e.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" class="light-scheme"/> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/desktop_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="desktop" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/checklist_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="checklist" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-adplugin_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-adplugin" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-ai_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-ai" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-akismet_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-akismet" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-cakeday_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-cakeday" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-details_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-details" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-lazy-videos_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-lazy-videos" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-local-dates_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-local-dates" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-narrative-bot_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-narrative-bot" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-presence_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-presence" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-solved_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-solved" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/footnote_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="footnote" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/hosted-site_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="hosted-site" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/poll_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="poll" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/spoiler-alert_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="spoiler-alert" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-ai_desktop_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-ai_desktop" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/poll_desktop_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="poll_desktop" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/desktop_theme_2_554e2f649b5332218939d027878568e9fb5cb3e9.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="2" data-theme-name="custom header links"/> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/desktop_theme_3_ba320989966c049743dec43ab8cc84324bf2a254.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="3" data-theme-name="hugo light"/> <meta id="data-ga-universal-analytics" data-tracking-code="UA-7131036-7" data-json="{"cookieDomain":"auto"}" data-auto-link-domains=""> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-7131036-7" nonce="fypRf24xxdkwaUGRxMoX8lZac"></script> <script defer src="https://global.discourse-cdn.com/flex036/assets/google-universal-analytics-v4-e154af4adb3c483a3aba7f9a7229b8881cdc5cf369290923d965a2ad30163ae8.gz.js" data-discourse-entrypoint="google-universal-analytics-v4" nonce="fypRf24xxdkwaUGRxMoX8lZac"></script> <link rel="alternate nofollow" type="application/rss+xml" title="RSS feed of 'Static comments script for Hugo (in PHP)'" href="https://discourse.gohugo.io/t/static-comments-script-for-hugo-in-php/51924.rss" /> <meta property="og:site_name" content="HUGO" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:image" content="https://global.discourse-cdn.com/flex036/uploads/gohugo/original/2X/b/b91c8ab3a3c1c8679127cf049b46fa919e9e0e5c.png" /> <meta property="og:image" content="https://global.discourse-cdn.com/flex036/uploads/gohugo/original/2X/b/b91c8ab3a3c1c8679127cf049b46fa919e9e0e5c.png" /> <meta property="og:url" content="https://discourse.gohugo.io/t/static-comments-script-for-hugo-in-php/51924" /> <meta name="twitter:url" content="https://discourse.gohugo.io/t/static-comments-script-for-hugo-in-php/51924" /> <meta property="og:title" content="Static comments script for Hugo (in PHP)" /> <meta name="twitter:title" content="Static comments script for Hugo (in PHP)" /> <meta property="og:description" content="I finally managed to fix a few annoying issues 😉 with my first approach, and this one finally works: Baking static, Markdown-ready comments right into your Hugo pages/posts without a subscription or even a GitHub account. All you need is PHP with YAML support on the server that serves your Hugo page. 🙂 It works like this: A random internet user comments on /2024/10/foo. The script writes the comment into /content/2024/10/foo/comments/. A page rebuild is triggered. Hugo will ..." /> <meta name="twitter:description" content="I finally managed to fix a few annoying issues 😉 with my first approach, and this one finally works: Baking static, Markdown-ready comments right into your Hugo pages/posts without a subscription or even a GitHub account. All you need is PHP with YAML support on the server that serves your Hugo page. 🙂 It works like this: A random internet user comments on /2024/10/foo. The script writes the comment into /content/2024/10/foo/comments/. A page rebuild is triggered. Hugo will ..." /> <meta property="og:article:section" content="tips & tricks" /> <meta property="og:article:section:color" content="ED207B" /> <meta name="twitter:label1" value="Reading time" /> <meta name="twitter:data1" value="1 mins 🕑" /> <meta name="twitter:label2" value="Likes" /> <meta name="twitter:data2" value="2 ❤" /> <meta property="article:published_time" content="2024-10-13T02:57:41+00:00" /> <meta property="og:ignore_canonical" content="true" /> <script type="application/ld+json">{"@context":"http://schema.org","@type":"QAPage","name":"Static comments script for Hugo (in PHP)","mainEntity":{"@type":"Question","name":"Static comments script for Hugo (in PHP)","text":"I finally managed to fix a few annoying issues :wink: with my first approach, and this one finally works: Baking static, Markdown-ready comments right into your Hugo pages/posts without a subscription or even a GitHub account. All you need is PHP <a href=\"https://www.php.net/manual/en/book.yaml.php\" rel=\"noopener nofollow ugc\">with YAML support<\/a> on the server that serves your Hugo…","upvoteCount":0,"answerCount":0,"datePublished":"2024-10-13T02:57:40.964Z","author":{"@type":"Person","name":"dertuxmalwieder","url":"https://discourse.gohugo.io/u/dertuxmalwieder"}}}</script> </head> <body class="crawler browser-update"> <script defer="" src="https://yyz2.discourse-cdn.com/flex036/theme-javascripts/417061e7eee24be4fb6a457975f0dce96a82d9e6.js?__ws=discourse.gohugo.io" data-theme-id="5" nonce="fypRf24xxdkwaUGRxMoX8lZac"></script> <header> <a href="/"> HUGO </a> </header> <div id="main-outlet" class="wrap" role="main"> <div id="topic-title"> <h1> <a href="/t/static-comments-script-for-hugo-in-php/51924">Static comments script for Hugo (in PHP)</a> </h1> <div class="topic-category" itemscope itemtype="http://schema.org/BreadcrumbList"> <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="/c/tips-tricks/38" class="badge-wrapper bullet" itemprop="item"> <span class='badge-category-bg' style='background-color: #ED207B'></span> <span class='badge-category clear-badge'> <span class='category-name' itemprop='name'>tips & tricks</span> </span> </a> <meta itemprop="position" content="1" /> </span> </div> </div> <div itemscope itemtype='http://schema.org/DiscussionForumPosting'> <meta itemprop='headline' content='Static comments script for Hugo (in PHP)'> <link itemprop='url' href='https://discourse.gohugo.io/t/static-comments-script-for-hugo-in-php/51924'> <meta itemprop='datePublished' content='2024-10-13T02:57:40Z'> <meta itemprop='articleSection' content='tips & tricks'> <meta itemprop='keywords' content=''> <div itemprop='publisher' itemscope itemtype="http://schema.org/Organization"> <meta itemprop='name' content='HUGO'> </div> <div id='post_1' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://discourse.gohugo.io/u/dertuxmalwieder'><span itemprop='name'>dertuxmalwieder</span></a> </span> <link itemprop="mainEntityOfPage" href="https://discourse.gohugo.io/t/static-comments-script-for-hugo-in-php/51924"> <span class="crawler-post-infos"> <time datetime='2024-10-13T02:57:41Z' class='post-time'> October 13, 2024, 2:57am </time> <meta itemprop='dateModified' content='2024-10-13T13:30:23Z'> <span itemprop='position'>1</span> </span> </div> <div class='post' itemprop='text'> <p>I finally managed to fix a few annoying issues <img src="https://emoji.discourse-cdn.com/twitter/wink.png?v=12" title=":wink:" class="emoji" alt=":wink:" loading="lazy" width="20" height="20"> with my first approach, and this one finally works: <em>Baking <strong>static, Markdown-ready comments</strong> right into your Hugo pages/posts</em> without a subscription or even a GitHub account. All you need is PHP <a href="https://www.php.net/manual/en/book.yaml.php" rel="noopener nofollow ugc">with YAML support</a> on the server that serves your Hugo page. <img src="https://emoji.discourse-cdn.com/twitter/slight_smile.png?v=12" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p> <p>It works like this:</p> <ol> <li>A random internet user comments on <code>/2024/10/foo</code>.</li> <li>The script writes the comment into <code>/content/2024/10/foo/comments/</code>.</li> <li>A page rebuild is triggered.</li> <li>Hugo will automatically add the new comment’s contents to the output page.</li> </ol> <p>(I recommend some kind of moderation here, but you’re free to establish your own pipeline.)</p> <p><strong>The script:</strong></p> <pre data-code-wrap="php"><code class="lang-php"><?php $_POST = filter_input_array(INPUT_POST, FILTER_SANITIZE_STRING); $timestamp_file = (new \DateTime())->format('Y-m-d\TH.i.s.u'); $timestamp_object = (new \DateTime())->format('Y-m-d H:i:s.uZ'); $comment = array( "post_id" => $_POST["postid"], "timestamp" => $timestamp_object, "author" => $_POST["author"], "email" => $_POST["email"], "link" => $_POST["url"], "comment" => $_POST["comment"] ); $hash = substr(hash('md5', $_POST["comment"]), 0, 6); $commentdir = dirname(__FILE__) . "/content/" . str_replace("/blog", "", $_POST["storage"]) . "comments/"; $filepath = $commentdir . $timestamp_file . "-" . $hash . ".yml"; if (!file_exists($commentdir)) { mkdir($commentdir, 0777, true); } $success = yaml_emit_file($filepath, $comment); if ($success) { exec("cd " . dirname(__FILE__) . " && hugo"); header("Location: " . $_POST["postid"]); } else { echo "Error. :-("; // << Here's a good place to log it... } ?> </code></pre> <p><strong><code>themes/quux/layouts/partials/comment-form.html</code>:</strong></p> <pre data-code-wrap="html"><code class="lang-html"><form action="comments.php" method="POST" id="commentform"> <input type="hidden" name="postid" value="{{ .RelPermalink }}" /> <input type="hidden" name="storage" value="{{ .File.Dir }}" /> <p class="comment-form-author"><label for="author">Name (optional):</label> <input id="author" name="author" type="text" placeholder="Name" size="30" maxlength="245" /></p> <p class="comment-form-email"><label for="email">E-mail (optional):</label><input id="email" name="email" type="text" placeholder="E-mail address" size="30" maxlength="100" /></p> <p class="comment-form-url"><label for="url">Website (optional):</label><input id="url" name="url" type="text" placeholder="Website (URL)" size="30" maxlength="200" /></p> <p class="comment-form-comment"><textarea name="comment" id="comment" cols="45" rows="8" required="required" placeholder="Your comment (Markdown is enabled)"></textarea></p> <p class="form-submit"><input type="submit" value="Post" /></p> </form> </code></pre> <p><strong><code>themes/quux/layouts/partials/comment-list.html</code>:</strong></p> <pre data-code-wrap="html"><code class="lang-html">{{ $scratch := newScratch }} {{ $scratch.Set "comments" (.Resources.Match "comments/*.yml") }} {{ if eq 0 (len ($scratch.Get "comments")) }} <h2>No comments left here yet.</h2> {{ else }} {{ $.Scratch.Set "commentcounter" 0 }} <ol class="commentlist"> {{ range ($scratch.Get "comments") }} {{ $.Scratch.Set "commentcounter" (add ($.Scratch.Get "commentcounter") 1) }} <li class="comment"> {{ $comment := (.Content | transform.Unmarshal) }} <article id="comment-{{$.Scratch.Get "commentcounter"}}" class="comment"> <footer> <div class="comment-author"> <cite class="fn">{{ if $comment.link }} <a href="{{ $comment.link }}">{{ $comment.author }}</a> {{ else }} {{ $comment.author }} {{ end }} </cite> </div> <div class="comment-meta"> {{ $comment.timestamp | dateFormat ":date_long" -}} &nbsp;at {{ $comment.timestamp | dateFormat ":time_short" -}} </div> </footer> <div class="comment-content">{{ $comment.comment | markdownify }}</div> </article> </li> {{ end }} </ol> {{ end }} </code></pre> <p><strong><code>themes/quux/_default/single.html</code>:</strong></p> <pre data-code-wrap="html"><code class="lang-html"><article> ... </article> <div id="comments" class="comments-area"> <h1>Comments:</h1> {{- partial "comment-list.html" . -}} <br /> <h3>Add a new comment</h3> {{- partial "comment-form.html" . -}} </div> </code></pre> <p>Works for me.</p> <p>A <em>reply_to</em> field for those who would like to have nested comments is left as an exercise to the reader.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_2' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://discourse.gohugo.io/u/dertuxmalwieder'><span itemprop='name'>dertuxmalwieder</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-10-27T22:59:43Z' class='post-time'> October 27, 2024, 10:59pm </time> <meta itemprop='dateModified' content='2024-10-27T22:59:43Z'> <span itemprop='position'>2</span> </span> </div> <div class='post' itemprop='text'> <aside class="quote no-group" data-username="dertuxmalwieder" data-post="1" data-topic="51924"> <div class="title"> <div class="quote-controls"></div> <img loading="lazy" alt="" width="24" height="24" src="https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/dertuxmalwieder/48/496_2.png" class="avatar"> dertuxmalwieder:</div> <blockquote> <p>(I recommend some kind of moderation here, but you’re free to establish your own pipeline.)</p> </blockquote> </aside> <p>I wrote a small(ish) moderation script for the shell. Requires <code>ksh</code> (probably works with <code>bash</code> too) and <code>yq</code>. You’ll need to store moderated comments as <code>.yml2</code> (just change the <code>$filepath</code> line in the PHP script!).</p> <pre data-code-wrap="bash"><code class="lang-bash">#!/usr/bin/env ksh done_something=0 # 1, if Hugo needs to be run echo Comments moderation script for Hugo. read content_path?"Path to /content: " # Remove the trailing /, if any: if [[ "$content_path" == */ ]]; then content_path=${content_path%?} fi if [ -d $content_path ]; then # Path exists. # Search for .yml2 files: file_list=`find $content_path -name "*.yml2"` if [ -z $file_list ]; then echo No comments are currently awaiting moderation. exit fi # Comments were found. comment_counter=1 for comment_file in $file_list; do echo "" echo --------------------- echo Comment no. $comment_counter: echo "" # Read: echo " Post: `yq -e '.post_id' $comment_file`" echo " Author: `yq -e '.author' $comment_file` (`yq -e '.email' $comment_file`)" echo " Text: `yq -e '.comment' $comment_file`" echo "" # What to do? read action?"[P]ublish, [D]elete, [E]dit first? " case $action in P|p) # Rename .yml2 to .yml: newName=${comment_file%?} mv $comment_file $newName done_something=1 echo The comment will be published. ;; D|d) # Delete $comment_file: rm $comment_file echo Comment deleted. ;; E|e) # Edit $comment_file, then publish it: vi $comment_file # you could also use ed here, or emacs... newName=${comment_file%?} mv $comment_file $newName done_something=1 echo The comment has been edited and will be published. ;; *) echo This comment will be skipped. ;; esac ((comment_counter++)) done # Run Hugo if a new comment has been published: if [[ $done_something -eq 1 ]]; then cd $content_path/.. hugo fi else echo Wrong path. fi </code></pre> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_3' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://discourse.gohugo.io/u/Peng_Hu'><span itemprop='name'>Peng_Hu</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-11-13T05:38:12Z' class='post-time'> November 13, 2024, 5:38am </time> <meta itemprop='dateModified' content='2024-11-13T05:38:12Z'> <span itemprop='position'>3</span> </span> </div> <div class='post' itemprop='text'> <p>No offense, I’m just curious that why it called static?</p> <p>Static websites mean there is no real-time interactions between server and clients, likes github pages base on my understanding. There will be some misunderstanding after a brief glance</p> <p>Still Thanks for your product.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_4' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://discourse.gohugo.io/u/dertuxmalwieder'><span itemprop='name'>dertuxmalwieder</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-11-13T09:49:38Z' class='post-time'> November 13, 2024, 9:49am </time> <meta itemprop='dateModified' content='2024-11-13T09:49:38Z'> <span itemprop='position'>4</span> </span> </div> <div class='post' itemprop='text'> <aside class="quote no-group" data-username="Peng_Hu" data-post="3" data-topic="51924"> <div class="title"> <div class="quote-controls"></div> <img loading="lazy" alt="" width="24" height="24" src="https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/peng_hu/48/23329_2.png" class="avatar"> Peng_Hu:</div> <blockquote> <p>I’m just curious that why it called static?</p> </blockquote> </aside> <p>Unlike dynamic commenting systems like Disqus, the comments are baked right into the website, not loaded “on demand”. Depending on your deployment pipeline, you can even keep both <code>comments.php</code> and the commenting script on an entirely different server, so your Hugo server remains <em>static</em>.</p> <p>The scripts itself aren’t static, the comments will be.</p> <aside class="quote no-group" data-username="Peng_Hu" data-post="3" data-topic="51924"> <div class="title"> <div class="quote-controls"></div> <img loading="lazy" alt="" width="24" height="24" src="https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/peng_hu/48/23329_2.png" class="avatar"> Peng_Hu:</div> <blockquote> <p>There will be some misunderstanding after a brief glance</p> </blockquote> </aside> <p>I’m open for ideas.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="1" /> <span class='post-likes'>1 Like</span> </div> </div> <div id='post_5' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://discourse.gohugo.io/u/Peng_Hu'><span itemprop='name'>Peng_Hu</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-11-13T09:58:46Z' class='post-time'> November 13, 2024, 9:58am </time> <meta itemprop='dateModified' content='2024-11-13T09:58:46Z'> <span itemprop='position'>5</span> </span> </div> <div class='post' itemprop='text'> <p>Thanks for you friendly reply.<br> I think I got it right now, sorry for my reckless views.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="1" /> <span class='post-likes'>1 Like</span> </div> </div> </div> <div id="related-topics" class="more-topics__list " role="complementary" aria-labelledby="related-topics-title"> <h3 id="related-topics-title" class="more-topics__list-title"> Related topics </h3> <div class="topic-list-container" itemscope itemtype='http://schema.org/ItemList'> <meta itemprop='itemListOrder' content='http://schema.org/ItemListOrderDescending'> <table class='topic-list'> <thead> <tr> <th>Topic</th> <th></th> <th class="replies">Replies</th> <th class="views">Views</th> <th>Activity</th> </tr> </thead> <tbody> <tr class="topic-list-item" id="topic-list-item-31818"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='1'> <span class="link-top-line"> <a itemprop='url' href='https://discourse.gohugo.io/t/prerendered-static-html-comments-for-hugo/31818' class='title raw-link raw-topic-link'>Prerendered static HTML comments for Hugo</a> </span> <div class="link-bottom-line"> <a href='/c/announcements/40' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #3AB54A'></span> <span class='badge-category clear-badge'> <span class='category-name'>Announcements</span> </span> </a> <div class="discourse-tags"> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>15</span> </td> <td class="views"> <span class='views' title='views'>2014</span> </td> <td> April 11, 2021 </td> </tr> <tr class="topic-list-item" id="topic-list-item-2079"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='2'> <span class="link-top-line"> <a itemprop='url' href='https://discourse.gohugo.io/t/https-staticman-net-brings-user-generated-content-to-static-sites/2079' class='title raw-link raw-topic-link'>Https://staticman.net brings user-generated content to static sites</a> </span> <div class="link-bottom-line"> <a href='/c/support/34' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #652D90'></span> <span class='badge-category clear-badge'> <span class='category-name'>support</span> </span> </a> <div class="discourse-tags"> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>1</span> </td> <td class="views"> <span class='views' title='views'>1259</span> </td> <td> December 18, 2016 </td> </tr> <tr class="topic-list-item" id="topic-list-item-45849"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='3'> <span class="link-top-line"> <a itemprop='url' href='https://discourse.gohugo.io/t/porting-a-comments-system-based-off-of-google-sheets/45849' class='title raw-link raw-topic-link'>Porting a comments system based off of google sheets</a> </span> <div class="link-bottom-line"> <a href='/c/tips-tricks/38' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #ED207B'></span> <span class='badge-category clear-badge'> <span class='category-name'>tips & tricks</span> </span> </a> <div class="discourse-tags"> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>1</span> </td> <td class="views"> <span class='views' title='views'>522</span> </td> <td> September 19, 2023 </td> </tr> <tr class="topic-list-item" id="topic-list-item-27987"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='4'> <span class="link-top-line"> <a itemprop='url' href='https://discourse.gohugo.io/t/a-webmention-implementation-for-hugo/27987' class='title raw-link raw-topic-link'>A Webmention implementation for Hugo</a> </span> <div class="link-bottom-line"> <a href='/c/tips-tricks/38' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #ED207B'></span> <span class='badge-category clear-badge'> <span class='category-name'>tips & tricks</span> </span> </a> <div class="discourse-tags"> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>2</span> </td> <td class="views"> <span class='views' title='views'>1418</span> </td> <td> June 9, 2021 </td> </tr> <tr class="topic-list-item" id="topic-list-item-4411"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='5'> <span class="link-top-line"> <a itemprop='url' href='https://discourse.gohugo.io/t/provide-a-hugo-commenting-service/4411' class='title raw-link raw-topic-link'>Provide a Hugo commenting service</a> </span> <div class="link-bottom-line"> <a href='/c/feature/36' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #0E76BD'></span> <span class='badge-category clear-badge'> <span class='category-name'>feature</span> </span> </a> <div class="discourse-tags"> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>11</span> </td> <td class="views"> <span class='views' title='views'>2584</span> </td> <td> April 9, 2019 </td> </tr> </tbody> </table> </div> </div> </div> <footer class="container wrap"> <nav class='crawler-nav'> <ul> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/' itemprop="url">Home </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/categories' itemprop="url">Categories </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/guidelines' itemprop="url">Guidelines </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/tos' itemprop="url">Terms of Service </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/privacy' itemprop="url">Privacy Policy </a> </span> </li> </ul> </nav> <p class='powered-by-link'>Powered by <a href="https://www.discourse.org">Discourse</a>, best viewed with JavaScript enabled</p> </footer> <div class="buorg"><div>Unfortunately, <a href="https://www.discourse.org/faq/#browser">your browser is unsupported</a>. Please <a href="https://browsehappy.com">switch to a supported browser</a> to view rich content, log in and reply.</div></div> </body> </html>