Guides

How to Set Up a CDN for Your Website: A Complete Beginner's Guide

Muhammad SaadApril 17, 20268 min read
How to Set Up a CDN for Your Website: A Complete Beginner's Guide

If your website serves visitors from different geographic locations, a Content Delivery Network (CDN) can dramatically improve load times. Learning how to set up a CDN for your website is one of the highest-impact performance optimizations you can make — often reducing page load times by 40-60% for international visitors.

In this guide, we'll walk through what a CDN is, why it matters, and exactly how to set one up step by step.

What Is a CDN and Why Does Your Website Need One?

A CDN is a network of servers distributed across multiple geographic locations (called edge servers or Points of Presence). When a visitor requests your website, the CDN serves the content from the server closest to them rather than from your origin server, which might be thousands of miles away.

Here's what that means in practice:

  • A visitor in Tokyo loads your site from a nearby Asian server instead of your US-based VPS
  • Static assets (images, CSS, JavaScript) are cached globally, reducing your origin server's load
  • Your site stays faster even during traffic spikes because the CDN absorbs the demand

Without a CDN, every visitor — whether they're next door or across the globe — hits your origin server directly. As your traffic grows, this creates both performance bottlenecks and scaling challenges that a CDN elegantly solves.

Choosing the Right CDN Provider

Before you set up a CDN, you need to pick a provider. Here are the most popular options for different budgets:

Free Tier Options

Provider Free Tier Best For
Cloudflare Unlimited bandwidth Most websites, best free option
BunnyCDN 14-day trial Pay-as-you-go after trial

Paid Options

Provider Starting Price Best For
BunnyCDN ~$1/month (per-GB pricing) Budget-friendly, great performance
KeyCDN $0.04/GB Developer-friendly APIs
AWS CloudFront Pay-per-use Enterprise, AWS ecosystem
Fastly Pay-per-use Real-time config, edge computing

For most small-to-medium websites, Cloudflare's free tier is the best starting point. If you need more control or a traditional pull CDN, BunnyCDN offers unbeatable value.

How to Set Up a CDN: Step-by-Step Guide

Option 1: Setting Up Cloudflare (Recommended for Beginners)

Cloudflare acts as a reverse proxy, meaning all traffic flows through their network. This provides both CDN and security benefits.

Step 1: Create a Cloudflare Account

Sign up at cloudflare.com and click "Add a Site." Enter your domain name.

Step 2: Update Your Nameservers

Cloudflare will scan your existing DNS records and ask you to change your domain's nameservers. Log into your domain registrar and replace the existing nameservers with the ones Cloudflare provides:

ns1.cloudflare.com
ns2.cloudflare.com

Note: DNS propagation can take up to 24 hours, though it's usually much faster.

Step 3: Configure SSL/TLS Settings

In the Cloudflare dashboard, go to SSL/TLS and set the encryption mode:

  • Full (Strict) — Best option if your origin server has a valid SSL certificate
  • Full — If your origin has a self-signed certificate
  • Flexible — Only if your origin has no SSL (not recommended)

Step 4: Set Up Caching Rules

Navigate to Caching > Configuration and set:

Browser Cache TTL: 4 hours (minimum)
Caching Level: Standard

For static assets, create a Page Rule:

