Logo

dev-resources.site

for different kinds of informations.

Setting Up a Local Development Environment for Jekyll with Docker

Published at
1/22/2024
Categories
jekyll
blog
docker
tutorial
Author
cuongnp
Categories
4 categories in total
jekyll
open
blog
open
docker
open
tutorial
open
Author
7 person written this
cuongnp
open
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"]


Enter fullscreen mode Exit fullscreen mode
  • Run this command to build the image:


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


Enter fullscreen mode Exit fullscreen mode

Image building

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


Enter fullscreen mode Exit fullscreen mode

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;
    }
}


Enter fullscreen mode Exit fullscreen mode

Your folder structure will be like this:

Structure

  • Run the command to finish


$ docker-compose up -d 


Enter fullscreen mode Exit fullscreen mode

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



Enter fullscreen mode Exit fullscreen mode

Step 5: Running the Jekyll Container

After finished creating a Jekyll, run:

  • Run in container ```

$ bundle install
$ bundle exec jekyll serve


Result:

Enter fullscreen mode Exit fullscreen mode

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 {% raw %}`/favicon.ico' not found.

`

Step 6: Accessing the Jekyll Site

Type localhost on your browser and start your blog

Result image

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

jekyll Article's
30 articles in total
Favicon
Usando data files para redes sociais no Computaria
Favicon
Deixando a pipeline visΓ­vel para acompanhar deploy do blog
Favicon
It's easy to dev blog
Favicon
Aiartful Hacks Blog
Favicon
How to Use Lunr.js for Searching in a Jekyll Blog
Favicon
Migrating from WordPress to Jekyll: save money with a static site
Favicon
Marrying Tailwind with Jekyll
Favicon
Adding social icons to the Bulma Clean Theme footer
Favicon
The perl.fish experiment
Favicon
Fixing A Broken Deployment to Google App Engine
Favicon
Did You Know You Can Use GitHub to Host Your Site for Free?
Favicon
Recovering My Blog with Jekyll and Proxmox
Favicon
Introducing jekyll-crypto-donations: Easily Add Crypto Donation Blocks to Your Jekyll Site
Favicon
Migrating my blog from Jekyll to Hugo
Favicon
Deploying Jekyll to GitHub Pages with CircleCI 2.0
Favicon
How to generate a great website and reference manual for your R package
Favicon
Top 5 Online Markdown Editors (2024)
Favicon
Ruby (Versioning) Hell with Jekyll & GitHub Pages
Favicon
Building OneFlow: Crafting an Effortless Jekyll Theme for One-Pager Websites
Favicon
Setting Up a Local Development Environment for Jekyll with Docker
Favicon
Adding "Created At" and "Last Updated" Dates to Jekyll
Favicon
Implementing post series in Jekyll
Favicon
How to Easily Start Blogging in 2023
Favicon
Using prettier to format your Jekyll theme
Favicon
Jekyll Docker
Favicon
New Theme Jekyll minima-lite
Favicon
Jekyll Tutorial: How To Create a Static Website
Favicon
How to use Jekyll's link tag with data values
Favicon
Getting Started with Jekyll: A Powerful Ruby-Based Static Site Generator
Favicon
Building Better Docs - Automating Jekyll Builds and Link Checking for PRs

Featured ones: