My immunity is strong.

Host Your Site with Cloudflare Pages to Make Them Load Instantly in 2021

Host your site with Cloudflare Pages and make them load fast on all devices.
Host your site with Cloudflare Pages

What are Cloudflare Pages?

What are the benefits of Cloudflare Pages?

How to host your website on Cloudflare Pages?

How to host your JAMSTACK site on Cloudflare Pages?

What type of sites / apps you can host with Cloudflare Pages?

How much does Cloudflare Pages cost?

Are you looking for answers to above questions?

Then you have come to the right place.

Congrats and pat your back.

You did an excellent job. Keep it up!

You are a wonderful human being.

Now lets get back to our article on Cloudflare Pages.

What are Cloudflare Pages

Cloudflare Pages is a JAMstack platform created specially for frontend developers to collaborate and deploy websites quickly.

What Type of Sites You Can Host with Cloudflare Pages?

  • Angular application
  • Astro site
  • Blazor site
  • Eleventy site
  • Elder.js site
  • Gatsby site
  • Hugo site
  • Jekyll site
  • Next.js site
  • Nuxt.js site
  • Preact site
  • React Application
  • Sphinx site
  • Svelte site
  • Vue application
  • WordPress site
  • Zola site

Benefits of Cloudflare Pages

  • Deploy your site on the Cloudflare Edge.
  • Scalable means it can absorb traffic surge easily.
  • Secure.
  • 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.

What I Like Most About Cloudflare Pages

  • Cloudflare Pages site supports upto 10 custom domains.
  • Schedule a CRON job to update your site at pre-defined time interval.
  • Add custom 404 page.
  • Setup caching using Cloudflare Page Rules.
  • Instantly revert back your project to previous deployment using Rollbacks.
  • Create and setup custom redirects.
  • Add custom HTTP headers using Cloudflare Workers.
  • Automatically generates new preview links for each build.
  • Decide who can see your previews with the help of Cloudflare Access.
  • See real-time insights into your pages with free privacy focused web analytics.

What I Like Least About Cloudflare Pages?

  • Currently supports only 100 redirects per project.

How much does Cloudflare Pages cost?

Cloudflare Pages comes with 3 plans.

All plans come with unlimited sites, requests and bandwidth.

Free Plan provides you

  • 1 build at a time
  • 500 builds per month

Pro Plan costs US $20/ month and provides you

  • 5 concurrent builds
  • 5,000 builds per month

Business Plan costs US $200/ month and provides you

  • 20 concurrent builds
  • 20,000 builds per month

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 Website with Cloudflare Pages

1. Create Github Repository

Create new Github Repository
Create new Github Repository
  • Login to Github.
  • Create a New Repository.
  • Enter Repository name.
  • Select Private Repository.
  • Create Repository.

2. Sync Repository to Github

Sync your files to Github
Sync your files 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.

3. Create Project on Cloudflare Pages

Create Project on Cloudflare Pages
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.

4. 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.