How to add comments to your static site

This post is from my blog uzpg.me

Usually, blogs store comment data inside their server database. You can't do that with static websites but there are many tools that can help you solve this problem and create discussion around your posts. This article will guide you through some ways you can add these comments for free.

For Developers - Utterances

🔮

Utterances is a great comment plugin built on Github Issues. It creates an new issue on github for your posts and then adds your website's comments to said issues. All your commenters need to do is sign in on Github.
Obviously, you should only do this if your blog is about software development or a related subject otherwise none of your readers will have Github accounts.

I love this solution because it's an opensource and lightweight tool that doesn't harm the user experience. It's a simple option and it has a beautiful design which you can see down below:

How to get it setup:

1. Create a public "myblog-comments" repository on Github
2. Add the app to your repo on the github utterance page
3. Paste the following snippet at the bottom of all of your posts:

   <script src="https://utteranc.es/client.js"
       repo="[username/myblog-comments]"
       issue-term="pathname"
       theme="github-light"
       crossorigin="anonymous"
       async>
   </script>
   

   and replace the repo value with the name of your repository. You can customize this snippet more at the bottom of the utterances website.

Disqus

Disqus is a technically free way to add to comments to your website. It's a useful tool but I don't use it because it injects ads into your website if you use the free plan and it raises privacy concerns for its users.

Steps:

1. Register an account at Disqus
2. Confirm that you want to install Disqus on your site
3. Choose your plan
4. On the choose your platform window, select the "Universal Code" option
5. Embed the following code at the bottom of your posts:

   <div id="disqus_thread"></div>
   <script>
   var disqus_config = function () {
     this.page.url = 'The absolute url of the page';
     this.page.identifier = 'An identifier of your choice that should be unique to every post
     like for example the post title.';
   };
   (function() {
     var d = document, s = d.createElement('script');
     s.src = 'https://websitename.disqus.com/embed.js';
     s.setAttribute('data-timestamp', +new Date());
     (d.head || d.body).appendChild(s);
   })();
   </script>
   <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">
   comments powered by Disqus.</a></noscript>
   

   Remember to replace the page url and identifier parameters with those of your posts. Also replace the s.src "websitename" part with the website name you registered with Disqus. If your site is "example.com", it would be "example.disqus.com/embed.js"

Your comments should now work, but please keep in mind the intangible price of Disqus outlined in this article.

Remarkbox

Remarkbox is a simple third-party comment system similar to Disqus which is very easy to implement.
Here's how you can set it up:

1. Enter your email in the Remarkbox signup form
2. Click the link from the email you should have received from Remarkbox (it might be in spam)
3. Follow the instructions on the setup page and embed your comment snippet.

Your Remarkbox comments should now be working. This system does not contain ads and respects user privacy more than Disqus but the free plan does not allow moderation and it is a rudimentary solution.

Some other cool options that I won't delve into are Gitalk, Commento and JustComments (if you are willing to pay a small fee.)

I hope you enjoyed this tutorial and if you encountered any problems with setting things up or if you want to share how you manage this functionality, please comment down below.

You can see more of my blog posts here