Deploying Deno project to Cloudflare Pages using GitHub Actions

Cloudflare Pages is one of the best options for hosting static websites, primarily due to its robust Content Delivery Network (CDN) and cost-effective pricing, including a generous free tier. The platform delivers excellent performance and global reach. For many projects, integrating Cloudflare Pages with a GitHub repository allows for straightforward automated deployments: changes pushed to the repository trigger automatic builds and deployments.

However, Wrangler, Cloudflare’s official command-line interface (CLI), currently supports only NPM, PNPM, Yarn, and Bun. Making it harder to deploy Deno projects to Cloudflare Pages.

The solution might involve using Node’s package.json to enable Wrangler to build your project. However, if you prefer a pure Deno project, you can use GitHub Actions for automated deployments. This article demonstrates how to do that.

Disable automatic deployments

I assume you already have a GitHub repository connected to Cloudflare Workers & Pages.
If not, you can follow this guide.

• Navigate to your project in Workers & Pages.
• Open the project Settings.
• In “Branch Control” uncheck “Automatic Deployments” and set “Preview Branch” to “None”. Then click “Save”.

Get your Account ID

• Navigate to your projects in Workers & Pages.
• Copy your Account ID from Account details panel (should be visible on the right side).

Generate API Token

• In the Account details panel, directly below the Account ID, click Manage API tokens.
• Click “Create Token”.
• Find “Create Custom Token” and click button “Get started” located next to it.
• Fill “Token name” field as you like.
• In the Permissions section, set ‘Account’ to ‘Cloudflare Pages’ and select ‘Edit’ permissions.
• In Account Resources set your Account (optional).
• Click “Continue to summary” button. Then click “Create Token” button.
• Copy your new API Token.

Set Account ID and API Token as Secrets in repository

• Navigate to your repository in GitHub.
• Open the repository settings.
• Open “Secrets and variables” > “Actions”
• Click “New repository secret” button.
• Set name to CLOUDFLARE_ACCOUNT_ID, set value to your Account ID, and click “Add secret” button.
• Click “New repository secret” button again.
• Set name to CLOUDFLARE_API_TOKEN, set value to your API Token, and click “Add secret” button.
• Done. From now Secrets will be available in your workflow files.

GitHub Actions Workflow file

You need to create a workflow file in your repository.

.github/workflows/deploy.yml

The following code will install Deno, install dependencies, build your project, and deploy it to Cloudflare Pages.

name: Deploy to Cloudflare Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Build and Deploy
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Deno
        uses: denoland/setup-deno@v2
        with:
          deno-version: v2.x

      - name: Install Dependencies
        run: deno install --allow-scripts

      - name: Build Website
        run: deno task build

      - name: Install Wrangler
        run: deno install --global --allow-scripts npm:wrangler@latest

      - name: Deploy Website to Cloudflare
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy ./dist --project-name=awesome --branch=main --commit-dirty=true 

About the workflow file

• The workflow file is just an example. You need to adapt it to your needs.
• This workflow will be launched only if you push changes to the main branch. If your branch name is different, change it in the workflow file. You can also change the event that triggers the workflow.
• Change --project-name=awesome to your project name (the one you set in Cloudflare Pages).
• Install Dependencies step might be unnecessary. It depends on your project setup.
• Deno is used to install Wrangler globally and then cloudflare/wrangler-action will use it.
• Your build output directory might be different. In this example it is ./dist.
• --commit-dirty=true prevents Wrangler from building your project.