If you’re looking for an efficient way to automate your Hugo website deployment, using a Docker Drone.io container as your continuous integration and delivery (CI/CD) platform can be a great choice.

In this guide, I’ll walk you through the process of setting up Hugo with a Docker Drone.io container and GitHub, allowing you to streamline your website deployment workflow.

Prerequisites

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

  • Docker installed:
    • Ensure you have Docker installed on your local machine.
  • Basic knowledge of Docker:
    • Familiarity with Docker and Docker Compose will be helpful.
  • A working Hugo website:
    • Set up a Hugo website locally.
  • A GitHub repository:
    • Host your Hugo website’s code in a GitHub repository.

Step 1: Set Up a Docker Drone.io Container

  1. Create a new directory on your machine for the Docker Drone.io container 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_GITHUB_CLIENT_ID=your-github-client-id
      - DRONE_GITHUB_CLIENT_SECRET=your-github-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 Docker Drone.io container configuration directory in your terminal.

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

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

Drone.io should now be accessible at http://localhost:8080.

Step 2: Connect Drone.io to GitHub

  1. Open Drone.io in your web browser at http://localhost:8080.
  2. Sign in with your GitHub credentials.
  3. Authorise Drone.io to access your GitHub repositories.

Step 3: Configure the Drone.io Pipeline

  1. Within your Hugo website’s GitHub 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/drone-scp
    settings:
      host: your-remote-host
      username: your-remote-username
      password:
        from_secret: your-remote-password-secret
      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.

  2. Add a secret for your remote server’s password by going to your Drone.io repository settings and adding a secret with the key your-remote-password-secret and the corresponding value.

Step 4: Trigger the Pipeline

  1. Push your updated .drone.yml file to your GitHub 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 Docker Drone.io container and GitHub. Now, whenever you push changes to your GitHub 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