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
Download Mac stable installation on official Docker hub domain here:
👉 Download Docker Desktop
Run installation from the dmg file you have downloaded.
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
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
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
When the process is done you'll see this inside your terminal command promt.
Creating jekyll-website_jekyll_run ... done
In Docker Desktop Dashboard you can now see this Jekyll image.
Now your command promt start with bash-5.0# so it looks like this.
bash-5.0#
You need to type this simple command hereunder. Copy-paste it and execute it in the terminal.
jekyll new . --force
It will fetch Gem data from Rubygems.org and create all necessary jekyll website files into jekyll-website.
Then just type in.
exit
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.
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
In command line you'll see this messages.
Creating jekyll-website_jekyll_1 ... done
Attaching to jekyll-website_jekyll_1
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.
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.
Latest comments (4)
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!!
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.
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.
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!