Building a Jekyll Site on Windows with Docker

I’ve been very, very late to the party and have only just discovered Docker. I have one big excuse for this - when searching the web I’ve found it very difficult to assertain what Docker actually is. Consequently, I didn’t know if I needed it or if it’d make my life any easier…

A few weeks ago, I was introduced to Docker by a colleague, who gave me a quick run down of the pros/cons. It was only then, when seeing a working example, that it “clicked”. I got it and I started to dream up all manner of situations where it’d save me time and make my development workflow more automated.

One particular workflow that’s not currently automated is one where I have to compile a bunch of SASS(css)/html from a Jekyll site for Yummit. This site is maintained by a developer helping with the project. He’s been doing some really great work and is definitely somewhat of a SASS/Styling Wizard - just view any of the pages and you’ll see his work!

The developer and also the Co-Founder (Liam) both use Mac’s as their dev machines. I however use a Windows 10 Laptop.

Jekyll apparently runs fine on both their machines and was a doddle to set up. On a windows machine, however, it was not as simple.

First

First off I tried installing Ruby and all the dependencies that comes with just so I could view the compiled CSS and html - after a few hours of trying, multiple installs of different versions……I gave up. I followed this guide which didn’t work for me.

Second

Instead I settled for creating a LinuxVM - and remoting into that, Pulling the Repo via Git and then doing the build inside the VM. This worked, however was not the quickest of workflows.

For some reason, the Network in the VM would constantly connect/disconnect multiple times a minute. The only way to stop this was to open a long Youtube video in Chrome on the Windows side. With that issue solved, the next was sharing a common drive between the two OSes. I just couldn’t get this to work, Linux was not seeing the Windows shared Network Drive I created. As the time to get this working was starting to nudge towards the 2-day mark. I was just looking for quick fixes and to finally get this working. I had an “epiphany” - one which I’m actually ashamed of - I zipped up the generated output from the Jekyll build and emailed it to myself.

…..There I said it - in my defence, I just had to get it working, it was dirty and wasn’t quick - but it worked.

Step forward to 30mins ago…

I’m no docker expert, but I managed to get a docker-compose.yml file working within 20 mins - no exaggeration. It honestly took 20 mins! I’ve never really written yml before, but just started typing in VS Code and got inspiration from a few examples online. And now I can build/serve the jekyll site in precisely 5.917 seconds.

A simple docker-compose up command and I’m away.

I’m so chuffed this works and was easy to set up, the only regret is that I didn’t know about this sooner, which could have saved me a lot more time

Finishing

Anyways, here’s the goodies if you’re on a Windows box, have docker and need to serve/build a Jekyll site.

docker-compose.yml (which uses the official Jekyll base image)

version: "3"
services:
  site:
    command: jekyll serve
    image: jekyll/jekyll:latest
    volumes:
      - .:/srv/jekyll
    ports:
      - 4000:4000
  build:
    command: jekyll build
    image: jekyll/jekyll:latest
    volumes:
      - .:/srv/jekyll

Then, just cmd into the directory where all your Jekyll code is and run

docker-compose up "site" to serve the Jekyll site on http://localhost:4000/

docker-compose up "build" to output the html/css to a folder called _site

Then you’re good to go!