Isso - An Alternative Commenting System For Hugo

Time 3 minute read
Comments for Hugo - no Disqus required
Comments for Hugo - no Disqus required
Comments for Hugo - no Disqus required

This post is part of the Blogging with Hugo series.

By default, Hugo comes with an option to enable Disqus comments. But if you like to go for a self-hosted alternative that respects privacy of your visitors, you might want to take a look at Isso.

This blog is hosted on ateroids šŸš€. They have an extensive library of tools to install (well, you have to do it yourself, but the user contributed guides will help you along), and Isso is one of them.

I won’t replicate the install instructions here, but it basically boils down to the following steps (which you might want to adapt to your specific setup!):

  1. Install Isso via the Python package manager pip
  2. Add a server configuration - for a full list, please see the official server documentation
  3. Setup running Isso as a service or deamon
  4. Setup a reverse proxy to access Isso, i.e. at a subdomain like https://comments.my-hugo-blog.tld

Once you’ve got Isso up and running, you’ll need a partial to display your new commenting system.

Create one for your blog at layouts/partials/comments.html. For this theme, I gave users the option to choose from either Disqus or Isso, based on their configuration.

{{ if and .Site.DisqusShortname (index .Params "comments" | default "true") (not .Site.IsServer) }}
<section class="comments">
	{{ template "_internal/disqus.html" . }}
</section>
{{/* Add support for ISSO comment system */}}
{{ else if .Site.Params.isso.enabled }}
  <script
      data-isso="{{ .Site.Params.isso.data }}"
      data-isso-id="{{ .Site.Params.isso.id}}"
      data-isso-css="{{ .Site.Params.isso.css }}"
      data-isso-lang="{{ .Site.Params.isso.lang }}"
      data-isso-reply-to-self="{{ .Site.Params.isso.replyToSelf }}"
      data-isso-require-author="{{ .Site.Params.isso.requireAuthor }}"
      data-isso-require-email="{{ .Site.Params.isso.requireEmail }}"
      data-isso-avatar="{{ .Site.Params.isso.avatar }}"
      data-isso-avatar-bg="{{ .Site.Params.isso.avatarBg }}"
      src="{{ .Site.Params.isso.jsLocation }}">
  </script>
  <noscript>Please enable JavaScript to view the comments powered by <a href="https://posativ.org/isso/">Isso</a>.</noscript>
  <div>
    <section id="isso-thread"></section>
  </div>
{{ end }}

This will check if the config paramter DisqusShortname is set. If it is, it will render the internal, standard partial for Disqus comments.

If DisqusShortname is not set, and instead Params.isso.enabled is true, it will render the Isso client. Your blog’s config might look something like this:

[Params.isso]
  enabled = true
  data = "https://comments.my-hugo-blog.tld/"
  id = "thread-id"
  css = true
  lang = "en"
  replyToSelf = true
  requireAuthor = true
  requireEmail = false
  avatar = true
  avatar-bg = "#f0f0f0"
  jsLocation = "https://comments.my-hugo-blog.tld/js/embed.min.js"

This is basically the client configuration. There are more options, but please note that every additional parameter that is added to Hugo’s configuration has also to be added as a data- tag to the partial.

As a last step, add this partial at the end of your post template. Check out the example for this theme.

That’s it. You’re done. Now you’ve got a comment system under your control.


Image: BiologeXY on pokemon.fandom.com

Sources:


This series

  1. Chringel Hugo Theme
  2. Inline SVG Icons For Hugo
  3. Isso - An Alternative Commenting System For Hugo
  4. umami - A Google Analytics Alternative For Hugo
  5. Automatically Deploy a Hugo Website to a Remote Host Using Github Actions
  6. Hugo Simple Post Archive
  7. Random Cover Image

Calendar Posted:
Person Posted By:
Folder Open Categories: Coding Tutorials

Responses

ā€¢

Iā€™m going to keep this post as short as my other one on custom comments in Hugo using Isso. Most of the information is borrowed from Uberspace. By default, Hugo comes with an option to enable Google Analytics. But, as you might already know, I like...