Deploying a Jekyll Site with Drone and Gitea

Drone.CI & Gitea via Docker

I am all for keeping as much as I can locally in my network. I would like to have a little blog to show off the things I do, to help out others, and to help out future me when I forget how to do something. Since I have a server running already 24/7 at my house, I figured it should be fairly easy to host my own site.

I want to try and use the static-site generator Jekyll to accomplish my site. However I want to try and integrate building and deploying the site with Drone, a self hosted continuous integration, continuous delivery service, so that all I have to do is push a commit to my local git (Gitea) repo and the site is automatically built. On top of it all, I want everything to be in docker containers. This page will document how I made it work on my synology NAS utilizing docker & docker-compose, I am assuming you have docker/ docker-compose installed plus a Gitea instance already up and running.

Test out Jekyll

Create a new directory and enter it

$ mkdir blog
$ cd blog

Then we will run a docker command that will create a jekyll structure.

sudo docker run --rm --volume="$PWD:/srv/jekyll" -it jekyll/jekyll:4 jekyll new --force ./

flags

• --rm: remove docker container once docker is closed
• --volume="$PWD:/srv/jekyll": map the present working directory (PWD) to the location /srv/jekyll inside the docker container
• -it: tells docker to open an interactive container instance
• jekyll/jekyll:4: what image from docker hub to pull down, in this case it’s version 4 of jekyll from the jekyll user.
• jekyll new ./: Creates a new Jekyll site with default gem-based theme in the current directory. The subsequent directories will be created as necessary.

Build Test Blog

Building takes the markdown files and converts them to the static html/css to be served to anyone visiting the site

sudo docker run --rm --volume="$PWD:/srv/jekyll" -it jekyll/jekyll:4 jekyll build

There should now be a `./_site’ directory which will be the directory that is served.

Developing on Test Blog

This ‘deployment’ is just for testing/ dev work. To run the site issue the command:

sudo docker run --name testBlog --volume="$PWD:/srv/jekyll" -p 3051:4000 -it jekyll/jekyll:4 jekyll serve --watch --drafts

and then navigate to the site with a web browser http://ipaddress:3051 and you will see the site.

Now any modifications made to the site (via the markdown files) will be watched and updated by the built-in Jekyll server.

Deploying Test Blog - Manually

I have an apache web server docker container that I use to serve up all the files on joshilles.com. I have apache configured to serve files on ports 8001 and 4431, I use my reverse proxy to point incoming traffic to the apache container. It is configured via docker-compose as follows:

# Apache Sever
  apache:
    image: bitnami/apache:latest
    container_name: apache
    ports:
      - 8001:8080
      - 4431:8443
    volumes:
      - ${DOCKER_DIR}/joshilles.com:/app

To get my information from my test site showing up on my main domain, I have to copy the information over to the right directory

cp ${DOCKER_DIR}/testBlog/_site/* ${DOCKER_DIR}/joshilles.com

Configure Drone

Drone CI/CD will have at least (2) docker containers associated with it. The first, the main container will be what contains the web UI, and configuration. The second container is called a drone runner or a drone agent, it will be what actually runs the pipeline configured in the drone.yaml file in the blog repository.

docker-compose.yaml for main drone config

# Drone CI/CD  
  drone:
    image: drone/drone:1
    container_name: drone
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - ${USERDIR}/docker/jekyll/site:/build_source
      - ${USERDIR}/docker/jekyll/site/_site:/source
      - ${USERDIR}/docker/joshilles.com:/target
    restart: unless-stopped
    # user: 1030:100
    environment:
      - TZ=${TZ}
      - DRONE_GITEA_SERVER=${DRONE_GITEA_SERVER}
      - DRONE_GITEA_CLIENT_ID=${DRONE_GITEA_CLIENT_ID}
      - DRONE_GITEA_CLIENT_SECRET=${DRONE_GITEA_CLIENT_SECRET}
      - DRONE_RPC_SECRET=${DRONE_RPC_SECRET}
      - DRONE_SERVER_HOST=${DRONE_SERVER_HOST}
      - DRONE_SERVER_PROTO=${DRONE_SERVER_PROTO}
      - DRONE_GIT_ALWAYS_AUTH=false
      - DRONE_TLS_AUTOCERT=false
      - DRONE_RUNNER_CAPACITY=2
      - DRONE_USER_CREATE=username:joshua,admin:true
      # - DRONE_LOGS_TRACE=true
      # - DRONE_GITEA_SKIP_VERIFY=true
    ports:
      - 8090:80
      - 4432:443

docker-compose.yaml section for drone runner

# Drone Docker Runner
  drone_runner:
    image: drone/drone-runner-docker:latest
    container_name: drone_runner
    restart: unless-stopped
    # user: 1030:100
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - ${USERDIR}/docker/jekyll/site:/build_source
      - ${USERDIR}/docker/jekyll/site/_site:/source
      - ${USERDIR}/docker/joshilles.com:/target
    environment:
      - DRONE_RPC_HOST=${DRONE_SERVER_HOST}
      - DRONE_RPC_PROTO=${DRONE_SERVER_PROTO}
      - DRONE_RPC_SECRET=${DRONE_RPC_SECRET}
      - DRONE_RUNNER_CAPACITY=2
      # - DRONE_RUNNER_NAME=${HOSTNAME}
      - DOCKER_API_VERSION=1.39
    ports:
      - 3020:3000