Install Jekyll on your Mac with Docker Compose file 🤘 - Everything you need to get going
Stan Kukučka

Stan Kukučka @stankukucka

About: Hi, I’m @stankukucka or in other words, Stanislav Kukucka for a shorter call me Stan. Ping me over to collab. I'm open to working with motivated individuals or teams on courageous projects.

Location:
World
Joined:
Mar 27, 2020

Install Jekyll on your Mac with Docker Compose file 🤘 - Everything you need to get going

Publish Date: Nov 21 '20
12 4

Why This Installation Process

Jekyll is still flirting around the top 3 static site generators (SSG) to choose from. It is SSG written in Ruby. It's not the fastest one (when it comes to speed to generate static files), but still quite a fast generator used to manage static website content by many strong brands on the market like Netflix, Spotify, Twitch, Sketch, etc. Check more on official showcase page. Briefly said it's an easier way if you would like to avoid database based content management systems like WordPress, Drupal, Joomla, or other.

Common Practice

To install Jekyll locally traditional way is kind of like rewatch the boring sitcom. There is an official way how to install Jekyll published on the official website. I found it quite hard to install on the macOS system as I have recognized there are still some bugs that happend during this process.

I have had written quite an extensive tutorial how to install Jekyll via terminal with Gem Bundler here, but there is still hanging word "but".

Simple Install Process With Docker

First thing first, would like to mention that installation with Docker is easier and smoother. Another way to say it's a different "song of installation" that last less than 10 minutes.

To install Jekyll with help of Docker (Docker compose file) I see it as the easiest and fastest way how to make Jekyll running on your macOS system for you.

It helps you to have a bunch of things that Jekyll needs separately on your local machine with just a few simple steps. To have control over it we gonna use Docker hub.

Download and Install Docker Hub

Alt Text
Download Mac stable installation on official Docker hub domain here:
👉 Download Docker Desktop

Run installation from the dmg file you have downloaded.

Alt Text
Approve access and privileged access that Docker Desktop will ask for.

You can run now Docker Desktop from the top bar icon dropdown choosing Dashboard or go to Applications and look for Docker.app to run and let it opened.

Copying Jekyll Docker Image File

Create a directory for your future Jekyll website for example on Desktop, so go to Desktop, create directory jekyll-website and enter into it using these commands one by one.

cd Desktop
mkdir jekyll-website
cd jekyll-website
Enter fullscreen mode Exit fullscreen mode

Save this docker-compose.yml file into jekyll-website directory you will find hereunder.

Just simple click this link hereunder, then click Raw button. Press CMD + S browse jekyll-website directory and press Save.

👉 Download Docker Compose YML File

It's an image for Jekyll docker container installation that will set up all what is needed, Jekyll Gems, Ruby Gems, and Jekyll website directory structure with basic theme Minima as well. Let's make it step by step.

Running Jekyll Installation from Docker File

To run installation from docker-compose.yml use this command hereunder. It will download Jekyll docker image, start docker container and create Linux basch container for command line.

docker-compose run jekyll /bin/bash
Enter fullscreen mode Exit fullscreen mode

You'll see command like this one in your terminal promt with rest of the downloaded files in process.

Pulling jekyll (jekyll/jekyll:latest)...
latest: Pulling from jekyll/jekyll
Enter fullscreen mode Exit fullscreen mode

When the process is done you'll see this inside your terminal command promt.

Creating jekyll-website_jekyll_run ... done
Enter fullscreen mode Exit fullscreen mode

In Docker Desktop Dashboard you can now see this Jekyll image.

Alt Text

Now your command promt start with bash-5.0# so it looks like this.

bash-5.0#
Enter fullscreen mode Exit fullscreen mode

You need to type this simple command hereunder. Copy-paste it and execute it in the terminal.

jekyll new . --force
Enter fullscreen mode Exit fullscreen mode

It will fetch Gem data from Rubygems.org and create all necessary jekyll website files into jekyll-website.

Then just type in.

exit
Enter fullscreen mode Exit fullscreen mode

In Docker Desktop Dashboard you can now see this Jekyll Container. Just to note you before exit command it's active, now is exited and stores stuff mention above.

Alt Text

To be sure you can check jekyll-website directory to see that all Jekyll Website files are stored there.

Now Just Run Jekyll Website

This is the last step to make Jekyll website work for you. Just run docker-compose up right from your command line.

docker-compose up
Enter fullscreen mode Exit fullscreen mode

In command line you'll see this messages.

Creating jekyll-website_jekyll_1 ... done
Attaching to jekyll-website_jekyll_1
Enter fullscreen mode Exit fullscreen mode

This process will generate website files into Desktop/jekyll-website/_site and run local server is now accessible via http://localhost:4000/ or http://0.0.0.0:4000/ is the same.

In Docker Desktop Dashboard you can now see this Jekyll Container is orange. Click arrow on the left and you'll see there is first container storing Ruby Gems and second one is running Jekyll Website on 4000 port.

Alt Text

Ready To Use Jekyll Website

You did it. Give yourself a pat on the back. Now you are ready to play around with your isolated Jekyll website installation. You can now edit Minima theme or create a your new Jekyll template. Have fun with Jekyll.

Thanks to Ilse Orsel for the cover image from Unsplash.

Comments 4 total

  • Frederik 👨‍💻➡️🌐 Creemers
    Frederik 👨‍💻➡️🌐 CreemersNov 23, 2020

    Great tutorial!

    I don't think the #showdev category is appropriate though, as it's a tutorial rather than a project you're showing off.

    • Stan Kukučka
      Stan KukučkaNov 23, 2020

      Hi Frederik, Thanks for pointing out on misuse of the #showdev tag. You are right. Thanks to that I found out the #docker tag. Already updated!

  • Jon Brown
    Jon BrownJan 8, 2024

    Note after this step

    jekyll new . --force

    I had to run

    bundle add webrick

    In order for the following steps in the tutorial would work, running on macOS Sonoma. Great tutorial!!

    • Stan Kukučka
      Stan KukučkaJan 9, 2024

      Hi @jonbrown21 thanks for your smart note. It seems Sonoma asked for this bundle. Before it was not needed, but yes tutorial is from 2022. Thanks once again.

Add comment