Comments for My Blog
Table of Contents
Blogs are great and all, but they need to have a level of interactivity, otherwise it can feel a bit dull. That’s where comments come in. And it’s become incredibly easy now, thanks to this amazing platform I found, powered by GitHub Discussions.
Enter: Giscus - A comments system powered by GitHub Discussions 💬 💎
Setup
Setting up Giscus is relatively simple, especially if you’re using a theme it already supports. Head here to do so.
However, my blog’s theme, partially inspired by Tokyo Night, isn’t a theme that Giscus has. As a result, I had to build a stylesheet for it to use, publish it to my CDN, and set Giscus to use this.
Here’s the stylesheet I wrote, hosted at https://cdn.848226.xyz/v1/blog/comments/tokyonight.css:
1/*! MIT License
2 * Tokyo Night Dark Theme for Giscus
3 */
4
5main {
6 /* Syntax highlighting */
7 --color-prettylights-syntax-comment: #545c7e;
8 --color-prettylights-syntax-constant: #7aa2f7;
9 --color-prettylights-syntax-entity: #bb9af7;
10 --color-prettylights-syntax-storage-modifier-import: #a9b1d6;
11 --color-prettylights-syntax-entity-tag: #9ece6a;
12 --color-prettylights-syntax-keyword: #f7768e;
13 --color-prettylights-syntax-string: #9ece6a;
14 --color-prettylights-syntax-variable: #e0af68;
15 --color-prettylights-syntax-brackethighlighter-unmatched: #f7768e;
16 --color-prettylights-syntax-invalid-illegal-text: #1a1b26;
17 --color-prettylights-syntax-invalid-illegal-bg: #f7768e;
18 --color-prettylights-syntax-carriage-return-text: #1a1b26;
19 --color-prettylights-syntax-carriage-return-bg: #db4b4b;
20 --color-prettylights-syntax-string-regexp: #9ece6a;
21 --color-prettylights-syntax-markup-list: #e0af68;
22 --color-prettylights-syntax-markup-heading: #7aa2f7;
23 --color-prettylights-syntax-markup-italic: #a9b1d6;
24 --color-prettylights-syntax-markup-bold: #a9b1d6;
25 --color-prettylights-syntax-markup-deleted-text: #f7768e;
26 --color-prettylights-syntax-markup-deleted-bg: #521f30;
27 --color-prettylights-syntax-markup-inserted-text: #9ece6a;
28 --color-prettylights-syntax-markup-inserted-bg: #1f2d2f;
29 --color-prettylights-syntax-markup-changed-text: #e0af68;
30 --color-prettylights-syntax-markup-changed-bg: #322e1f;
31 --color-prettylights-syntax-markup-ignored-text: #787c99;
32 --color-prettylights-syntax-markup-ignored-bg: #16161e;
33 --color-prettylights-syntax-meta-diff-range: #bb9af7;
34 --color-prettylights-syntax-brackethighlighter-angle: #787c99;
35 --color-prettylights-syntax-sublimelinter-gutter-mark: #545c7e;
36 --color-prettylights-syntax-constant-other-reference-link: #7aa2f7;
37
38 /* Buttons */
39 --color-btn-text: #a9b1d6;
40 --color-btn-bg: #16161e;
41 --color-btn-border: #101014;
42 --color-btn-shadow: 0 0 transparent;
43 --color-btn-inset-shadow: 0 0 transparent;
44 --color-btn-hover-bg: #14141b;
45 --color-btn-hover-border: #545c7e;
46 --color-btn-active-bg: #1a1b26;
47 --color-btn-active-border: #787c99;
48 --color-btn-selected-bg: #16161e;
49 --color-btn-primary-text: #1a1b26;
50 --color-btn-primary-bg: #7aa2f7;
51 --color-btn-primary-border: #101014;
52 --color-btn-primary-shadow: 0 0 transparent;
53 --color-btn-primary-inset-shadow: 0 0 transparent;
54 --color-btn-primary-hover-bg: #89b4fa;
55 --color-btn-primary-hover-border: #101014;
56 --color-btn-primary-selected-bg: #7aa2f7;
57 --color-btn-primary-selected-shadow: 0 0 transparent;
58 --color-btn-primary-disabled-text: #545c7e;
59 --color-btn-primary-disabled-bg: #16161e;
60 --color-btn-primary-disabled-border: #101014;
61
62 /* Lists / controls */
63 --color-action-list-item-default-hover-bg: #16161e;
64 --color-segmented-control-bg: #16161e;
65 --color-segmented-control-button-bg: #1a1b26;
66 --color-segmented-control-button-selected-border: #545c7e;
67
68 /* Text */
69 --color-fg-default: #a9b1d6;
70 --color-fg-muted: #787c99;
71 --color-fg-subtle: #545c7e;
72
73 /* Surfaces */
74 --color-canvas-default: #1a1b26;
75 --color-canvas-overlay: #16161e;
76 --color-canvas-inset: #101014;
77 --color-canvas-subtle: #16161e;
78
79 /* Borders */
80 --color-border-default: #101014;
81 --color-border-muted: #16161e;
82 --color-neutral-muted: rgba(120, 124, 153, 0.4);
83
84 /* Accents */
85 --color-accent-fg: #7aa2f7;
86 --color-accent-emphasis: #7aa2f7;
87 --color-accent-muted: rgba(122, 162, 247, 0.4);
88 --color-accent-subtle: rgba(122, 162, 247, 0.1);
89
90 /* State colors */
91 --color-success-fg: #9ece6a;
92 --color-attention-fg: #e0af68;
93 --color-attention-muted: rgba(224, 175, 104, 0.4);
94 --color-attention-subtle: rgba(224, 175, 104, 0.15);
95 --color-danger-fg: #f7768e;
96 --color-danger-muted: rgba(247, 118, 142, 0.4);
97 --color-danger-subtle: rgba(247, 118, 142, 0.1);
98
99 /* Shadows */
100 --color-primer-shadow-inset: 0 0 transparent;
101
102 /*! Extensions from @primer/css/alerts/flash.scss */
103 --color-social-reaction-bg-hover: #16161e;
104 --color-social-reaction-bg-reacted-hover: #14141b;
105}
106
107main .pagination-loader-container {
108 background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg");
109}
110
111main .gsc-loading-image {
112 background-image: url("https://github.githubassets.com/images/mona-loading-dark.gif");
113}
Self-hosting
Personally, I’m not planning on self-hosting this, as my blog is running on GitHub pages deliberately, so as to not be affected by downtime from my homelab (which has been a lot recently - due to my move to traefik from Nginx Proxy Manager - more on that later), however if you wish to do so, instructions here.
Adding Giscus to my Blog
Whichever path you took, using the cloud or the self-hosted variant, you should now have a snippet to add to your blog, that looks something like this:
1<script src="https://giscus.app/client.js"
2 data-repo="USER/REPO"
3 data-repo-id="SOMETHING"
4 data-category="Comments"
5 data-category-id="SOMETHING_ELSE"
6 data-mapping="title"
7 data-strict="1"
8 data-reactions-enabled="1"
9 data-emit-metadata="0"
10 data-input-position="top"
11 data-theme="https://cdn.848226.xyz/v1/blog/comments/tokyonight.css"
12 data-lang="en"
13 data-loading="lazy"
14 crossorigin="anonymous"
15 async>
16</script>
I’m using the theme paperMod, and in order to add comments to paperMod, you need to create the following file themes/PaperMod/layouts/partials/comments.html and populate it with:
1{{- /* Comments area start */ -}}
2<script src="https://giscus.app/client.js"
3 data-repo="USER/REPO"
4 data-repo-id="SOMETHING"
5 data-category="Comments"
6 data-category-id="SOMETHING_ELSE"
7 data-mapping="title"
8 data-strict="1"
9 data-reactions-enabled="1"
10 data-emit-metadata="0"
11 data-input-position="top"
12 data-theme="https://cdn.848226.xyz/v1/blog/comments/tokyonight.css"
13 data-lang="en"
14 data-loading="lazy"
15 crossorigin="anonymous"
16 async>
17</script>
18{{- /* to add comments read => https://gohugo.io/content-management/comments/ */ -}}
19{{- /* Comments area end */ -}}
Once you’ve done so, you should end up with a comments section at the bottom of your page. Feel free to try out mine below.