Cloudflare CDN Complete Tutorial: 5 Steps from Registration to Advanced Setup

Want to boost your website speed by 50% or more while getting free DDoS protection and SSL certificates? Cloudflare CDN is the most widely used CDN service globally, with over 20% of websites accelerated through Cloudflare. This article will guide you step-by-step from account registration to advanced setup—even technical beginners can complete the configuration in 30 minutes.

In a hurry to set up Cloudflare? If you'd like professional assistance, you can schedule a free consultation and we'll help you complete the setup quickly.

---

What is Cloudflare?

Cloudflare is one of the world's largest CDN (Content Delivery Network) providers, founded in 2009, with edge nodes deployed in over 300 cities globally. Beyond CDN acceleration, Cloudflare also provides DDoS protection, WAF (Web Application Firewall), free SSL certificates, and other security features.

To learn more about CDN basics and how they work, check out our complete guide.

Cloudflare's Core Advantages

Based on our experience helping clients implement Cloudflare, the main advantages include:

Advantage	Description
Completely Free Plan	Free tier includes CDN, SSL, basic DDoS protection
Simple Setup	No code changes needed, just switch DNS
Global Node Coverage	300+ cities, multiple PoP nodes in Taiwan
Automatic HTTPS	Free SSL certificate, one-click activation
Instant Effect	Usually takes effect within 5 minutes of setup

What's Included in the Free Plan?

Many people don't realize Cloudflare's free plan is quite comprehensive:

Included features:

• Unlimited CDN traffic (no bandwidth limits)
• Unlimited DDoS protection (including Layer 3/4/7)
• Universal SSL free certificate
• Basic caching functionality
• 5 Page Rules
• Basic WAF rules

Free tier limitations:

• Cannot use custom SSL certificates
• Advanced WAF rules require payment
• Image optimization features need Pro plan
• Priority customer support requires payment

To learn more about Cloudflare pricing and plan differences, check out our pricing guide.

---

5 Steps to Complete Cloudflare Setup

Step 1: Create a Cloudflare Account

1. Go to cloudflare.com
2. Click "Sign Up" to register
3. Enter your Email and password
4. Complete Email verification

Notes:

• We recommend using a company email for easier account management
• Password should be at least 12 characters with uppercase, lowercase, and numbers
• Enable two-factor authentication (2FA) for enhanced security

Step 2: Add Your Website

After logging in, click "Add a Site" to add your website:

1. Enter your website domain (e.g., example.com)
2. Select a plan (Free is fine to start)
3. Cloudflare will automatically scan existing DNS records
4. Verify that DNS records are correct

Common questions:

• Only enter the root domain, no need for www or https
• Free plan has no website quantity limit
• Subdomains are automatically included

Step 3: Configure DNS Records

Cloudflare will automatically import existing DNS records, but you need to verify:

Record Type	Name	Content	Proxy Status
A	@	Your server IP	On (orange cloud)
A	www	Your server IP	On (orange cloud)
CNAME	@	Your hostname	On (orange cloud)
MX	@	Mail server	Off (gray cloud)

Proxy Mode (orange cloud) vs DNS Only (gray cloud):

• Orange cloud (Proxied): Traffic passes through Cloudflare, enjoying CDN acceleration and security protection
• Gray cloud (DNS Only): Only uses DNS resolution, doesn't pass through Cloudflare

Recommended settings:

• Main website records (A, AAAA, CNAME) → Enable Proxy
• Mail-related (MX, SPF, DKIM) → Use DNS Only
• FTP, SSH, and other services → Use DNS Only

Step 4: Change DNS Servers

This is the most critical step. Cloudflare will provide two Nameservers:

Example:
alice.ns.cloudflare.com
bob.ns.cloudflare.com

You need to change Nameservers at your domain registrar (like GoDaddy, Namecheap, PChome):

1. Log into your domain registrar dashboard
2. Find DNS management or Nameserver settings
3. Change existing Nameservers to the two provided by Cloudflare
4. Save settings

Settings location by major registrars:

• GoDaddy: My Products → Domain → DNS → Manage Nameservers
• Namecheap: Domain List → Manage → Nameservers
• Gandi: Domain → Nameservers → External

