Cloudflare Pages

Cloudflare Pages is Cloudflare’s platform for hosting static sites connected to a Git repository: every commit on the production branch triggers a build and a deployment.

In this guide we are going to deploy a static site that reads Content Island content at build time, and automate the rebuild with Content Island’s Custom HTTP Webhook: when you publish content, Content Island calls Cloudflare’s deploy hook and the site regenerates on its own.

What we are setting up

The full flow has four pieces:

1. You publish content in Content Island.
2. Content Island calls the Custom HTTP Webhook we are about to configure.
3. That URL is a Cloudflare Pages Deploy Hook, which triggers a new build.
4. The build reads the content again and deploys the new version.

Static with rebuild, or dynamic snapshot?

Here we rebuild the whole site on every publish: the classic SSG model, simple and with the best possible performance, at the cost of waiting for the build. If you would rather have content update without a rebuild, take a look at Dynamic Snapshots, where the same Custom HTTP Webhook calls an endpoint in your application instead of a deploy hook.

Before you begin

• Your project in a Git repository (GitHub or GitLab), with a build command that generates the static site and reads the content through one of Content Island’s static snapshot approaches: exporting the snapshot with content-island export as a step before the build, or reading it from snapshotPath if you commit it to the repository.
• A Cloudflare account.
• The access token of your Content Island project, which the build needs in order to export or read the content.

Step 1 · Create the project in Cloudflare Pages

1. In the Cloudflare dashboard, go to Compute → Workers & Pages and click Create application.

   

2. On the Make something new screen, scroll to the bottom and click Continue to Pages. This is the classic Pages workflow, the one that comes with the deploy hooks we are going to use later.

   

3. On Get started, choose Import an existing Git repository.

   

   Tip

   The other option, Drag and drop your files, uploads an already-built folder from your machine. It does not work for us here: with no repository there is no build in Cloudflare and therefore nothing for a deploy hook to re-trigger.

4. Select your GitHub account, pick the project repository and click Begin setup. If your repository is not listed, use the Cloudflare Pages app on GitHub link to grant access to it.

   

Step 2 · Configure the build

1. Cloudflare shows you the Build settings section, empty. Leave Framework preset as None if you would rather set the commands yourself, or pick your framework so it fills them in for you.

   

2. Fill in your project’s build command and output directory:

   • Build command: npm run build
   • Build output directory: dist
   

   Caution

   dist is the value in the screenshot, the default output for Astro and Vite. Adjust it to your project’s: static Next.js exports to out and Nuxt to .output/public. The wrong directory means an empty deployment or a 404.

3. Expand Environment variables (advanced) and add the variables your build needs. At a minimum, the access token the client uses to read Content Island content.

   

   There are two in the screenshot: CONTENT_ISLAND_ACCESS_TOKEN, which every project needs, and SNAPSHOT_REFRESH_SECRET, which belongs to the example project. Use whatever names your code expects.

4. Click Save and Deploy. Cloudflare clones the repository, runs the build and publishes the site on a *.pages.dev URL.

Step 3 · Create the Deploy Hook in Cloudflare

A deploy hook is a secret URL that, on receiving a POST, triggers a new build of a specific branch. It is the piece we are going to hand over to Content Island.

1. In your Pages project, open the Settings tab, find the Build block and, under Deploy Hooks, click the + button.

   

2. Give it a name that tells you where the call comes from — content-island-webhook, for example — and pick the branch you want to build, usually main. Click Save.

   

3. Cloudflare shows you the hook URL. Copy it with Click to copy: you are going to paste it into Content Island in the next step.

   

   Treat the URL as a password

   The deploy hook URL carries no authentication beyond itself: anyone holding it can trigger builds in your project. Do not commit it to the repository or paste it into an issue. If it leaks, delete the hook and create a new one.

Step 4 · Connect the Custom HTTP Webhook in Content Island

1. Open your project in Content Island, go to the Webhook tab, click Add New Webhook and choose Custom HTTP.

   

2. Fill in the form:

   • Name: an alias to recognize it by, for example Custom Webhook Cloudflare.
   • Destination URL: the deploy hook URL you copied in the previous step.
   • Headers: leave them empty. The Cloudflare deploy hook authenticates with the URL itself, and Content Island sends a POST with no body — exactly what it expects.

   Click Save.

   

Step 5 · Check that it works

1. Without leaving the webhook, click Send Test. Content Island fires the request there and then, so you can check the result without publishing anything.

   

2. Go back to your Cloudflare Pages project, to the Deployments tab: you will see a new deployment, just started and marked with the cloud icon that says a deploy hook triggered it rather than a commit.

   

3. The definitive test is the real one: change anything in the Content tab and publish it. Content Island calls the hook, Cloudflare rebuilds the site and, once the build finishes, your site shows the new content without you touching a thing.

Avoid an API call per request with snapshot mode

Export your project’s content to a snapshot and have the client read it in snapshot mode: the build resolves every read from the local file, with no API call for each one.

Why the Custom HTTP Webhook and not the GitHub one

You can achieve the same thing with the GitHub webhook, but you take the long way round: Content Island fires a repository_dispatch, a GitHub Action listens for that event, and that Action curls the deploy hook. Three hops, a GitHub token with write permissions and a workflow to maintain, all to end up making a single HTTP request.

The Custom HTTP Webhook calls the Cloudflare URL directly. No middlemen and no tokens involved.

References

• Content Island Webhook tab · Snapshot mode · Dynamic Snapshots
• Cloudflare Pages · Deploy hooks
• Cloudflare Pages · Build configuration