URL pattern: yourdomain.com/wp-content/*
Setting: Cache Level → Cache Everything
Edge Cache TTL: 1 month

Step 5: Enable Performance Features

Under Speed > Optimization, enable:

  • Auto Minify (JavaScript, CSS, HTML)
  • Brotli compression
  • Early Hints
  • Rocket Loader (test this — it can break some JavaScript)

Option 2: Setting Up a Traditional Pull CDN (BunnyCDN Example)

A pull CDN works differently — it creates a separate CDN URL that you configure your application to use for static assets.

Step 1: Create a Pull Zone

After signing up at bunny.net:

  1. Go to CDN > Pull Zones
  2. Click Add Pull Zone
  3. Enter a name (e.g., mysite-cdn)
  4. Set your origin URL: https://yourdomain.com
  5. Choose your pricing tier and regions

Step 2: Configure Your Origin Settings

In the Pull Zone settings:

Origin URL: https://yourdomain.com
Origin Host Header: yourdomain.com
Forward Host Header: disabled

Step 3: Set Up a Custom CDN Hostname

Instead of using mysite-cdn.b-cdn.net, set up a custom hostname:

  1. In BunnyCDN, add a custom hostname: cdn.yourdomain.com
  2. Add a CNAME record in your DNS:
Type: CNAME
Name: cdn
Value: mysite-cdn.b-cdn.net
TTL: 3600
  1. Enable the free SSL certificate for your custom hostname in BunnyCDN

Step 4: Update Your Application

Configure your application to serve static assets from the CDN URL.

For WordPress, use a plugin like WP Super Cache or W3 Total Cache:

CDN URL: https://cdn.yourdomain.com

For Laravel, update your .env:

ASSET_URL=https://cdn.yourdomain.com

Then use the asset() helper in your Blade templates:

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<img src="{{ asset('images/logo.png') }}" alt="set up a CDN for faster image delivery">

For static HTML sites, you can use a simple find-and-replace or configure your build tool to prefix asset URLs.

Verifying Your CDN Is Working

After setup, verify everything is working correctly:

Check HTTP Headers:

curl -I https://yourdomain.com/style.css

Look for CDN-specific headers:

# Cloudflare
cf-cache-status: HIT
cf-ray: 7a8b9c0d1e2f3g

# BunnyCDN
CDN-Cache: HIT
X-Pull-Zone: mysite-cdn

Test from Different Locations:

Use tools like:

If you're caching correctly, you should see a significant improvement in Time to First Byte (TTFB) for visitors far from your origin server.

CDN Configuration Best Practices

Cache Headers Matter

Your origin server needs to send correct cache headers. Make sure your web server configuration includes appropriate directives for static files:

# Nginx configuration for static assets
location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff2|svg)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}

This tells both the CDN and browsers to cache static assets aggressively. If you're deploying application updates frequently, consider using a staging environment to test cache-busting strategies before going live.

Purging the Cache

When you update your site, you may need to purge the CDN cache:

Cloudflare:

# Purge everything
curl -X POST "https://api.cloudflare.com/client/v4/zones/ZONE_ID/purge_cache" \
  -H "Authorization: Bearer API_TOKEN" \
  -H "Content-Type: application/json" \
  --data '{"purge_everything":true}'

BunnyCDN:

curl -X POST "https://api.bunny.net/pullzone/ZONE_ID/purgeCache" \
  -H "AccessKey: YOUR_API_KEY"

For production deployments, integrate cache purging into your deployment pipeline so it happens automatically after each release.

Handle Dynamic Content Correctly

Not everything should be cached. Make sure your CDN bypasses caching for:

  • Admin panels (/admin/*, /wp-admin/*)
  • API endpoints (/api/*)
  • User-specific pages (dashboards, account pages)
  • POST/PUT/DELETE requests

In Cloudflare, create a Page Rule:

URL: yourdomain.com/admin/*
Setting: Cache Level → Bypass

Common CDN Setup Mistakes to Avoid

  1. Caching authenticated pages — Users seeing each other's data is a security nightmare. Always bypass cache for logged-in user pages.
  2. Ignoring mixed content — If your origin serves HTTP but the CDN serves HTTPS, you'll get mixed content errors. Ensure your origin uses HTTPS.
  3. Not testing after purging — After clearing the cache, test your site thoroughly. Missing assets or broken layouts often surface only after a full purge.
  4. Setting TTLs too high for frequently changing content — A 30-day cache TTL works great for images but not for your homepage HTML if you update content daily.
  5. Forgetting to update hardcoded URLs — If you switch to a CDN URL for assets, make sure all references are updated, including in email templates and third-party integrations.

Frequently Asked Questions

How much does a CDN cost?

Cloudflare offers a robust free tier suitable for most websites. Paid CDNs like BunnyCDN start at approximately $1/month with per-GB pricing. Enterprise solutions like AWS CloudFront and Fastly charge based on usage, typically $0.02-0.12 per GB.

Will a CDN help with SEO?

Yes. Page speed is a Google ranking factor, and a CDN directly improves load times for visitors worldwide. Faster sites also have lower bounce rates, which positively impacts SEO signals.

Can I use a CDN with any hosting provider?

Absolutely. CDNs work with any hosting setup — shared hosting, VPS, dedicated servers, or cloud platforms. Cloudflare (reverse proxy) works by changing nameservers, while pull CDNs work by pulling content from your origin regardless of your hosting provider.

Do I need a CDN if my audience is in one country?

Even for single-country audiences, a CDN provides benefits: reduced server load, DDoS protection (especially Cloudflare), faster delivery of static assets, and better handling of traffic spikes. The performance gains may be smaller, but the reliability benefits remain significant.

Conclusion

Setting up a CDN is one of the most impactful performance improvements you can make for your website. Whether you choose Cloudflare's free reverse proxy approach or a traditional pull CDN like BunnyCDN, the result is the same: faster load times, reduced server load, and happier visitors.

The key is to start simple — Cloudflare's free tier takes about 15 minutes to set up and delivers immediate benefits. As your site grows, you can explore more advanced configurations and providers.

Ready to build a fast, reliable website? DeployBase hosting pairs perfectly with any CDN, giving you a solid origin server with the performance headroom to scale. Combine our optimized VPS hosting with a CDN and watch your site fly.

Share this article

Muhammad Saad

Muhammad Saad

DeployBase Team

Explore DeployBase

Related features and resources for this topic

Ready to Get Started?

Join thousands of developers who trust DeployBase for their hosting needs.