Due to some unexpected downtime with my current web host, and a bit of spare time on my hands, I thought I would give a go at configuring Drone to deploy to Cloudflare Pages.

A very basic description of Cloudflare Pages, is that it’s a platform that makes it easy to create and host websites whilst Cloudflare takes care of the more technical side of website hosting. For a more technical overview, take a look at the official documentation.

For my use case, as I use Hugo to generate all my static website files, I can just use Cloudflare Pages to host the content. With my domain name already proxying through Cloudflare, everything is now all handled in one place, and so far, it all just works.

So let’s cover off what’s needed to get Drone to deploy your Hugo (or static files) to Cloudflare Pages.

Prerequisites

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

• A working Hugo website:
  • Set up a Hugo website.
• A Git repository:
  • Host your Hugo website’s code in a Gitea / Git repository.
• A working Drone instance:
  • Your Drone instance should be working correctly with your Gitea repository.
• A Cloudflare account:
  • Your Cloudflare account is running, and you have configured both a new Cloudflare Page and have a Cloudflare Workers API set up.

A Drone Build Step for Cloudflare Pages

This guide follows on from my previous post where I walk through setting up a full drone pipeline with Test, Staging and Production builds and deployments. To catch up have a look at Creating a Full Drone Pipeline with Gitea and Drone

The following is a step that will build static content located in /drone/src//. Deploy to a Cloudflare Page defined by , and a Drone secret called <CLOUDFLARE_API_TOKEN> containing a Cloudflare API token.

- name: Build Node.js
    image: node:latest
    commands: 
      - npm install npm@latest -g 
      - mkdir -p dist
      - cp -R /drone/src/<your static files location>/* dist/ 

  - name: Deploy to Cloudflare Pages
    image: node:latest
    environment:
      CLOUDFLARE_API_TOKEN:
        from_secret: CLOUDFLARE_API_TOKEN
    commands: 
      - npm install wrangler --save-dev  
      - cd /drone/src/dist/
      - npx wrangler pages deploy /drone/src/dist --project-name "<project>" --env production --branch main --commit-dirty=true

There are a number of Docker images out there using Wrangler to deploy to Cloudflare. Unfortunately they all seem to use the previous version of the Cloudflare API which will deprecated shortly. So I went down the route of building Wrangler and NodeJS directly.

Do get in touch if you find a more recent Docker image for me to try.

A Drone Pipeline for Cloudflare Pages

This is a direct copy of my current production build pipeline. This has added debugging information that I find useful whilst making changes.

---
kind: pipeline
type: docker
name: "Production Environment"

trigger:
  branch: 
    - main 
  event:
    include:
      - push

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 --environment production --verbose --debug 
      - ls -al /drone/src/hugo/public

  - name: Build Node.js
    image: node:latest
    commands:
      - ls -la /drone/src/
      - npm install npm@latest -g
      - pwd
      - mkdir -p dist
      - cp -R /drone/src/hugo/public/* dist/
      - ls -la dist/

  - name: Deploy to Cloudflare Pages
    image: node:latest
    environment:
      CLOUDFLARE_API_TOKEN:
        from_secret: CLOUDFLARE_API_TOKEN
    commands:
      - ls -la /drone/src/
      - npm install wrangler --save-dev 
      - npx wrangler --version
      - cd /drone/src/dist/
      - npx wrangler pages deploy /drone/src/dist --project-name "<project-name>" --env production --branch main --commit-message "Drone Production Build" --commit-dirty=true

Summary

Once deployed, a new Deployment will be available for you in your Cloudflare Pages area that can be accessed either by the temporary preview deployment domain or your preview alias project domain.

Once happy you can now set up a custom domain to point to the new Page.

Although a few extra steps than an existing Docker Cloudflare setup, this method does allow you to clearly see what’s going on and debug any issues should they happen.

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:

Cloudflare Workers Gitea Drone Hugo