HomeMore Tutorials

DIY Blog Part 3: Comments

published about 1 year ago
in Tutorials

by Greg Murray

last updated about 1 year ago

utterances
javascript
frontend
software development
tutorial
comments
github

Welcome to part three of this series where I will be talking about how I added comments to my blog. Why are comments worth adding? I think the most obvious part is engagement. Let's say you have a blog that has ads or some other form or revenue generation. The longer you have people on the page and interacting with your content, the more likely they are to click an ad or otherwise increase your revenue. That being said, I personally have other reasons. I don't have any monetization on this blog - that isn't really the purpose of it. To me, comments provide a chance to interact and form some sort of community. I've always really appreciated the tech community and I want to contribute to that culture. I think being able to comment on posts helps that. We can teach each other new things, correct any mistakes, and overall just grow as individuals together.

All that being said, I knew I wanted comments on my blog, but at first, I truly had no idea where to start. I narrowed down my options to a custom-built solution, Disqus, and Utterances.

Custom Built

Deep down inside, I wanted to go this route. There’s always a sort of satisfaction that you get from building your own tool like this. I'm sure I could pull together some simple CRUD for creating comments, maybe add threading as a nice feature. But before I settled with this idea, I wanted to see what other options were available to me.

Disqus

Disqus definitely came up in most of my searches and I quickly realized I didn't want to build my own comment system anymore. With sign-on integrations, moderation, and basic comment features out of the box, the idea of building a basic version of that on my own seemed less and less logical. On top of that, Disqus is also hosted, so I wouldn't need to spin up any databases to manage the comment data. The only downside I could see was that due to all of the features, Disqus does have a pricing tier. At the time of writing, the basic (free) tier has the core features and any amount of total daily page views, but is ad-supported. Going up a tier to the Plus tier for $11 per month removes ads and supports up to 3 websites, but interestingly caps daily page views at 50,000. There is also a Pro tier at $105 a month, as well as a Business tier with custom pricing. These all seem like decent options, but I still wanted to see all the options out there.

Utterances

Finally, that is where Utterances came in. Utterances is built using GitHub issues as the backend. Essentially, any given page with comments on it is given its own issue on a GitHub repository of your choice. I actually quite like this option because it is so simple to use while still looking and feeling high quality. The only downside I can see is that one needs a GitHub account to actually participate with the comments, but given the nature of this blog and how popular GitHub is, I am okay with this downside. Needless to say, this is the option I went with (check it out below!).

Set Up

Setting up Utterances is actually quite easy. First, you will need to create a public repository on GitHub which will be used for the comments. Next, add the Utterances GitHub app and configure it to have access to the repository you created. You can give it access to all repositories or a select number — I personally went with the latter. Next, configure your desired settings on the Utterances website and simply copy and paste the provided script into your code. That’s it!

Conclusion

Generally speaking, there are many different ways to enable comments on your website. I have created custom solutions, but these require much more effort to build out all of the features that the solutions I have discussed in this post have by default. Ultimately, it is up to you based on your project’s needs. Feel free to leave a comment below if you have any questions or would like me to provide a more in-depth guide to Utterances.

Loading script...
home
Copyright© Greg Murray 2024