Deploying a Static Frontend: Hosting and CDN Integration

Previously in this course, we explored Global Network and Edge Caching, where we defined the role of the CDN. Now that you understand how caching works at the edge, it’s time to move from theory to practice by deploying your first static frontend and connecting it to the Cloudflare network.

Hosting a Static Site: The First Principles

A "static site" consists of pre-built files—HTML, CSS, JavaScript, and images—that don't change based on user input or database queries. Because these files are identical for every visitor, they are the perfect candidates for a CDN.

To get your site live, you need two things:

1. An Origin Server: The actual server (or bucket) where your files live.
2. A DNS Record: A pointer in your Cloudflare dashboard that tells the internet where to find that origin.

When you toggle the "orange cloud" status, you are telling Cloudflare to sit in front of your origin, intercept incoming requests, and serve the cached files from their network instead of hitting your server every time.

Worked Example: Pointing Your Domain to an Origin

Assuming you have a simple index.html file hosted on a basic web server (like an Nginx instance or a storage bucket), follow these steps to hook it into your Cloudflare-managed domain.

1. Identify your Origin IP: If you are hosting on a VPS, identify its public IPv4 or IPv6 address.
2. Add the DNS Record: Log into your Cloudflare dashboard, go to DNS, and click Add record.
3. Configure the Record:
   • Type: A
   • Name: www (or @ for root)
   • IPv4 address: Your server's IP address.
   • Proxy status: Ensure this is set to Proxied (the orange cloud icon).

The Traffic Flow

The following diagram illustrates how the request moves from the client through the CDN to your infrastructure:

Flow diagram: User → Request Cloudflare CDN; Cloudflare CDN → Cache Miss Origin Server; Cloudflare CDN → Cache Hit User; Origin Server → Files CF

Verification: Testing Global Delivery

Once you've configured your DNS, you need to verify that Cloudflare is actually serving your content. Open your terminal and run the following command:

Bash
curl -I https://yourdomain.com

Look for the header cf-cache-status. If it says MISS on the first request and HIT on the second, your static site is successfully being served through the CDN. If you see cf-ray, that’s the unique identifier for your request as it traveled through the global network.

Hands-on Exercise

1. Create a file named test.html on your server with the text "Hello from the Origin."
2. Navigate to your domain in a browser.
3. Open Developer Tools (F12) -> Network tab.
4. Click on the request for test.html.
5. Confirm that the Server header is cloudflare and that the cf-cache-status header appears in the response headers.

Common Pitfalls

• DNS Propagation Delay: DNS changes don't always take effect instantly. If you don't see your changes, wait 60 seconds and try again, or use a tool like dig to check if your authoritative nameservers have updated.
• The "Proxy" Trap: If you leave the proxy status set to DNS Only (grey cloud), your origin IP is exposed to the public. Always keep the proxy enabled for production sites to ensure the CDN handles the traffic and hides your origin server's IP address.
• Incorrect SSL/TLS Mode: If you receive a "522 Connection Timed Out" or "525 SSL Handshake Failed" error, ensure your SSL/TLS setting in Cloudflare matches the security configuration of your origin server, as we discussed in Configuring SSL/TLS Settings.

Frequently Asked Questions

Q: Can I host a static site directly on Cloudflare? A: Yes, later in this course we will cover Cloudflare Pages, which is specifically designed for deploying static sites without managing your own origin server.

Q: Should I use an A record or a CNAME record? A: Use an A record if you have a static IP address for your server. Use a CNAME if your hosting provider gives you a hostname (e.g., my-site.hosting-provider.com).

Q: Does the CDN cache everything by default? A: No, Cloudflare caches specific file extensions (like .jpg, .css, .js) by default. It does not cache the HTML file itself unless you explicitly configure a Page Rule or Cache Rule, which we will address in Configuring Cache Rules.

Recap

In this lesson, we moved beyond DNS management to actual traffic routing. By pointing your domain to an origin server and enabling the Cloudflare proxy, you have successfully integrated your frontend with a global CDN. This setup is the foundation for all the performance and security features we will implement in the coming lessons.

Up next: We will dive into the Wrangler CLI, the tool that will allow us to manage our infrastructure and deploy code directly to the edge.