This page is continuously updated

Below is a document of the technologies this website uses. It’s mostly for myself but also for anyone curious on making their own websites.

Preliminaries

I’m using Jekyll with Minima theme. I’m building the website locally then pushing it to my repo, which is then read by Cloudflare pages. Cloudflare is also where I’ve registered my domain, tobylam.xyz.

Selected custom gems

I’m using jekyll-remote-theme for easier theme switching, jekyll-responsive-image to handle responsive images and jekyll-redirect-from to do redirects / give posts and pages multiple URLs.

I have also installed a custom gem to enable post navigation within categories. You can see it used in the bottom of every post.

I’ve also made a custom Liquid tag to create a collapsible element. You could see it in action by clicking [abstract …] in the talks page. The code came from here and the liquid tag formulation came from here.

I’m also using a plugin to remove .html from canonical URL for Google search console to work better.

Tags page

I followed this to get categories / the tags page working

Style

While I haven’t learnt much CSS, I did have fun messing with custom-styles.scss and custom-variables.scss from the minima theme. I changed margins and font sizes for readability. I’m a big fan of optimal line lengths which is seemingly followed by most news organisations with exceptions of course. I’m aware that writing mathematics tend to make use of longer line lengths but I’m curious in what writing maths with lower line lengths is like.

Drawings

I increaingly like putting drawings into the posts. I mainly use Goodnotes but now I’m trying to use Adobe Fresco instead.

The rest

I’m using the auto-render extension provided by KaTeX to get LaTeX working. You would have to copy the scripts provided to _includes/custom-head.html

In terms of _includes, I added some Progressive Web App / KaTeX scripts to custom-head.html, had an empty footer.html to remove the default Minima footer, added a bit of code to header.html to hide some pages from the menu bar and added responsive-image.html for some scripts related to responsive images.

In terms of _layouts, I added some code to post.html to enable post navigation.

I’ve also written some AppleScript applications to automate building and publishing the website to GitHub.

Previous meta post

All meta posts