Install Jekyll on your Mac with Docker Compose file 🤘 - Everything you need to get going
Tags: devops, webdev, tutorial, docker
Published: 2020-11-21 20:00:17

##Why This Installation Process
Jekyll is still flirting around the top 3 static site generators (SSG) to choose from. It is [SSG](https://www.netlify.com/blog/2020/04/14/what-is-a-static-site-generator-and-3-ways-to-find-the-best-one/?utm_source=dev.to/stankukucka&utm_medium=referral&utm_content=RefferToGoodExplanationOfSsg) 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](https://jekyllrb.com/showcase/). 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](https://jekyllrb.com/). 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](https://dev.to/stankukucka/install-jekyll-on-macos-terminal-50gi), 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](https://dev-to-uploads.s3.amazonaws.com/i/vrd8wq981hb11guh8as4.png)
Download Mac stable installation on official Docker hub domain here:
👉 [Download Docker Desktop](https://www.docker.com/products/docker-desktop/)

Run installation from the <code>dmg</code> file you have downloaded. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bm4i1glnudnf918v9n0f.jpeg)
Approve access and privileged access that Docker Desktop will ask for.

You can run now Docker Desktop from the top bar icon dropdown choosing <code>Dashboard</code> or go to <code>Applications</code> and look for <code>Docker.app</code> 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 <code>Desktop</code>, create directory <code>jekyll-website</code> and enter into it using these commands one by one.

```
cd Desktop
mkdir jekyll-website
cd jekyll-website
```
Save this <code>docker-compose.yml</code> file into <code>jekyll-website</code> directory you will find hereunder. 

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

👉 [Download Docker Compose YML File](https://github.com/stankukucka/docker-compose-jekyll-image/blob/main/docker-compose.yml)


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 <code>docker-compose.yml</code> 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mpkwzaxtdtwcfj48k5b3.png)

Now your command promt start with <code>bash-5.0#</code> 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 <code>jekyll-website</code>.

Then just type in.

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/se6kh80eplxse50uy7tm.png)

To be sure you can check <code>jekyll-website</code> 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 <code>docker-compose up</code> 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 <code>Desktop/jekyll-website/_site</code> and run local server is now accessible via <code>http://localhost:4000/</code> or <code>http://0.0.0.0:4000/</code> 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 <code>4000 port</code>.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/55u9a8z159opy9uu4xd4.png)

##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](https://unsplash.com/@lgtts?utm_source=unsplash&utm_medium=referral&utm_content=CreditCopyTextGratitude) for the cover image from Unsplash.