How we made our website using Jekyll, PicoCSS and Github Actions

Welcome to our new website, since you’re here - I take it you’ve already had a look around…But maybe (or hopefully) you’re weird like me and are interested to know about how it all comes together under the hood.

In a past life Sam and I made Wordpress and Django websites for a living, but I wanted something small, simple and secure. For that reason I chose to go with Jekyll, a Ruby based static site generator.

Jekyll

Jekyll is great - it lets us write all the content for the website in Markdown while also allowing us to drop in any HTML we might need.

It uses the Liquid templating engine which we were already relatively familiar with from using other web frameworks.

Building a Jekyll site results in collection of static HTML, JS and CSS (and assets) ending up in the _site folder. You can then use this to serve a fully static but quite functional site from a standard web server like Apache without the inherent risks of adding things like dynamic PHP or database code to the backend of your site. From here it gets deployed to the webserver you’re viewing this on - but more on that in a bit.

Pico CSS

Next up in the stack is the “frontend”, I wanted to keep things simple so after a bit of a look around at current projects, I decided on PicoCSS. Pico has all the functionality we would need in this blog, and is super light-weight.

Pico also has a neat classless version, basically you just write plain HTML and then add PicoCSS, then your website is pretty - without having to remember the long list of framework specific CSS classes to add to each element in order to get it to show up correctly.

Github actions

Naturally we had to host the code somewhere, cue Github to the rescue. It had been a while since I had a look at the feature Github offers, but I was pleasantly surprised when I stumbled upon Github Actions. Actions is basically a CI/CD server built right into your repo, all you need to do is add a simple YML file defining the actions to be taken in a ‘build’ of your system, then this will happen each time you push new code to your repo!

First up, we compile the Jekyll site (Actions already had a template for this) by running jekyll build within the jekyll builder docker image.

After it’s compiled, we’re using Sam Kirkland’s FTP Deploy Action to upload the resulting _site directory to our webserver.

That’s basically it - the result is a simple and quick process that we can just focus on writing content and not constantly patching websites!