Introduction: Why I Stopped Paying for Hosting
For years, I paid $10-$20 a month just to host simple websites. It felt like a waste of money for small projects. Then I discovered Cloudflare Pages. It's free, it's incredibly fast, and it connects directly to GitHub. In this guide, I'm going to show you exactly how to deploy your first site. You don't need a credit card, and you don't need to be a sysadmin.
What is Cloudflare Pages?
Cloudflare Pages is a hosting platform designed for static websites (HTML, CSS, JS) and JAMstack applications. It takes your files, caches them across Cloudflare's global network (300+ data centers), and serves them to users from the nearest location. This means your website loads insanely fast, no matter where your visitors are.
Core Concept: Git-Based Deployment
The magic of Cloudflare Pages is that it connects to your GitHub repository. Every time you push a change to GitHub, Cloudflare automatically rebuilds and deploys your website. This workflow is called CI/CD (Continuous Integration/Continuous Deployment), and it's the industry standard.
Step-by-Step Execution
- Prepare your files: Make sure you have an `index.html` file in your project folder.
- Create a GitHub repository: Sign up at github.com and create a new public repository. Upload your files.
- Sign up for Cloudflare: Go to dash.cloudflare.com and create a free account.
- Go to Workers & Pages: Click "Create Application" and then "Pages".
- Connect to Git: Choose GitHub, authorize Cloudflare, and select your repository.
- Configure Build Settings: For a simple static HTML site, leave the build command empty. Set the output directory to `/` (root).
- Save and Deploy: Click the button. Within 30 seconds, your site will be live on a `.pages.dev` URL.
Custom Domains (Optional but Recommended)
If you own a domain (e.g., from Namecheap), you can connect it to your Pages project. Go to the "Custom domains" tab in Cloudflare Pages and follow the instructions. It's usually as simple as changing your nameservers or adding a CNAME record.
Common Mistakes Beginners Make
- Using the wrong output directory: If your HTML is in a `public` folder, you must set the output directory to `public`, not `/`.
- Forgetting to push changes: Cloudflare only deploys what's on GitHub. If you edit locally, commit and push.
- Ignoring the build logs: If the deployment fails, click on the logs. They tell you exactly what went wrong.
Practical Exercise (Don't Skip This)
Take a simple HTML file you've built and deploy it to Cloudflare Pages. Then, go back to GitHub, make a text change, commit, and push. Watch how Cloudflare automatically redeploys your site. If you get stuck, email me at digisoneglobal@gmail.com.
Frequently Asked Questions
Q: Is it really free forever?
A: Yes, the free tier is very generous. It offers 500 builds per month and unlimited requests. It's perfect for personal and small business sites.
Q: Can I host a WordPress site on Cloudflare Pages?
A: No, Pages is for static sites. WordPress requires a database and PHP, which are dynamic. You would need a traditional host for WordPress.
Tools & Resources Mentioned
- Cloudflare Dashboard - The main control panel.
- GitHub - Where your code lives.
- Cloudflare Pages - The hosting service.
Conclusion & Next Steps
You just deployed a website without spending a dime. That's a huge milestone. Next, you might want to learn about custom domains or setting up a build pipeline for a framework like React. But for now, celebrate this win!