Step 5: Wait for Activation and Verify

After DNS change, it usually takes 5 minutes to 24 hours to take effect (most within 1 hour).

Verification methods:

1. Cloudflare dashboard: Check if website status shows "Active"
2. Command line check:

   nslookup example.com
   # Should display Cloudflare IP
   

3. HTTP Header check:

   curl -I https://example.com
   # Should see cf-ray header
   

---

DNS Configuration Details

How Proxy Mode Works

When Proxy mode is enabled (orange cloud):

1. User queries your domain, DNS returns Cloudflare IP
2. User connects to nearest Cloudflare node
3. Cloudflare checks cache, returns directly if available
4. If no cache, Cloudflare fetches content from your Origin Server
5. Returns to user and caches for next use

Benefits:

• Hides real server IP, increasing security
• Enjoys CDN cache acceleration
• Gets DDoS protection
• Can use free SSL certificate

Subdomain Configuration Tips

For multiple subdomains, you can use wildcards:

Record Type	Name	Content	Description
A	*	Server IP	Matches all subdomains
A	api	API server IP	Specific subdomain
A	staging	Test server IP	Test environment

Note: Free plan wildcard SSL has limitations. If you need multi-level subdomains (like a.b.example.com), you'll need to upgrade to a paid plan.

---

SSL/TLS Configuration

Encryption Mode Selection

Cloudflare offers four SSL/TLS encryption modes:

Mode	Description	Recommended Use Case
Off	No encryption	Not recommended
Flexible	User to Cloudflare encrypted, Cloudflare to Origin unencrypted	Temporary solution when Origin has no SSL certificate
Full	End-to-end encryption, but doesn't verify Origin certificate	Origin has self-signed certificate
Full (Strict)	End-to-end encryption, verifies Origin certificate	Strongly recommended, most secure

Our recommendation: Always use Full (Strict) mode for end-to-end encryption. If your server doesn't have an SSL certificate, you can get one free using Cloudflare's Origin CA.

Free SSL Certificates

Cloudflare provides two types of free SSL certificates:

1. Universal SSL: Automatically issued for your domain, covers root domain and one level of subdomains
2. Origin CA: Installed on your server, establishes encrypted connection with Cloudflare

Enabling Universal SSL:

• Location: SSL/TLS → Edge Certificates
• Enabled by default, no additional setup needed
• Certificate valid for 3 months, auto-renews

Forcing HTTPS

To ensure all traffic uses HTTPS, enable these settings:

1. Always Use HTTPS: SSL/TLS → Edge Certificates → Always Use HTTPS → On
2. Automatic HTTPS Rewrites: SSL/TLS → Edge Certificates → Automatic HTTPS Rewrites → On
3. HSTS (advanced): SSL/TLS → Edge Certificates → HTTP Strict Transport Security

Stuck during setup? Schedule a free consultation and let us help you.

---

Cache Configuration Optimization

Cache Level Selection

Cloudflare offers three cache levels:

Level	Description	Use Case
No query string	Ignores URL parameters	Static websites
Ignore query string	Same URL with different parameters treated as identical	Most websites
Standard	Different URL parameters cached separately	Websites with more dynamic content

Settings location: Caching → Configuration → Caching Level

Browser Cache TTL

Browser Cache TTL determines how long browsers cache resources:

Resource Type	Recommended TTL
Images	1 year
CSS/JS	1 year (with versioning)
HTML	No cache or short time
API responses	No cache

Settings location: Caching → Configuration → Browser Cache TTL

Page Rules Configuration

Page Rules allow different caching rules for specific URL paths. Free plan has a 3-rule limit.

Common configuration examples:

1. Permanent cache for static resources

