SITE NAME CHANGE: Hi there, this is just a quick note to explain why the site name seems to have changed. I've decided that my personal domain of Gecko8 wasn't nearly descriptive enough. I want to cover not just code, but how to make our lives better as developers. With that goal in mind, I feel Life And Code is a better choice. I hope you agree!

This is just a quick post to show how to add the Commento commenting system to a Gridsome static website project.

For those of you not familiar with Commento, it's an excellent, privacy focused commenting system for static websites. It's even open-source so if you want to host the server yourself, you can. For this post we're using the hosted service which has a very unique pricing system. You basically pay whatever you want as long as it's more than $3 US a month. $3/month is very reasonable in my opinion.

Let's Get Started

Anyway, the first thing to do is to signup for Commento. There's a signup link available on their site at https://commento.io. I won't step you through it as it's a super simple process.

Once you're signed up and logged in, you'll be presented with the option to add a domain. Click the button and let's do that. You'll see a dialog like this one:

1. Enter a description for your site in the Website Name field.
2. Enter the domain url in the Website Domain field.
3. Click Add Domain.

That's it, setup in the dashboard is complete.

Add Commento To You Gridsome Page

Go ahead and open up the page you want to add comments to. In my case, I was adding it to the blog post pages in my Gridsome based blog. If you're interested in building a blog based on Gridsome, I've created an entire series of posts on doing just that at Creating a Static Blog with Vue for Free.

If you look at the official docs, you'll see that you're supposed to add the following to your page:

<div id="commento"></div>
<script src="https://cdn.commento.io/js/commento.js"></script>

As you probably know, Vue and likely most other SPA frameworks don't work that way. Fortunately, it's not that much more difficult.

Add Commento to Your Template

This part is really easy, just add the following wherever in your template you'd like the comments to appear.

<div id="commento"></div>

Add Reference to Script File

Gridsome has a handy metaInfo property in the script section that makes this pretty easy. If you don't already have one, just add the following in your page script.

metaInfo() {
  return {
    script: [
      { src: 'https://cdn.commento.io/js/commento.js', defer: true }
    ]
  };
}

If you already have a metaInfo property, just add the script part to yours. Every page generated from this Vue template, will now have a header entry linking to the Commento script file.

And that's all there is to it. If you run your site, you should now see a comment section. Commento gives you logs of options for styling, etc. but for now I'll leave those to the documentation.