DEV Community

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

Posted on • Edited on

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

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.

Top comments (4)

Collapse
 
jonbrown21 profile image
Jon Brown

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!!

Collapse
 
stankukucka profile image
Stan Kukučka

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.

Collapse
 
_bigblind profile image
Frederik 👨‍💻➡️🌐 Creemers

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.

Collapse
 
stankukucka profile image
Stan Kukučka

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!