Stephan van Rooij

Software architect with a passion for home automation.

Github pages (Jekyll) live reload with docker


I really like Github Pages to host static webpages. Static in this case means the files are generated at build time (so once when you publish a new version), instead of every time like with a wordpress website. One of the main benefits is that it results in a blazing fast website.


A lot of websites that are running on Github Pages are actually just a bunch of markdown files that get converted to html by Jekyll. Jekyll is run on every repository that uses Github Pages, unless you explicitly disable it.

Jekyll = ruby

Jekyll is build in ruby, and if you have ruby installed you can also use your local ruby installation to start live reload.

Use docker to live reload

I’m not a ruby expert, nor do I want to install any tools that I don’t know how they work. I already had docker installed, so I figured out it was the most convenient way to enable live reload for my blog. This will probably work for most jekyll projects but you might have to tweak some things.


A Gemfile described the needed dependencies, I use this file for the current blog. You need to add this file to your repository to be able to run Jekyll “locally”.

source ''
gem 'github-pages', group: :jekyll_plugins
gem "jekyll-github-metadata"
gem "jekyll-octicons"
gem "jemoji"


Next is to create a docker-compose.yml file in your repository. I’m using this one:

version: '3.3'
        - './:/srv/jekyll'
        - '4000:4000'
        - '35729:35729'
    image: jekyll/jekyll
    command: jekyll serve --incremental --livereload --force_polling

Live reload

Once you added the above files to your repository, you can just run docker-compose up to get started. It will first load all needed Gems, then start the server and then do the first compilation.

If you save a file, it will automatically recompile and refresh your webpage.

Demo time

  1. Just clone this blog somewhere git clone
  2. Open the folder cd
  3. Run docker-compose up (you can stop the container once you’re done, with CTRL+C)
  4. Open http://localhost:4000 in the browser
  5. Open a specific page, edit that page in code and see it reload in the browser automatically.

Jekyll website to progressive web app


A PWA (or Progressive web application) is a website which can be installed on a desktop and acts like an app. It has an icon and a title. And it can even receive messages from the server if the app isn’t running. It can also show notification messages to the users.

So in short it’s a website acting like an app. This post shows you how to turn a Github Pages website into a pwa in three easy steps.

Twitter cards for static web page


My personal page is a static website hosted on Github pages. Posts are written in markdown and the source of all the posts is in my public repository. I tweet about most posts at least once, and it just shows the link, that’s not what I want.

All tweets to my blog should at least show the title and a short description. Maybe even a large image related to the post.

Clone a BIG git repository


Wanted to clone a repository to do a quick text fix and create a pull request. Created the fork, and tried to clone. Cloning the repository took way longer than I’m used to.

Slow git clone

Like what you're seeing? Consider Sharing on Twitter or Sponsoring me