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.
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
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: