Skip to content
Learni
View all tutorials
Cloud

How to Set Up Cloudflare CDN in 2026

12 minBEGINNER
DéploiementPerformance WebCloudflareCDN
Lire en français

Introduction

A CDN (Content Delivery Network) is a globally distributed network of servers that caches your content close to end users, reducing latency and improving performance. In 2026, with growing mobile and international web traffic, a CDN like Cloudflare is essential for any web app.

Cloudflare offers a free CDN, DDoS protection, and easy deployment via CLI. This beginner tutorial guides you through deploying a static site on Cloudflare Pages, which automatically enables a global edge CDN across 300+ data centers.

Why is it crucial? Without a CDN, a site hosted in Paris takes 500ms to load for a user in Sydney. With Cloudflare, it drops to 50ms via caching. You'll learn to create a project, configure it, deploy, and test. Result: an ultra-fast, scalable site ready for production.

Prerequisites

  • Free account on Cloudflare
  • Node.js 18+ installed
  • Git installed
  • A domain (optional, free subdomain via Cloudflare)
  • Code editor (VS Code recommended)

Install Wrangler CLI

terminal
npm install -g wrangler
wrangler --version

Wrangler is Cloudflare's official CLI for deploying Pages and Workers. This command installs it globally and checks the version (must be 3.x+). Avoid older versions for 2026 compatibility.

Initialize the Project

Create a folder for your static site. We'll deploy a simple example with HTML, CSS, and JS to demonstrate CDN caching.

wrangler.toml Configuration

wrangler.toml
[pages]
# Nom du projet Pages
name = "mon-cdn-site"

# Dossier de build/output (votre site statique ici)
pages_build_output_dir = "./public"

# Compatibilité avec les anciennes versions
compatibility_date = "2026-01-01"

# Variables d'environnement (optionnel)
[vars]
API_URL = "https://api.example.com"

This TOML file configures your Cloudflare Pages project. pages_build_output_dir points to the public folder containing index.html. The compatibility_date ensures 2026 features. Place it at the project root.

Main HTML Page

public/index.html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mon Site CDN</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <h1>Bienvenue sur mon site CDN Cloudflare !</h1>
  <p id="content">Chargement...</p>
  <button onclick="loadData()">Charger données via API</button>
  <img src="/image.jpg" alt="Image CDN" id="image">
  <script src="/script.js"></script>
</body>
</html>

Complete homepage with links to CSS/JS. The button triggers a fetch to test the CDN proxy. Also create public/style.css, public/script.js, and an image public/image.jpg (download a free one).

CSS File

public/style.css
body {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

h1 {
  text-align: center;
}

button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background: #ff6b6b;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}

Modern styles for the site. Everything is served via CDN with automatic caching. Gradients and responsive design ensure a pro look on mobile.

JavaScript Script

public/script.js
async function loadData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const data = await response.json();
    document.getElementById('content').textContent = data.title;
    console.log('Données chargées via CDN proxy');
  } catch (error) {
    document.getElementById('content').textContent = 'Erreur de chargement';
    console.error(error);
  }
}

// Précharger image pour tester cache
window.onload = () => {
  document.getElementById('image').src = '/image.jpg?t=' + Date.now();
  loadData();
};

Async JS to fetch an external API (proxied by CDN). Tests edge caching. window.onload preloads the image. Fully functional with error handling.

Deploy to Pages

terminal
cd mon-projet-cdn
npx wrangler pages project create mon-cdn-site --production
npx wrangler pages deploy public --project-name mon-cdn-site

Creates and deploys the project to Cloudflare Pages. CDN activates instantly. Provided URL: https://mon-cdn-site.pages.dev. Use --production for production.

Configure DNS

In the Cloudflare dashboard:

  1. Add your domain.
  2. Change nameservers to Cloudflare's.
  3. Create a CNAME: www → mon-cdn-site.pages.dev (Proxy enabled for CDN).
Propagation: 5-30min. Test with dig www.yourdomain.com.

Best Practices

  • Enable Polish: Auto image compression/WebP in dashboard > Speed > Optimization.
  • Cache Rules: Page Rules for /api/ no-cache, /static/ cache everything.
  • HTTPS only: Required for CDN security.
  • Analytics: Enable free Web Analytics for TTFB <50ms metrics.
  • CI/CD: Integrate GitHub Actions with wrangler for auto-deploys.

Common Errors to Avoid

  • Forgetting pages_build_output_dir: Deployment fails (404).
  • DNS without orange proxy: No CDN, just DNS.
  • Heavy images without Polish: High latency.
  • Fetch without mode: 'cors': CORS errors on external APIs.

Next Steps

Master Workers for edge computing: Cloudflare Workers Docs. Optimize with APO for WordPress. Check out our Learni Cloud training courses for advanced DevOps and enterprise CDN.

How to Set Up Cloudflare CDN in 2026 | Guide | Learni