Integrating Comments on Hugo with Isso
Oh! Boy. Finally been able to get something set up almost to my liking. After moving away from Drupal to Hugo, getting the commenting system in place was challenging. There were many solutions but I was adamant to what I wanted.
- Simple. Something very simple so that I can spend very limited time to tickle with (especially 2 years down the line)
- Independent. No Google/Facebook/3rd Party dependency
- Simple workflow. No Github/Gitlab/Staticman dependency
- Simple moderation workflow
Simplicity
First, the migration away from Drupal itself was a PITA. I let go of all the comments there. Knowing my limited web skills, it was the foremost requisite to have something simplest as possible.
Independent
Tracking is becoming very very common. While I still have Google Analytics enabled on my website, that is more of a personal choice as I would like to see some monthly reporting. And whenever I want, I can just quietly disable it, if in case it becomes perversely invasive. As for the commenting system, I can be assured now that it wouldn’t depend on a 3rd party service.
Simple workflow
Lots and lots of people moved to static sites and chose a self-hosted model on Github (and other similar services). Then, service like Staticman, complemented it with integration of a commenting system, with Github’s Issue Tracker workflow.
From my past experiences, my quest now has been to keep my setups as simple as possible. For example, for passwords, I wouldn’t want to ever again rely on Seahorse or Kwallet etc. Similarly, after getting out of the clutch of Drupal, I wanted to resort back to keeping the website content structure simple. And Hugo does a good job there. And so was the quest for the commenting system.
Simple moderation workflow
SPAM is inevitable. I wanted to have something simple, basic and well tested. What better than the good old email. Every comment added is put into a moderation queue and the admin is sent with an email for the same, including a unique approve/reject link in the email.
Isso Commenting System
To describe it:
Description-en: lightweight web-based commenting system
A lightweight commenting system written in Python. It supports CRUD comments
written in Markdown, Disqus import, I18N, website integration via JavaScript.
Comments are stored in SQLite.
I had heard the name a couple months ago but hadn’t spent much time. This week, with some spare time on, I stumbled across some good articles about setup and integration for Isso.
- https://angristan.xyz/add-comments-to-your-blog-with-isso/
- https://stiobhart.net/2017-02-24-isso-comments/
- https://therandombits.com/2018/12/how-to-add-isso-comments-to-your-site/
The good part is that Isso is already packaged for Debian so I didn’t have to go through the source based setup. I did spend some time fiddling around with the .service vs .socket discrepancies but my desperate focus was to get the bits together and have the commenting system in place.
Once I get some free time again, I’d like to extract useful information and file a bug report on Debian BTS. But for now, Thank You to the package maintainer for packaging/maintaining Isso for Debian.
Integration for my setup (nginx + Hugo + BeautifulHugo + Isso)
For nginx, just the following addition lines to ingerate Isso
location /isso {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://localhost:8000;
}
For Hugo and BeautifulHugo
commit 922a88c41d784dc59aa17a9cbdba4a1898984a3e (HEAD -> isso)
Author: Ritesh Raj Sarraf <rrs@debian.org>
Date: Tue Oct 29 12:52:13 2019 +0530
Add display content for isso
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 0ab1bf5..afda94e 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -55,6 +55,11 @@
</ul>
{{ end }}
+ {{"<!-- begin comments //-->" | safeHTML}}
+ <section id="isso-thread">
+
+ </section>
+ {{"<!-- end comments //-->" | safeHTML}}
{{ if (.Params.comments) | or (and (or (not (isset .Params "comments")) (eq .Params.comments nil)) (and .Site.Params.comments (ne .Type "page"))) }}
{{ if .Site.DisqusShortname }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 2182534..161d3f0 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -81,6 +81,11 @@
</div>
</div>
</div>
+
+ {{ "<!-- isso -->" | safeHTML }}
+ <script data-isso="{{ .Site.BaseURL }}isso/" src="{{ .Site.BaseURL }}isso/js/embed.min.js"></script>
+ {{ "<!-- end isso -->" | safeHTML }}
+
</header>
{{ else }}
<div class="intro-header"></div>
And the JavaScript:
commit 3e1d52cefe8be425777d60387c8111c908ddc5c1
Author: Ritesh Raj Sarraf <rrs@debian.org>
Date: Tue Oct 29 12:44:38 2019 +0530
Add javascript for isso comments
diff --git a/static/isso/js/embed.min.js b/static/isso/js/embed.min.js
new file mode 100644
index 0000000..1d9a0e3
--- /dev/null
+++ b/static/isso/js/embed.min.js
@@ -0,0 +1,1430 @@
+/**
+ * @license almond 0.3.1 Copyright (c) 2011-2014, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/jrburke/almond for details
+ */
+
+/*
+ Copyright (C) 2013 Gregory Schier <gschier1990@gmail.com>
+ Copyright (C) 2013 Martin Zimmermann <info@posativ.org>
+
+ Inspired by http://codepen.io/gschier/pen/GLvAy
+*/
....snipped......
That’s pretty much it. Happy Me :-)