awesome contribution, LGTM except the scroll arrows of fancybox gallery.

may need following code?

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>

yeah, the data-fancybox attribute needs gallery as value.
jsDelivr also support version range @3 which serves latest version of version 3.
This can help reducing library maintenance, instead of constantly updating the <script src> whenever there is a minor library update.

btw, don't mind the Utterances comment not showing. I'm trying (and failing) to move the library to CDN. This PR still use the original Utterances link.

I see, great thanks 👍
Now gallery fixed, it works well. So this PR may merge now? or until you finish the migration of Utterances.

please merge if there is no issue. The migration and testing of Utterances will take a while and probably doesn't work. I'll create another PR if it works.

Just in case someone suggest upgrading to fontawesome 5, I don't include it in this PR because it can be confusing to new users (of this theme).
v5 separates the icon styles into 4 (solid and brands are free to use). In v5,
footer.ejs

<li><a href="<%= theme.links[key] %>"><span class="fa fa-<%= key %>"></span></a></li>

only display solid icons, whereas that same line in v4 (currently used in this theme) can display all icons.

To display brand icons, you need fab- prefix,

<li><a href="<%= theme.links[key] %>"><span class="fa fab-<%= key %>"></span></a></li>

But having the above line means fab- also applies on solid icons, which is incorrect in v5.

A possible workaround is to separate the theme.links to solid and brand icons,

<li><a href="<%= theme.links.solid[key] %>"><span class="fa fa-<%= key %>"></span></a></li>
<li><a href="<%= theme.links.brands[key] %>"><span class="fa fab-<%= key %>"></span></a></li>

Otherwise, use only one style. So, keep this in mind if you want to use v5.

@weyusi thanks reminder. Use one style may be better, I think.