What are Cloudflare Pages
Cloudflare Pages is a JAMstack platform created specially for frontend developers to collaborate and deploy websites quickly.
Cloudflare Pages Features
- Deploy your site on the Cloudflare Edge.
- Scalable means it can absorb traffic surge easily.
- All plans come with unlimited sites, unlimited requests and unlimited bandwidth.
- Built with specially for developers.
- Easy to collaborate with your team with unlimited seats.
- Enable dynamic functionality with Cloudflare Workers.
- Cloudflare Pages automatically generates new preview links for each build.
- With the help of Cloudflare Access, you can decide who can see your previews.
- See real-time insights into your pages with free privacy focused web analytics.
Who Should Host their Websites with Cloudflare Pages
- Developers who want their website to be fast, secure and scalable.
- Developers who want to save time, building and deploying sites.
- Developers who do not want to worry about infrastructure.
Step by Step Guide to Host Your Static Site for Free with Cloudflare Pages
Create Github Repository
- Login to Github.
- Create a New Repository.
- Enter Repository name.
- Select Private Repository.
- Create Repository.
Sync Repository to Github
- Download Github Desktop.
- Login to Github Desktop.
- From File Menu, select Clone Repository.
- Select your Repository then click Clone.
- Click Show Explorer or Ctrl+Shift+F to view all files in the Repository.
- Copy Paste all your Static files in this folder.
- Go back to Github Desktop.
- You will see new Changes.
- Give some name to this Change for example “added static site”.
- Then Click Commit to Main.
- Click Push to Origin to upload your Static Site to Github.
Create Project on Cloudflare Pages
- Login and go to Cloudflare Pages.
- Connect Github to Cloudflare. You need to do this only once.
- Create a Project.
- You will see names of all the Repositories in your account.
- Select the Private Repository you created just now.
- Begin Setup.
- Enter a Project Name. You will get a subdomain on Cloudflare Pages as your-project-name.pages.dev. Be careful what you add here as you cannot change it later.
- Select Production Branch as “main”.
- Let the Network Preset as “none”.
- Let the Build Command and Build Output Directory as empty.
- Click Save and Deploy.
- Wait for some time as your site as being added to Cloudflare Global Network for the 1st time.
- Click Continue to Project.
Add Remove Files to Cloudflare Pages
- Go to Github Desktop.
- Press Ctrl+Shift+F or click Show in Explorer to see your files uploaded to Github.
- Delete the files that you don’t need.
- Add new files that you want to upload.
- Go back to Github Desktop.
- Click Push to Origin.
- Your change will first get uploaded to Github.
- Your changes will automatically reflect in Cloudflare Pages in a short time.
Sit back and relax as your site is now served by Cloudflare Pages.