In the previous posts, I covered how to set up Drone IO with either GitHub or Gitea, and deploy them to a server using SCP. This short post will cover how to set up Drone to deploy to an FTP server.

This is the setup that I’m using for both my staging website and my production one (This one!).

Hugo does come with a built-in server for viewing your site locally but having a staging site gives me more confidence that everything will work correctly when deployed to my main website, especially as the whole process is automated.

Prerequisites

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

  • A working Hugo website:
    • Set up a Hugo website locally.
  • A Git repository:
    • Host your Hugo website’s code in a Git repository.
  • An FTP server
    • An FTP server configured with username and password, a valid user home directory and web content loaded from that location.

Step 1: Configure the Drone.io Pipeline

  1. In your websites Git 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 to FTP server
    image: cschlosser/drone-ftps
    environment:
        FTP_USERNAME:
            from_secret: ftp_username
        FTP_PASSWORD:
            from_secret: ftp_password 
        PLUGIN_SECURE: false
        PLUGIN_VERIFY: false
        PLUGIN_HOSTNAME: ftp://host:21
        PLUGIN_SRC_DIR: /hugo/public/
        PLUGIN_DEST_DIR: /home/ftp_username
        PLUGIN_AUTO_CONFIRM: true
        PLUGIN_DEBUG: true 
        PLUGIN_ONLY_NEWER: true

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

  1. Adjust the PLUGIN_HOSTNAME and PLUGIN_DEST_DIR fields to match your remote server details and deployment directory.

  2. Add secret for your remote server’s username and password by going to your Drone.io repository settings and adding secrets with the keys ftp_username, ftp_password and the corresponding values.

Step 2: Trigger the Pipeline

  1. Push your updated .drone.yml file to your Git 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 Drone with an FTP server. Now, whenever you push changes to your Git repository, Drone.io will automatically build your Hugo website and deploy it to your remote FTP 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