Technical aspects of isra.fyi

Scratch December 18, 2023 ; Catergory: meta

In keeping with this blog’s tradition of stealing ideas from Toby Lam, I’ve decided to write up some of the technical details of my website, for anyone curious in starting their own blog, or interested in how I did a specific thing.

This page is continuously updated! (Last updated: 18/12/2023)

High Level Design

To produce my site output, I’m using the Jekyll web framework, as it allows me to generate a static website.

I write my posts in Obsidian, before exporting as markdown files for the website.

Changes to the site are made on my local machine on Visual Studio Code, before being pushed into the development branch of a private GitHub repository. When I am happy with the changes, I’ll then merge these changes into a main branch to then update the publicly facing website at isra.fyi. It’s a little obtuse, but it allows me to test certain features on other devices and share production versions with others, which have both come in useful in the past.

To serve my website under my domain, I’ve decided to use Cloudflare Pages, since I find it less of a hassle to use compared to GitHub Pages. Cloudflare is also where I’ve registered my domain name (though as a heads up to others, Cloudflare does not allow the buying of country based domain names (true as of 18/12/2023)).

Style

While technically under my _config.yml, I’m ‘using’ the Minima theme, I’ve forgone using any of their given templates and instead opted to create my own template. One day I may opt to release my template publicly (though first I’d need to fix the awful CSS programming currently on display within my code), but for now I’ll explain some less obvious aspects.

Scrolling Background

The scrolling background is a reference to the background seen in the Japanese video game series Tokimeki Memorial (an example of which can be seen here). The sprite for the tiles themselves are ripped directly from the game. I then used this image to create a 2x2 scrolling gif, which can be seen here. The gif itself was created by first extending the 2x2 grid into a 4x4 grid, then importing into a video editing software (with the video size being the same as the size of the 2x2 gif) and animating the grid to move from the bottom left corner to the top right, creating the scrolling illusion.

Once I’ve created the gif, I can now use it to tile my website. I use the following code in my main CSS file to do so:

 1    body {
 2        background:
 3            /* top, transparent black, faked with gradient */
 4            linear-gradient(
 5                rgba(0, 0, 0, 0.5),
 6                rgba(0, 0, 0, 0.5)
 7            ),
 8            /* bottom, image */
 9            url("/static/images/background.gif");
10        background-color: rgb(81, 62, 75);
11    }

The linear-gradient is being used to apply a darkening filter over the gif itself (to avoid having to manually change the source gif), and previously I used to utilise the gradient’s features by having the background get darker the lower down the page you were. Anyway, I then link the image that will then be used to tile the space (if tiling does not occur, check that background-repeat is set to repeat). Finally, background-color is used to colour the area behind the background, just in case.

LaTeX for Maths

I’m using the auto-render extension provided by KaTeX to get LaTeX working. I put their provided scripts into a file _includes/custom-head.html, that I then import using liquid tags into any page that needs LaTeX formatting.

I also put the following CSS to add scroll bars in case the LaTeX overflows on mobile:

1  .katex{
2    overflow-x: scroll;
3    overflow-y: hidden;
4  }

I also ended up setting a max-width for the content area, because otherwise KaTeX will just push the size of the content area, rather than utilising the scroll bars.

Code

For code blocks, I currently use CodeRay as my default syntax highlighter. To utilise it, I’ve installed a gem called kramdown-syntax-coderay, and followed their instructions to get it properly working.

I ended up having an issue where there was no line-wrapping on my code blocks, leading to it stretching my content box. To fix this, I added the following to my CSS:

1    pre {
2        white-space: pre-wrap;
3    }

And in my _config.yml I have the following:

1    kramdown:
2        syntax_highlighter: coderay
3        syntax_highlighter_opts:
4            line_numbers: inline

The line_numbers: inline ensures that the numbers do not get misaligned from lines when line-wrapping occurs.

Miscellaneous

I put permalink: /:year/:month/:day/:title in _config.yml to remove the .html extension from my post URLs.