Pages Git Integration — Auto Deploy from GitHub/GitLab

In this tutorial, you'll learn about Pages Git Integration. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

This tutorial explains how Cloudflare Pages connects to your GitHub or GitLab repositories to automatically build and deploy your site every time you push code. Automated deployments reduce human error, speed up release cycles, and ensure production always matches the latest commit. The DodaTech documentation site uses this workflow to publish updates within seconds of merging a Pull Request.

How Git Integration Works

When you connect a Git Repository to Cloudflare Pages, it registers a Webhook on your provider. Each push event triggers a new build on Cloudflare's infrastructure. The build output is deployed to the global edge network.

flowchart LR
  A[Developer pushes code] --> B["GitHub / GitLab webhook"]
  B --> C[Cloudflare Pages build]
  C --> D[Build succeeds?]
  D -->|Yes| E[Deploy to edge]
  D -->|No| F[Send failure notification]
  E --> G[Production live]
  style E fill:#f90,color:#fff
  style C fill:#f90,color:#fff

Connecting a Repository

You authorize Cloudflare Pages to access your repositories through OAuth. Once connected, you select the Repository and branch for production deployments.

// Simulate the webhook payload Cloudflare receives
const webhookPayload = {
  ref: 'refs/heads/main',
  commits: [
    {
      id: 'a1b2c3d4e5f6',
      message: 'Update homepage styling',
      timestamp: '2026-06-23T10:30:00Z'
    }
  ]
};

console.log('Received push for branch:', webhookPayload.ref.split('/').pop());
console.log('Commit message:', webhookPayload.commits[0].message);
// Expected output:
// Received push for branch: main
// Commit message: Update homepage styling

Configuring Build Settings

Cloudflare Pages detects frameworks like Hugo, Next.js, and SvelteKit automatically. You can override the build command and output directory in the dashboard.

// Detect framework from package.json
const packageJson = {
  dependencies: {
    next: '14.0.0'
  },
  scripts: {
    build: 'next build'
  }
};

function detectFramework(pkg) {
  if (pkg.dependencies.next) return 'Next.js';
  if (pkg.dependencies.svelte) return 'Svelte';
  if (pkg.dependencies.vue) return 'Vue';
  return 'Static';
}

console.log('Detected framework:', detectFramework(packageJson));
// Expected output: Detected framework: Next.js

// Build command auto-detection logic
const frameworkConfigs = {
  'Next.js': { build: 'next build', output: 'out' },
  'Hugo': { build: 'hugo --gc --minify', output: 'public' },
  'SvelteKit': { build: 'npm run build', output: '.svelte-kit/cloudflare' }
};

function getBuildConfig(framework) {
  return frameworkConfigs[framework] || { build: 'npm run build', output: '.' };
}

console.log(getBuildConfig('Hugo'));
// Expected output: { build: 'hugo --gc --minify', output: 'public' }

Environment Variables

You can set environment variables per environment (production, preview). These are injected during the build process.

# Build-time environment variables
NODE_VERSION=18
SITE_URL=https://example.com
API_KEY=your-api-key

FAQ

Practice Questions

1. What event triggers a new deployment in Cloudflare Pages?
2. How does Cloudflare Pages detect which framework your project uses?
3. What happens to the live site when a new build fails?

Summary

Cloudflare Pages Git integration automates the entire deployment pipeline. Connect your Repository, configure the build settings, and every push deploys your site to the edge network automatically.

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro — security-first tools for the modern web.