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 in making their own.

Preliminaries

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

_config.yml

I put permalink: /:year/:month/:day/:title to remove the .html extension from my blog posts.

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.

For some reason, google isn’t recognizing the sitemaps that jekyll-sitemap generates. As a result, I’ve been using jekyll-feed to generate a feed.xml that would serve as the sitemap. I’ve put feed: posts_limit: 25 in my _config.yml so that more blog posts are included in the feed.

I’m using some jQuery to change how the navbar looks if you’re visiting one of the webpages on the navbar. You can see it in action on the homepage. Here’s the code in the head.

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
  $(function(){
    $('a').each(function(){
      if ($(this).prop('href') == window.location.href) {
        if ($(this).prop('class') == 'page-link'){
          $(this).addClass('nav-active'); $(this).parents('li').addClass('nav-active');
        }
      }
    });
  });
</script>

Archive page

I followed this to get the archive page working. I followed this to get the archive page sorted by date working.

KaTeX

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.

I also put the following css to add scroll bars in case the latex overflows on mobile.

  .katex{
    overflow-x: auto;
    overflow-y: hidden;
  }

Drawings

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

Style

Readability

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.

“Full bleed” images

I’ve also mostly followed this guide to get full bleed divs / images (which escapes out of their parent’s div) working. You can see them in action here. Unfortunately setting divs to have width 100vw in the presence of visible vertical scroll bars causes horizontal overflow. As I didn’t intend having 100vw images except in mobile (which usually has transparent vertical scroll bars), I resolved this by setting the full bleed div to 95vw in certain scenarios and having the image be centered with respect to it. The only issue is that shrinking your desktop browser to mobile widths would still cause horizontal overflow. Here’s the code

@media screen and (min-width: $on-start-full-bleed) {
    text-align: center;
    width: 95vw; 
    margin-left: 50%;
    transform: translateX(-52.631578947%) translateX(2.5vw);
  }

Headings

I only use h1, h2 and h3 tags. The font sizes of h1, h2 and h3 are respectively \(2, \sqrt[3]{2}^2\) and \(\sqrt[3]{2}\) times the base font size on desktop, and \(1.75, \sqrt[3]{1.75}^2\) and \(\sqrt[3]{1.75}\) times of the base font size on mobile.

The rest

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.

There’s also a list of tools that I like using from time to time.