Jekyll and Sass and SVG. Oh my.

12 March, 2015

I’ve decided to host this site at home. From a Raspberry Pi. The low power of the server and limited upstream bandwidth are interesting limitations to work within, so I’ll have to focus on limiting the amount of server-side processing needed, and the amount of data I’m shifting.


This site isn’t running on a Pi any more. The Pi was fine - my home internet connection wasn’t. Now it’s happily perched on a DigitalOcean droplet.

The Architecture

I have another tiny computer, a Banana Pi, acting as a proxy. It’s a reverse proxy, primarily intended to allow me to serve multiple (private) websites from home when needed. I think the Raspberry Pi will be fine on its own with the low levels of traffic I usually see, but if it starts to struggle I can enable caching on the Banana Pi as well, to share the load and alleviate some of the strain on the Raspberry Pi.

The Platform

My colleague Matt turned me onto Jekyll, the static blogging platform. The entire site is compiled from working files, on my desktop. The output of the compilation is a bunch of directories and static files, which are pushed to the server. These are then served without needing a database or any server-side scripting.

Some Slight Cleverness

I’m also learning a bit about Sass, the css extension language. Simply put, it lets you use variables (and other clever things) within your CSS. I’ve barely scratched the surface and it’s very exciting so far. Being able to define $brand-color once, then use it site-wide, is far more appealing than needing to use #a9032a; throughout the site - particularly if that colour ever needs to change!

I’m also very excited about the logo. That little one at the top left. In days past I’d have used a gif. Or maybe a jpg if I was feeling lazy. Recently, I’d have gone for a png. But, in the pursuit of minimal server load, I decided to give SVGs a go. They work brilliantly! I was also able to insert the svg code into the html of the header itself, to save an additional request to the server. Score! The colour is, again, coded into the CSS (via Sass), so changing the colour of the logo with the rest of the site is as simple as updating one variable. Hooray! It also means that the rollover state is as simple as any other rollover link - just using fill instead of color in the CSS.