../

Fully static comments

└─ 2017-11-19 • Reading time: ~2 minutes

I’d like to give a quick update about the comments on this blog. I already mentioned in a previous post that I wanted to experiment with fully static comments for my blog. By fully static I mean that comments are directly integrated in the HTML of each page, at generation time. It requires to generate pages with new comments regularly but I think it’s a good trade-off.

I’d like to give an overview of how it works, and how it looks in practice.

How does it Work?

  1. Comments will be posted and hosted on Github Issues.
  2. Each post’s original Markdown document has an optional issue attribute in its metadata; when it is specified, the static blog generator will fetch the comments of the specified issue every time we build the site.
  3. Issues are directly integrated in the HTML of the page (at the bottom) and are collapsed by default.

Pros

I see several advantages with this system:

  1. It’s fast because it’s part of the page’s HTML.
  2. The look and feel of the page is consistent.
  3. It does not require any third-party Javascript to work (so no tracking…).
  4. It leverages Github, which is already used to host the blog anyway, so why not use the issues as well.

Cons

Obviously it’s not perfect because:

  1. People need a Github account to post comments: but I expect a lot of people do, and if they don’t, there are a lot of ways to discuss blog posts on the Internet: Reddit, HackerNews, Twitter; and they all have their sharing button at the bottom of the page!
  2. It takes a bit of time to refresh the comments (currently Travis will deploy the posts at least once a day + every time I do a commit), but they can always be seen in real time on the issue itself.
  3. It might not scale very well with a lot of comments, but I will be happy to figure out a solution for this problem when it happens with this blog!

How it Looks

This post is already equipped with the static comments. I created a few of them to demonstrate the look and feel. You can expend the comments by clicking the first link on the left N comments, or post a new one by clicking on Leave a comment on Github (you will be redirected on the correct issue).

Feel free to add more! I’d love to get some feedback on this.

Leave a comment on GitHub
11 comments
  • GitHub avatar from user remusao remusao commented 7 years ago

    Comments are hosted on github. Each post has its own issue.

  • GitHub avatar from user remusao remusao commented 7 years ago

    It’s possible to use specific syntax from Github Markdown as well:

    • item1
    • item2
    • item3
  • GitHub avatar from user remusao remusao commented 7 years ago

    A bit of code? Sure…

    function main() {
  console.log("Hello World!");
}
  • GitHub avatar from user chrmod chrmod commented 7 years ago

    That’s a really neat idea. Aside of running comments on github infrastructure, it makes them visible on github profile pages https://github.com/remusao?tab=overview&from=2017-11-19 - which makes them discoverable through that channel!

    wonder how this play out with github TOS. probably people considered to use github as on scale publishing platform, but does github put a limit on such usage?

  • GitHub avatar from user chrmod chrmod commented 7 years ago

    update to previous comment: it seems commenting on github issues is not counted as contributing to repository so is not published at github profile pages. at least I cannot see my comment there: https://github.com/chrmod?tab=overview&from=2017-11-19

  • GitHub avatar from user remusao remusao commented 7 years ago

    @chrmod Thanks! It’s also nice to mention other people, and get notifications when answers are posted!

  • GitHub avatar from user sbdzdz sbdzdz commented 7 years ago

    Pretty cool! I might use something similar on my Jekyll blog once I post anything to comment on.

    You can consider styling the timestamp a bit and making the usernames clickable, like here.

    I also thought about using :+1: and :-1: as a voting system :)

  • GitHub avatar from user remusao remusao commented 7 years ago

    Thanks @sebastiandziadzio!

    All valid suggestions. It’s still super basic but I will try to add more niceties soon:

    • Reactions
    • User’s picture
    • Clickable name
    • etc.

    I just felt that I had done too much HTML/CSS for a week-end! :D

  • GitHub avatar from user kaknut kaknut commented 7 years ago

    testing

  • GitHub avatar from user amcgregor amcgregor commented 4 years ago

    This is not a terrible idea at all; also interesting that your use of a <details> element is what triggered a user learning web development to ask how that was being done without JavaScript in an IRC channel I frequent.

    Theoretically this could be implemented client-side without much (or any) third-party involvement beyond JS delivered from your domain with the page, and the XHR/Fetch issued to GitHub, given the repository is public. 😀 Potentially as a way to divorce externally generated content (other’s voices) from the authoritative content (in your voice) that the page itself represents for indexers that don’t perform complex JS. (At a cost of losing those contributions potential future contributions to your PageRank.)

    Edited to add: It would also free up the comments from dependence on back-end static site deployments; they’d be “live”, and potentially only requested on demand. ⚠️ Super-relevant recent update: A recent executive order impacting USA-based sites, may make you liable for third-party contributed content, now…

  • GitHub avatar from user remusao remusao commented 4 years ago

    Thank you for your feedback @amcgregor. I like your point about the comments being part of the HTML statically and how that relates to indexers. When I thought about this comment system, I had set myself as a goal to both remove the need for any JavaScript, and also keep very fast loading speed of pages. The trade-off I picked was a bit extreme… but I like it as a proof of concept! :smile: