Cloudflare Pages

Overview

Tiers

It supports 3 tiers with a generous free tier.

Cloudflare-pages-tiers.png

Configure Cloudflare Pages

  1. Navigate to the dashboard, Workers and Pages
  2. Select Pages
    cloudflare-pages-1.png
  3. Click on "Connect to Git" button.
  4. Connect to GitHub or GitLab.
    • This guide will proceed with GitHub path. But GitLab shouldn't be much different. cloudflare-pages-connectGithHub.png
  5. After connecting your GitHub account, you will be need to choose the repo.
    • If the repo doesn't appear in the dropdown menu, you may need to give access to Cloudflare Pages app.
    • It is possible to give the app access to All repositories or selected repos.
      cloudflare-pages-selectGitHubrepo.png
  6. Set build settings.
    • According to the project Framework, you need to provide the Build Command.
    • For the current example which deploys Digital Garden template, the configuration is as below.
      cloudflare-pages-buildsettings.png
    • The build may fail due to the default NODE version is 12.
      • [Recommended] Set build system version to 2. It is under:
        • Workers and Pages Overview in the dashboard
        • Choose your deployed, or to be deployed, application
        • Navigate to Settings
        • Build and deployments
        • Build system version
      • You can either set an environment variable NODE_VERSION
        • Workers and Pages Overview in the dashboard
        • Choose your deployed, or to be deployed, application
        • Navigate to Settings
        • Environment variables
        • Edit variables
        • Add variable: NODE_VERSION = 18.16

Guides