These days, optimising workflows and automating processes is key to efficient software development and infrastructure management.

In my previous posts I covered how to configure Drone to build Hugo and deploy to various destinations, such as an FTP / Web server or Cloudflare Pages.

As I’ve been using and learning more about Hugo, I noticed that the Docker Image I was using to build my Hugo files in Drone was quite out of date and wouldn’t let me use some of the latest features available. After a brief search on the web, I couldn’t find a more recent version.

So, with a couple of spare hours on a Saturday morning, I did some research and looked in to building my own Docker Image and have it published to GitHub’s Container Registry.

And we now have the andrewbeaton/hugo-drone Docker image.

What is it?

andrewbeaton/hugo-drone is a Docker image specifically designed to facilitate Hugo site builds and deployments.

Built upon the popular Drone CI/CD platform, this image contains a preconfigured environment with Hugo and other necessary dependencies, aiming to streamline the setup process and ensuring consistency across different development environments.

The image is based on RockyLinux and installs the current version of Hugo, which is currently v0.113.0.

My aim is to build and release a new versioned image, for each major release that comes along.

Step 1: Installing Docker

Before we can use andrewbeaton/hugo-drone, we need to have Docker installed on our system. Docker allows us to run containers, which are lightweight, isolated environments that encapsulate our applications and their dependencies. Follow these instructions to install Docker on your operating system.

Step 2: Pulling the Image

Once Docker is installed, we can pull the andrewbeaton/hugo-drone image from the GitHub Images Repository.

Open your terminal or command prompt and enter the following command:

docker pull ghcr.io/andrewbeaton/hugo-drone:latest

This command will fetch the latest version of the image and make it available on your system for usage.

Step 3: Creating a Hugo Project

To work with andrewbeaton/hugo-drone, you need to have an existing Hugo project or create a new one.

If you haven’t set up a Hugo project yet, follow these steps:

1. Install Hugo:
   Visit the official Hugo website and download the appropriate binary for your operating system. Follow the installation instructions provided.

2. Create a New Hugo Site:
   In your terminal or command prompt, navigate to your desired project directory and run the following command:

   hugo new site my-hugo-site
   

   This command will create a new Hugo site with the name “my-hugo-site” in the current directory.

3. Add a Theme:
   Navigate to your Hugo site’s directory and add a theme of your choice. You can explore various themes on the Hugo Themes website or use a specific theme by following its documentation.

Step 4: Setting Up a Drone Configuration File

Drone relies on a configuration file named .drone.yml to define the build pipeline.

Create a new file named .drone.yml in the root of your Hugo project and add the following content as a starting point:

kind: pipeline
type: docker
name: default

steps:
  - name: Build with Hugo
    image: ghcr.io/andrewbeaton/hugo-drone:latest
    pull: always
    commands:
      - echo "Checking Hugo version."
      - hugo version
      - cd /drone/src/hugo/
      - hugo --environment production --verbose --debug 
      - ls -al /drone/src/hugo/public

This configuration instructs Drone to use the andrewbeaton/hugo-drone image and execute the hugo command for production to build your Hugo site. I like to enable verbose and debug output to help with problem-solving, and I also output the current version of Hugo with each build.

Step 5: Building and Deploying with Drone

Now that everything is set up, you can build and deploy your Hugo site with Drone.

Commit and push the changes you made to your .drone.yml file. The Drone pipeline will automatically trigger, building your Hugo site.

Take a look at some of my other posts for examples on how to deploy to a web server or Cloudflare Pages.

Summary

The andrewbeaton/hugo-drone Docker image simplifies the process of building Hugo sites by providing a preconfigured environment. By following the steps outlined in this blog post, you can use this image to automate your Hugo builds, saving time and effort in the development and deployment process.