Cloudflare Pages: Best Free Static Hosting & CDN

Hosting a static website doesn't need to be complicated or expensive. Cloudflare Pages offers one of the best free tiers in the industry, giving you a global CDN, free SSL, and unlimited bandwidth without paying a dime.

Whether you have a simple HTML portfolio or a complex React app, this guide will show you how to get it online in minutes.

Why Cloudflare Pages?

• Completely Free: No hidden costs for bandwidth or static requests.
• Global Speed: Your site is served from Cloudflare's massive edge network (275+ cities).
• Free SSL: HTTPS is enabled automatically.
• Automatic Deploys: Connect to GitHub/GitLab and deploy every time you push code.

Prerequisites

1. A Cloudflare Account (Sign up at dash.cloudflare.com).
2. Your Website Files (HTML/CSS/JS) OR a Git Repository (GitHub/GitLab).

Method 1: Git Integration (Recommended)

Best for developers who want automatic updates.

1. Push Code to Git: Ensure your website code is in a repository on GitHub or GitLab.
2. Connect Cloudflare:
   • Log in to the Cloudflare Dashboard.
   • Go to Workers & Pages > Create application > Pages tab.
   • Click Connect to Git.
3. Select Repository: Authorize Cloudflare to access your Git account and select the repository you want to deploy.
4. Configure Build Settings:
   • Project Name: Choose a name (this will be your subdomain, e.g., my-site.pages.dev).
   • Production Branch: Usually main or master.
   • Framework Preset: Select your framework (React, Vue, etc.) from the dropdown. See the Cheat Sheet below if unsure.
5. Deploy: Click Save and Deploy. Cloudflare will clone, build, and host your site.

Method 2: Direct Upload (Drag & Drop)

Best for beginners or one-off sites without Git.

1. Prepare Files: Put all your website files (index.html, css, images) into a single folder.
2. Go to Dashboard:
   • Navigate to Workers & Pages > Create application > Pages tab.
   • Click the Upload Assets link (sometimes labeled "Direct Upload").
3. Upload:
   • Name your project.
   • Drag and drop your website folder into the upload window.
4. Deploy: Click Deploy Site. Your site is now live at your-project.pages.dev!

⚡ Build Configuration Cheat Sheet

If you are using a framework, you need to tell Cloudflare how to build it.

Adding a Custom Domain (e.g., https://www.google.com/search?q=yoursite.com)

1. Go to your project's dashboard in Cloudflare Pages.
2. Click the Custom Domains tab.
3. Click Set up a custom domain.
4. Enter your domain name (e.g., www.example.com) and follow the instructions to update your DNS records.
   • Note: If your domain is already on Cloudflare, this is automatic.

Free Plan "Gotchas" & Limits

While generous, the free plan has a few boundaries:

• Build Limit: 500 builds per month (plenty for most users).
• File Size: Maximum 25 MB per single file.
• File Count: Maximum 20,000 files per project.
• Web Analytics: Basic privacy-friendly analytics are included for free.

Final Tip: Redirects

Need to redirect /contact to /about? Create a file named _redirects in your output folder (e.g., public or root) with this format:

/contact  /about  301
/old-page /new-page 302

Happy Hosting! 🚀

Relevant Video: How To Connect Custom Domain To Cloudflare Pages
This video is a useful visual companion to the article, specifically focusing on the critical step of connecting a custom domain to your Cloudflare Pages site, which is often the most technical part of the process.

Would you like me to explain how to set up a specific framework like Next.js or React with Cloudflare Pages in more detail?

http://googleusercontent.com/youtube_content/0