If you prefer running your own local instances of Drone.io and Gitea using Docker containers, you can still automate your Hugo website deployment seamlessly.

In this guide, I’ll walk you through the process of setting up Hugo with a local Drone.io instance and a local Gitea server, allowing you to automate your website deployment workflow in a self-hosted environment.

I used this setup initially, before changing the Drone deployment to upload through FTP to my local staging web server. If you’re interested in this setup, you can find the details in the guide Deploy to an FTP server with Drone.

Note

The instructions below cover the setup and running of the Docker instances locally. If you are setting this up in your home lab, then just change the references from local to the details of your servers.

Prerequisites

Before getting started, make sure you have the following prerequisites in place:

  • Docker installed:
    • Make sure you have Docker installed on your local machine or remote server.
  • Basic knowledge of Docker:
    • Familiarity with Docker and Docker Compose will be helpful.
  • A working Hugo website:
    • Set up a Hugo website locally.

Step 1: Set up Gitea

  1. Create a new directory on your machine for the Gitea Docker configuration.
  2. Create a docker-compose.yml file within that directory and add the following content:
version: '3'
services:
  gitea:
    image: gitea/gitea:latest
    ports:
      - "3000:3000"
      - "2222:22"
    volumes:
      - ./gitea-data:/data
    restart: always
  1. Save the file and navigate to the Gitea Docker configuration directory in your terminal.
  2. Run the command docker-compose up -d to start the Gitea container.

Gitea should now be accessible at http://localhost:3000. Follow the on-screen instructions to set up an admin account and create a new repository for your Hugo website.

Step 2: Set up Drone.io

  1. Create a new directory on your machine for the Drone.io Docker configuration.
  2. Create a docker-compose.yml file within that directory and add the following content:
version: '3'
services:
  drone-server:
    image: drone/drone:latest
    ports:
      - "8080:80"
    volumes:
      - ./drone-data:/data
    restart: always
    environment:
      - DRONE_GITEA_SERVER=http://gitea:3000
      - DRONE_GITEA_CLIENT_ID=your-gitea-client-id
      - DRONE_GITEA_CLIENT_SECRET=your-gitea-client-secret

  drone-runner:
    image: drone/drone-runner-docker:latest
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    restart: always

  1. Save the file and navigate to the Drone.io Docker configuration directory in your terminal.

  2. Replace your-gitea-client-id and your-gitea-client-secret with the appropriate values. These can be obtained by registering a new OAuth application within Gitea’s settings.

  3. Run the command docker-compose up -d to start the Drone.io containers.

Drone.io should now be accessible at http://localhost:8080. Sign in with your Gitea credentials and authorise Drone.io to access your Gitea repositories.

Step 3: Configure the Drone.io Pipeline

  1. Within your Hugo website’s repository, create a .drone.yml file in the root directory.
  2. Add the following code to the .drone.yml file:
kind: pipeline
name: your-pipeline-name

steps: 
  - name: Clone Git Submodules
    image: alpine/git
    commands:
      - git submodule init
      - git submodule update --recursive --remote
      
  - name: Build with Hugo
    image: binaryronin/drone-hugo:latest
    pull: always
    commands:
      - echo "Checking Hugo version."
      - hugo version
      - cd /drone/src/hugo/
      - hugo --verbose 
      - ls -al /drone/src/hugo/public

  - name: Deploy
    image: appleboy

  - name: deploy
    image: appleboy/drone-scp
    settings:
      host: your-remote-host
      username: your-remote-username
      password: your-remote-password
      source:
        - /hugo/public/
      target: /path/to/your/remote/directory

Replace your-pipeline-name with a suitable name for your pipeline.

  1. Adjust the host, username, password, and target fields to match your remote server details and deployment directory.

Step 4: Trigger the Pipeline

  1. Push your updated .drone.yml file to your Gitea repository.
  2. This will trigger the Drone.io pipeline to run.
  3. Monitor the build process in the Drone.io interface to ensure everything is working correctly.
  4. Once the pipeline completes successfully, your Hugo website will be deployed to the specified remote server.

You have successfully set up Hugo with a local Drone.io instance and a local Gitea server. Now, whenever you push changes to your Gitea repository, Drone.io will automatically build your Hugo website and deploy it to your remote server.

I’ll continue documenting my journey with Gitea, Drone and Hugo and share the interesting things I find along the way.

If you want to look further in to any of the above tools, do take a look at my previous posts and read the official documentation from the following sites:

Gitea Drone Hugo

Related Posts