website VS utterances

Hey thanks! :D

It’s almost all custom (you can see the source on my GitHub https://github.com/brundonsmith/website)

Most of the site is statically generated at startup using regular JS template strings, and then served as static files (cached in-memory) by Express. Posts are written in Markdown, and code blocks are processed into HTML using Prism.

The only dynamic bit is the HN comments, since I want those to stay fresh. My Node server queries the Algolia HN API to get all comments for the top HN link for the post (since there could be more than one), munges the data a bit, renders it as HTML, and then caches it for one minute. Some client-side JS just hits the endpoint and dumps the HTML into the page.

Any rich rendering inside comment bodies, like for code blocks and italics, actually comes directly from HN itself! The content I get has already been processed, though of course the structural content around the comment bodies is custom.

This site is my relaxing project that I tinker with occasionally, so sometimes I over-engineer parts of it a little bit for fun :)

I wrote some code that 1) finds the most active link to the post on HN, and 2) uses the HN API to pull in and render its comments at the bottom. The site is statically-rendered, but there's a bit of client-side JS that loads the latest comments when you visit the page. Most of the work is done on the back-end; the front-end just grabs the content and drops it in.

Example: https://www.brandons.me/blog/three-types-of-data

Implementation: https://github.com/brundonsmith/website/blob/master/src/load...

Handling New Comments: There are excellent lightweight comment utilities available for managing comments on your eleventy blog. I personally use Utterances, but Giscus is also a great alternative.

We can use utteranc.es, a lightweight comment widget built on GitHub Issues to integrate authed comments in our blog.

utterances (open-source)

Typically, a comment requires server side code and a lot of messy management. It’s a pain. These comments rely on a tool called utterances. Utterances uses GitHub’s issue tracker which was designed to track bugs, as part of that it includes extensive comment and discussion capabilities. If an issue doesn’t exist, utterances will automatically create that issue for you. It created this issue for the comments in this page...

I've installed utterances on my GitHub repo. I've configured it and given it the appropriate permissions. At the end of setup, it provided me with an HTML script and the following instructions:

Fortunatly we have free, lightweight and efficient options to add comments in blog website or any website. I am talking about utteranc.es. A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more!

Go to https://utteranc.es and follow the instructions to set up the commenting system.

Giscus drew significant inspiration from utterances, which utilize an issue-based comment system instead of discussions. I experimented with utterances initially, but I found it less convenient due to its reliance on an issue tracker for conversational purposes.

If you're building a blog for developers, you can use a third-party commenting service that requires login with github, for example https://utteranc.es/