Dockerized Jekyll and TailwindCSS

Dockerized Jekyll and TailwindCSS

Jul 31st, 2024

I now have DaisyUI, TailwindCSS and Jekyll all happily working together in a Docker Container, with all the souce files living outside the container so I can write posts from anywhere.

Here is how I did it:

At the end of _config.yml I added

# dev server
host: 0.0.0.0
port: 4000

A new directory with three subdirectories - jekyll, daisy and source.

The top directory contains a single file - docker-compose.yml

services:
  jekyll:
    build: ./jekyll
    volumes:
      - ./source/:/source/
    ports:
      - 4001:4000

  daisy:
    build: ./daisy
    volumes:
      - ./source/:/source/
    #tty: true
    stdin_open: true
    stop_grace_period: 0s

The jekyll directory contains Dockerfile and entrypoint.sh

Dockerfile:

FROM ruby:alpine
# this just runs jekyll


ENV INPUT_DIR '/_source/'
ENV OUTPUT_DIR '/_source/_site'
ENV INPUT_EXTRA_PARAMETERS ''

ENV BUNDLE_HOME=/usr/local/bundle
ENV BUNDLE_APP_CONFIG=/usr/local/bundle
ENV BUNDLE_DISABLE_PLATFORM_WARNINGS=true
ENV BUNDLE_BIN=/usr/local/bundle/bin

EXPOSE 4000

RUN apk add --update \
  build-base \
  libxml2-dev \
  libxslt-dev && \
  rm -rf /var/cache/apk/* && \
  gem install webrick bundler jekyll 

COPY entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh

CMD ["/entrypoint.sh"]

entrypoint.sh

#!/bin/sh

RED='\033[0;31m'
NC='\033[0m' # No Color

echo "Running entrypoint.sh"
echo ""
echo "Set Path"

export PATH=/usr/gem/bin/:$PATH

printf "${RED}Checking Versions${NC}"
echo ""
jekyll --version
echo ""
bundle --version
echo ""

cd /source
rm -r /source/_site/

echo -e "${RED}Update Bundle${NC}"
echo
bundle install
echo

echo -e "${RED}Update Bundle${NC}"
echo
echo "Starting Jekyll ..."
echo 

bundle exec jekyll server

Likewise the daisy directory contains just two files:

Dockerfile:

FROM node:alpine

RUN apk update

RUN apk --no-cache add \
  curl


WORKDIR /source
RUN npm install -D tailwindcss
RUN npm i -D daisyui

#COPY entrypoint.sh /entrypoint.sh
#RUN chmod +x /entrypoint.sh



#CMD ["/entrypoint.sh"]
CMD ["npm", "run", "dev:tw"]

entrypoint.sh

#!/bin/sh

RED='\033[0;31m'
NC='\033[0m' # No Color

printf "${RED}Running daisy entrypoint.sh${NC}"

cd /source

npm install npm@latest
npm install
npm install tailwindcss
npm install daisyui

printf "${RED}Starting DaisyUI{NC}"

npm run dev:tw

#npm exec tailwindcss -i /source/assets/css/main.css -o /source/_site/assets/css/main.css --watch