Setting Up a Local Development Environment for Jekyll with Docker

I've been writing my blog on Notion for a few years and now I want to host it on a dedicated website. There are several platforms available, such as Jekyll and Next.js. Initially, I attempted to build a static site using Next.js and host it on S3. However, it didn't turn out to be an ideal solution due to the time it takes to update and the repetitive configuration required each time I write a new post. This led me to explore Jekyll as an alternative.

Jekyll is popular among many for its simplicity and support for automatic deployment through GitHub. Despite its merits, I encountered challenges while configuring it on my Mac. After spending one or two hours on the setup, I found myself struggling. It made me realize the importance of having a consistent environment that works seamlessly across MacOS, Windows, and Linux. The solution? Docker.

Today, I'm going to share with you how to set up a Docker environment for your Jekyll blog. Let's dive into the process!

Prerequisites

Docker supports many OS such as macOS, Windows, or Linux. So, don’t worry!

Step 1: Installing Docker

Let's start with the essentials: installing Docker. To get Docker up and running, head straight to the official Docker website and follow their user-friendly installation guide, which provides step-by-step instructions tailored to your operating system. You can find the installation guide here.

Step 2: Create a Dockerfile and build an image

I've already created a Dockerfile containing essential packages for running a Jekyll project. Feel free to customize it by adding any additional packages you may need. This Dockerfile can be utilized as a server, ensuring it runs seamlessly across various environments. Here is the configuration.

# Use Debian as a parent image
FROM debian:latest

# Update the package index and install necessary packages
RUN apt-get update && apt-get install -y \ 
    ruby \
    ruby-bundler \
    ruby-dev \
    nano \
    systemctl \
    nginx \ # Need for redirect request from docker container to outside
    build-essential \ 
 && rm -rf /var/lib/apt/lists/* 

# Set the working directory to /app
WORKDIR /app

# Display Ruby version and bundler version
RUN ruby --version && bundle --version && gem install bundler jekyll

# Command to run when the container starts
CMD ["irb"]

• Run this command to build the image:

$ sudo docker build -t my-ruby-env .

Step 3: Create docker-compose.yml and launch container

Next steps, we will create a docker-compose.yml to launch a container.

version: "3"

services:
  my-jekyll-container:
    image: my-ruby-env:latest # This is image which built in step 2
    container_name: local_jekyll
    restart: always
    tty: true
    volumes:
      - ./app:/app
      - ./conf:/etc/nginx/conf.d # For nginx setting
    ports:
      - "80:80"
networks:
  my-network:
    driver: bridge

To enable access to the container, Nginx is configured as a reverse proxy to manage requests between your local PC and the container. The Nginx settings for this setup are mounted in the /etc/nginx/conf.d directory.

server {
    listen 80;
    server_name localhost;

    location / {
        proxy_pass http://127.0.0.1:4000;  # Use the container name
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Your folder structure will be like this:

• Run the command to finish

$ docker-compose up -d 

Step 4: Setting Up a Jekyll Project

You can copy an existing project or create a new one into the container because it has already mounted, here the the commands to init a new Jekyll project inside the container

$ jekyll new my-awesome-site
$ cd my-awesome-site

Step 5: Running the Jekyll Container

After finished creating a Jekyll, run:

• Run in container

$ bundle install
$ bundle exec jekyll serve 

Result:

Run in verbose mode to see all warnings.
                    done in 0.338 seconds.
 Auto-regeneration: enabled for '/app/my-awesome-site'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.
[2024-01-22 02:49:41] ERROR `/favicon.ico' not found.

Step 6: Accessing the Jekyll Site

Type localhost on your browser and start your blog

Conclusion

Well done! 👏
We already finished setting up the environment across os for Jekyll's blog. Just enjoy blogging !!!
Thank you for reading!

https://github.com/mrdaiking/docker-jekyll/tree/main