Setting up a Jekyll development environment with Docker

22 Apr 2019

Hello World!

Today we will set up our development environment for a Jekyll blog. I started to set this up the old-fashioned way by installing all dependencies on my local Windows box. Every time I tried to build Jekyll threw a lot of gem not found errors and I started thinking about a way to make it easier for myself. The solution is Docker.

Jekyll

First, let us explain what Jekyll is. Jekyll is a static open-source page generator written in Ruby. The guy who wrote it is called Tom Preston-Werner and is also co-founder of the beloved GitHub. Jekyll doesn’t need a database like WordPress, it just takes Markdown, Liquid Templates and some configuration files and creates the static pages. These pages can be served with a web server like Apache or Nginx. Here are a few links to read more.

• Jekyll Documentation
• Jekyll Source code

Docker

Docker is a super complex software suite and I will describe it just in a few simple words. Every piece of Software you are writing has its dependencies that it needs to run. In the case of a Jekyll Blog this would be ruby as a programming language and Jekyll as the static page generator. Without docker, we have to install all these dependencies manually and sort out the right versions for our Code to run. Docker is simplifying this process by packing all the necessary dependencies for our application in a Container. By simplification, I mean that the setup after installing Docker is basically a command!

• Docker Documentation
• Docker Tutorial
• Demystifying Docker - Video

Setting up the environment

Everything encapsulated like < this > is a variable and you should change their value accordingly.

First you need Docker installed locally. The official docs will guide you through this. This is also an advantage of Docker if you have a working container for one operating system you can use it on every OS.

• Docker installation

Next we mount a Docker volume and create our Jekyll blog. For this, we create a new directory where our blog should live and cd to it. Type pwd to get the current path where you are and copy it. This command creates the scaffold for the Blog.

docker run --volume="<Current Path>:/srv/jekyll" \
-it jekyll/builder:3.8 jekyll new <Blog Name>

• The -it Flag is responsible for keeping your shell interactive.
• --volume is mounting the first path from your disk inside the container at the second path. Because of that code changes you are making locally are reflected.
• jekyll/builder:3.8 is the container and version you want to run.
• jekyll new <Blog Name> is the command you like to execute inside the container. You could also use /bin/bash and take a look inside the container.

When we are coding, we can use the next command to build and serve our blog. Every time we change one file Jekyll will rebuild the entire site.

docker run --rm -p 4000:4000 --name blog \
--volume="<Current Path>:/srv/jekyll" \
-it jekyll/builder:3.8 jekyll serve --force_polling

• -p 4000:4000 This will map the port of our docker container to the local machine. Without this we cannot reach our site.
• --name blog By default container are getting a hash as ID with this we can specify a name to reference the container.
• jekyll serve This is the command which is serving our blog at 127.0.0.1:4000 inside the container.
• --force_polling With this flag we are polling for file changes, so we don’t need to execute the command again for rebuilding the static site.

Now we can visit our Blog at http://127.0.0.1:4000 and start customizing it.

For hosting your site there is e.g. GitHub Pages where you can host a Jekyll blog for free.

• GitHub Pages

Hope this is helpful for someone and Happy Hacking!