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.
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:
Visit the official Hugo website and download the appropriate binary for your operating system. Follow the installation instructions provided.
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.
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.
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.