URL: *example.com/static/*
Settings: Cache Level → Cache Everything, Edge Cache TTL → 1 month

2. No cache for API paths

URL: *example.com/api/*
Settings: Cache Level → Bypass

3. No cache for login page

URL: *example.com/login*
Settings: Cache Level → Bypass, Security Level → High

Cache Purging Methods

When website content updates, you may need to purge cache:

1. Purge all cache: Caching → Configuration → Purge Everything
2. Purge specific URLs: Caching → Configuration → Custom Purge
3. Via API: Suitable for integration into CI/CD workflows

Recommendation: Avoid frequently purging all cache. Use specific URL purging or set appropriate cache headers instead.

---

Security Settings

Basic WAF Configuration

Web Application Firewall (WAF) can block common web attacks:

Protection included in free plan:

• OWASP Core Rule Set (basic)
• Cloudflare Managed Ruleset (basic)
• Rate Limiting (limited)

Settings location: Security → WAF

Recommended settings:

1. Set Security Level to Medium or High
2. Enable Challenge Passage: Set validity time after passing verification
3. Review Firewall Events: Regularly check blocked requests

Bot Protection

Cloudflare's Bot Fight Mode can identify and block malicious bots:

Settings location: Security → Bots → Bot Fight Mode → On

Notes:

• May accidentally block legitimate crawlers (like search engines)
• Recommend whitelisting Google, Bing, and other search engines
• Monitor Firewall Events to confirm no false positives

DDoS Protection

Cloudflare's DDoS protection is free and automatically enabled:

• Layer 3/4 protection: Automatically detects and blocks network layer attacks
• Layer 7 protection: Uses intelligent algorithms to identify abnormal requests
• Unmetered Mitigation: No additional charges regardless of attack size

To learn more about CDN and DDoS protection principles, check out our dedicated article.

---

Performance Optimization Settings

Auto Minify

Automatically compresses HTML, CSS, JavaScript to reduce file size:

Settings location: Speed → Optimization → Content Optimization → Auto Minify

Recommendation: Enable all (HTML, CSS, JavaScript)

Note: If your website uses complex JavaScript frameworks, test functionality after enabling.

Brotli Compression

Brotli is a more efficient compression algorithm than Gzip, reducing transfer by 15-25%:

Settings location: Speed → Optimization → Content Optimization → Brotli → On

Rocket Loader

Automatically optimizes JavaScript loading order to improve page load speed:

Settings location: Speed → Optimization → Content Optimization → Rocket Loader

Notes:

• May be incompatible with some JavaScript frameworks (like React, Vue SSR)
• Recommend thorough testing after enabling
• If issues occur, exclude specific scripts using data-cfasync="false"

Early Hints (HTTP 103)

Tells browsers in advance which resources to preload:

Settings location: Speed → Optimization → Content Optimization → Early Hints → On

Effect: Can reduce resource loading time by about 30%.

Argo Smart Routing (Paid)

Argo uses Cloudflare's private network backbone to find the fastest routing path:

• Average 30% performance improvement
• Cost: $0.10 per GB
• Suitable for latency-sensitive applications

Is it worth it? If your website's main users are in Taiwan but servers are in the US or Europe, Argo can significantly improve latency. But if servers are already in Asia, benefits are smaller.

---

Common Issues and Troubleshooting

Website Became Slower?

Possible causes and solutions:

1. Rocket Loader incompatibility

   • Disable Rocket Loader
   • Or add data-cfasync="false" to specific scripts

2. Improper cache settings

   • Verify static resources are properly cached
   • Check Cache-Control headers

3. Wrong SSL mode setting

   • Verify using Full (Strict) mode
   • Confirm Origin Server has correct SSL certificate

4. Slow Origin Server response

   • CDN can't improve Origin processing speed
   • Need to optimize backend code or database

SSL Certificate Errors

Common errors and solutions:

Error	Cause	Solution
ERR_SSL_VERSION_OR_CIPHER_MISMATCH	Wrong SSL mode setting	Verify SSL mode is correct
525 SSL Handshake Failed	Origin certificate issue	Install valid SSL certificate
526 Invalid SSL Certificate	Invalid Origin certificate	Use Cloudflare Origin CA
Mixed Content	Page mixes HTTP/HTTPS	Enable Automatic HTTPS Rewrites

Cache Not Working

Troubleshooting steps:

1. Verify Proxy is enabled: DNS record shows orange cloud

2. Check Cache Status: Use developer tools to view cf-cache-status header

   • HIT: Cache hit
   • MISS: Cache miss
   • DYNAMIC: Dynamic content not cached
   • BYPASS: Bypassed by rules

3. Check cache headers: Verify Origin Server isn't setting Cache-Control: no-cache

4. Wait for cache to build: First request is always MISS, need multiple requests

---

Is Cloudflare's Paid Plan Worth It?

Plan Comparison

Feature	Free	Pro ($20/month)	Business ($200/month)
CDN traffic	Unlimited	Unlimited	Unlimited
DDoS protection	✓	✓	✓
SSL certificate	Universal	Universal + custom	Universal + custom
WAF rules	Basic	Advanced	Complete
Image optimization	✗	✓ (Polish, Mirage)	✓
Page Rules	3	20	50
Customer support	Community	Email	Email + Chat
SLA	✗	✗	100%

When Should You Upgrade?

Recommended upgrade to Pro:

• Need image optimization features (Polish, Mirage)
• Need more Page Rules
• Need advanced WAF rules
• Want Email customer support

Recommended upgrade to Business:

• Need 100% SLA guarantee
• Need complete WAF rule set
• Need 24/7 customer support
• Have compliance requirements (like PCI-DSS)

To learn more about CDN pricing and plan selection, check out our pricing guide.

---

Integration with Other Services

WordPress + Cloudflare

WordPress users can install the official plugin for better integration:

1. Install Cloudflare official plugin
2. Link Cloudflare account
3. Enable Automatic Platform Optimization (APO)

APO effects:

• WordPress-specific cache optimization
• HTML pages can also be cached
• Cost: $5/month

E-commerce Website Considerations

E-commerce websites using Cloudflare need special attention:

1. Shopping cart pages: Use Page Rule to set Bypass Cache
2. Checkout flow: Ensure it's not cached
3. Member system: Dynamic content needs correct configuration
4. Payment callbacks: Verify IP whitelist settings

Using with Other CDNs

Cloudflare can work alongside other CDNs:

• Cloudflare in front: Primarily handles security protection and caching
• Professional CDN behind: For video streaming or large file distribution

Learn more about CDN vendor differences and selection.

---

Conclusion: Start Your Cloudflare Journey

After completing this article's setup, your website should now have:

• Global CDN acceleration active
• Free SSL certificate enabled
• Basic DDoS protection enabled
• Cache settings optimized

Next steps:

1. Use GTmetrix to test website speed
2. Monitor Cloudflare Analytics to understand traffic
3. Regularly review Firewall Events for security
4. Further optimize CDN settings (refer to CDN Settings Optimization Tutorial)

Want professional help with setup? Schedule CDN evaluation and we'll help optimize your website speed. CloudInsight has helped over 50 enterprises complete Cloudflare implementation, with an average website speed improvement of 45% or more.

---

FAQ

Is Cloudflare's Free Version Really Sufficient?

For most small to medium websites, Cloudflare's free version is sufficient. The free tier includes unlimited CDN traffic, DDoS protection, and SSL certificates—features that usually require payment with other CDNs. If you don't need advanced WAF rules, image optimization, or enterprise-level support, the free version will meet your needs.

Will Changing Nameservers Affect Email?

No, as long as MX records are correctly configured. Cloudflare will automatically import your existing DNS records, including MX records. However, note that MX records should use "DNS Only" mode (gray cloud), not Proxy.

Will Cloudflare Affect SEO?

Cloudflare has a positive impact on SEO. Faster website speed is a Google ranking factor, and using a CDN can improve Core Web Vitals scores. Cloudflare is search engine crawler-friendly and won't block normal indexing behavior.

Can I Use Just Cloudflare's DNS Without CDN?

Yes. Set all records to "DNS Only" (gray cloud) to only use Cloudflare's DNS service. Cloudflare DNS is one of the fastest public DNS services globally—valuable even without CDN features.

Can Cloudflare and AWS CloudFront Be Used Together?

Yes, but requires careful architecture planning. A common approach is having Cloudflare handle security protection and global CDN, while CloudFront focuses on AWS service integration. For detailed architecture design recommendations, schedule an architecture consultation.