Bye-bye, Disqus! I built my commenting system using AWS serverless stack and Netlify build hooks!
I’ve been using Disqus on this website since its inception. It worked and it didn’t cost me a single penny, but it cost me and most importantly my visitors compromised privacy. Since Zeta Global acquired the Disqus in 2017, things became even worse. To top it off, it is also a performance killer.
I started looking into alternatives, and surprisingly there’s not a lot of things worth recommending. Commento and Hyvor Talk look great, but it costs more than Apple Music or Netflix subscription. I’m sure they are worth it but I couldn’t justify paying this price to let someone leave a sentence or two under my posts.
I’m not that bad with HTML. I quite enjoy writing CSS, JavaScript pays my bills and I can find my way through a few AWS services. Yes, you guessed it — I built my own one.
Privacy first
I don’t want to show you ads, I don’t care about your location and I don’t care about your email address. The only thing I care about is a meaningful conversation under my articles. Kindly introduce yourself by filling the “Name” field (it doesn’t have to be real) and participate in a conversation with others. If you fancy some nasty comments, please save you and me some time and go to Reddit instead.
Performance
Disqus makes exactly 76 HTTP requests on load, and 11 of these resources are third-party trackers. It loads almost 2MB of data! To top it off, you have to wait around 10 seconds on average speed connection to get it all to display a commenting system with no comments whatsoever! Zero! Null! Nada!
For comparison, my website is ready after 300ms under the same network conditions using my current solution. The full functionality requires to download only 1kb of JavaScript. It’s worth mentioning that this data is coming from an article that contains over 100 comments. The Lighthouse score isn’t that bad neither.
Freedom
Because I built it, I can do whatever the heck I want with it. I have full control over the functionality and the visual aspect of it. I can even do shit like this!
My new commenting system tech stack
There are a few HTML lines on the front end, around 100 lines of custom-written CSS and about 1kb of vanilla JavaScript. On the backend side of things, I use AWS Lambda to put something on and read from DynamoDB. I also build a little moderation tool that allows me to discard or approve new comment by clicking a link in an email. To send notification emails, I use Amazon Simple Email Service.
Feedback please
I’m planning to open-source it and provide a detailed tutorial on how you can implement a commenting system like this on your own website. Before I am going to do so, I want this thing to be properly tested. I highly encourage you to try it out and leave me a comment below. As always, I am open to your feedback. For now, stay curious, build cool things and share with others 👋
This looks great! Would be very interested to read an in depth tutorial- and open sourcing the code would be awesome.
Thanks for feedback Christian. Really appreciate it!
Yeah, first think I want this thing to be battle tested. Then I will wrap the whole think in concise, configurable repo and publish a detailed tutorial about the process of setting it up. Stay tuned Christian 👊
I would definetely read & use it :) Thought about doing the same using Svelte, FastAPI & MongoDB in a hosted VM in China (cause disqus does not work here).
Stay tuned. I will definitely write a follow-up very soon 👍
This looks cool. Some time ago (years now), I tried to build SAAS solution that would be competition to Disqus, but as almost all of my projects I never released it. I would advise to take a look into something that will pick up spam auto-magically. Also, just my curiosity, why Netlify build hook, not Github Actions, or something else?
Shame. Maybe I would end up using your product instead of crafting my own one.
Thanks for the great suggestions about some spam filtering. I did a fair bit of research on this one, and I have some ideas.
Yeah. GitHub action is another way of doing the same thing. I care about the fresh content hosted to the end-user — any method that gets me to that point is a great solution. Netlify build hook was dead easy to set up.
Thanks for the fantastic feedback Maciej!
I'd definitely be interested in deep diving into how this works. Nice work!
Looks awesome! How are comments ordered?
Thanks Jeff. Comments are ordered chronologically on each level. By levels, I mean the difference between top level comments (like your comment for example) and child level comments (like this one). Hopefully it makes sense.
this is pretty cool :D
That's noice! I like the simplicity and the innovation. Do you think about a login layer using cognito or something like that?
Hi. I am glad that you like it. I deliberately made a decision not to require any login/registration to participate in the conversation. I simply don't want to deal with users and I wanted to reduce a potential privacy/security pitfalls. Simplicity is the key.
YES! That's exactly what I'm looking since quite a while! Somehow there seems to be no privacy-friendly login-free commenting system out there. Commento is nice, but needs to be paid too much (imho) for low traffic sites. I'd love my readers to be able to simply drop me a line and deciding to post it under their anonymous nick name, no login.
Please publish your tutorial!
I am working on it, stay tuned 😎
I think it's very cool that you considered the scenario where someone wants to write a comment of a comment of a comment of a comment of a comment. Nicely done!
Can I make another level comment? If there a limit how deep it goes?
Well done ♥️
This is fantastic Pawel. Well done 😊
Awesome, like I said to you last time "in those days it is hard to find someone who doing good thinks just because they are good", stay with that. Sooner or later I will learn enough to be programmer. Is special letters works ? Ą ę ć ß æ ī . Pozdro
Of course it works. As long as the current font supports these (I use system fonts on my blog) characters it should just work with no issues. Thanks a ton fir the kind word!
Awesome job, Pawel! I really feel like there is a big business opportunity for blog commenting, especially with growing popularity in static sites which lack native Wordpress comments. I was about to jump the gun on Hyvor talk which looks the most promising, but a solution like yours has its advantages, so I'll consider things for a bit longer.
Hopefully I will make your life a little bit easier when I show you how simple it is to add a commenting system to your JAM stack website. Stay tuned as the tutorial is coming soon.
Wow, this is perfect for JAMStack
Yes it is! Stay tuned as the details tutorial is coming soon :)
Also very interested, it would allow me to discover these AWS services. The only "black dot" I see is a kind of "identity theft", anyone can take someone's nickname and behind it we would not be able to know if we are talking to the same "human". And good, markdown support :D
How do you handle users spamming when posting a comment?
Hi Arun. Unfortunately I don't have a solid solution for it. I do a little bit of spam filtering on the backend side before I put anything on the database. Luckily since I enabled that I got no more than 5 nasty comments from some bots and they all have been caught on backend.
Good job. I love simple things. 字體很清楚，好舒服
I'm trying to build this with Strapi and FastAPI - I can retrieve and post comments no problem, but I want the page to update with the new comment once I send that POST request. Since I render the comments using a Jinja loop I'm wondering how to prompt the page to re-render without having to refresh the page.
This is a great build though, thanks!
Yes, I have a similar question. Especially GitHub will rebuild the whole page every time when changes are added, which can take a while.
I see your point. If I was you I would use an "optimistic rendering" technique, which is literally rendering a command as it was coming back from the POST request response. Not perfect, but as least gives user a meaningful feedback.
My use-case is slightly different. I always want to moderate comments. So for me the flow is: posting comment, approve/decline, and only my decision about particular comment triggers a re-build. In my case it takes literally seconds. I host stuff on Netlify and my static site generator is Hugo. Both of these are super fast.
Love this! I am actually planning to use it on my site. Have you thought about comment pagination?
I built this commenting system alone and for myself, and most of my posts don't require pagination, so I never thought about it. However, if you have a more significant website and much more commenters, I am sure you can benefit from pagination. Good idea!
Nice Article very glad to read your Article
Thanks & Regards V.saibabu
Great that you wrote your own, but you're still at the mercy of other external tools. I'm "old school" and write everything from scratch that I can. My entire site (minus my OWN hosted video) is less than 50M! www.stloiyf.com
It's open source yet? Or I need to waite?
Yes it is. Although it has not been updated in a while, the core concept is there.
https://github.com/pawelgrzybek/jamstack-cdk-comments