About

This guide assumes that you’re already familiar with using Cloudflare Pages and the Wrangler CLI. Please refer the official Cloudflare Pages documentation for more info.

Getting Started

To get started you will need to first create a new Cloudflare Pages project.

shell

$ wrangler pages project create PROJECT_NAME

This will create a new Cloudflare Pages project that you can deploy to, which can be done in two different ways.

The setup Zine action

Zine has an official GitHub action to obtain Zine in a GitHub Actions runner which can be found here.

In the example below we will use it to have the GitHub Actions runner build your Zine website before deploying to GitHub Pages.

Below you will also find a guide on how to deploy to Clouldflare Pages directly from your computer.

1. Using GitHub Actions

This method uses GitHub Actions to build the site and then uploads the output to Cloudflare Pages (instead of GitHub Pages).

This section assumes that you’re already familiar with GitHub Actions. Please refer the official GitHub Actions documentation for more info.

Enabling GitHub Pages

To make this work you will need to enable GitHub Pages and set it to deploy from GitHub Actions.

1. Navigate to the Settings page of your website’s repo
2. Select the “Pages” tab from the vertical menu on the left of the page.
3. In the GitHub Pages settings page select as source of deployment “GitHub Actions”.

After you select the right dropdown menu entry, GitHub will immediately save your changes.

Obtaining credentials from Cloudflare

Once we have created our Cloudflare Pages project, we will need a few things from Cloudflare:

• Your Cloudflare Account ID
• An API Token
• The project name created in the previous command

Add your API key and account ID as a GitHub Actions secrets. In the example below, this would be set to CLOUDFLARE_API_TOKEN and CLOUDFLARE_ACCOUNT_ID.

.github/workflows/cf-pages.yml

name: cloudflare pages

on:
  push:
    branches:
      - main  # Set a branch to deploy
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0  # Change if you need git info

      - name: Setup Zine
        uses: kristoff-it/setup-zine@v1
        with:
          version: v0.10.2
          
      - name: Build
        run: zine release
          
      - name: Deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy public/ --project-name PROJECT_NAME
          # Optional: Adds GitHub deployments support
          githubToken: ${{ secrets.GITHUB_TOKEN }}
          

Reference: https://github.com/cloudflare/wrangler-action?tab=readme-ov-file#deploy-your-pages-site-production--preview

2. Build locally and deploy directly with wrangler

To publish from your computer you will need fist to build your Zine site, and then upload the output to Cloudflare Pages using wrangler.

shell

$ zine release
$ wrangler pages deploy public/ --project-name PROJECT_NAME