diff --git a/content/posts/integrating-comments-in-hugo-sites-with-commento.md b/content/posts/integrating-comments-in-hugo-sites-with-commento.md new file mode 100644 index 0000000..5c10399 --- /dev/null +++ b/content/posts/integrating-comments-in-hugo-sites-with-commento.md @@ -0,0 +1,44 @@ ++++ +categories = ["hugo", "webdev"] +date = 2020-01-20T00:44:25+05:30 +slug = "integrating-comments-in-hugo-sites-with-commento" +tags = ["hugo", "static sites", "comments", "commento.io"] +title = "Integrating comments in Hugo sites with commento" +description = "Adding additional comment backends to Hugo is actually rather simple!" ++++ + +Disqus is unequivocally the leader when it comes to hosted comments, and it works rather swimmingly with sites of all kinds with minimal hassle. But this ease has a gnarly flipside: [annoying referral links](https://stiobhart.net/2017-02-21-disqusting/) and a [huge bundle size](https://victorzhou.com/blog/replacing-disqus/) that significantly affects page load speeds. + +As I was considering adding comments to this blog, I went through these posts and realised that Disqus is not going to be satisfactory enough, especially after the time and effort I put into improving bundle sizes and page loading. I started looking into the alternatives, and shortlisted [Isso](https://posativ.org/isso) and [Commento](https://commento.io/). Going through Isso documentation and [this post](https://stiobhart.net/2017-02-24-isso-comments/) it was clear that setup was going to be a bit of a chore, and that was the end of it. + +Commento is open source just like Isso, but has a cloud-hosted option. I was interested in self-hosting, though, and I was glad to find that Commento delivered very well on that front too. [docker-compose](https://docs.commento.io/installation/self-hosting/on-your-server/docker.html#with-docker-compose) is an officially supported deployment method and I was pleased to see that setup went forward without a problem. + +## Integrating with Hugo + +The interesting part! Hugo offers a Disqus template internally, but any other comment system's going to need some legwork done. Commento's integration code is just two lines, as you can see below. + +![Commento.io integration code](/uploads/commento_integration.png) + +Hugo offers a powerful tool called [partials](https://gohugo.io/templates/partials/#use-partials-in-your-templates) that allows injecting code into pages from another HTML file. I quickly created a partial with the integration code, scoped out the domain with a variable, and ended up with this. + +![Commento partial](/uploads/commento_partial.png) + +With this saved as `layouts/partials/commento.html` and `CommentoURL` set in my `config.toml`, I set out to wire this into the posts. Because of a [pre-existing hack](https://github.com/msfjarvis/msfjarvis.dev/commit/5447bb36258934d6a5bc86be99ef91a9eeb9eb17) that I use for linkifying headings, I already had the `single.html` file from my theme copied into `layouts/_default/single.html`. If you don't, copy it over and open it. Add the following lines, removing any mention of Disqus if you find it. + +```go +{{ if and .Site.Params.CommentoURL (and (not .Site.BuildDrafts) (not .Site.IsServer)) -}} +