Deploying Static Website to Cloudflare Pages

Cloudflare Pages is a JAMStack hosting service provided by Cloudflare, a company that specializes in Web infrastructure and Security. Cloudflare Pages also referred to as “Pages” is newcomer in JAMStack hosting, but their Infrastructure makes almost as equivalent to their competitors. In this tutorial, we will teach you how to host you JAMstack website on cloudflare pages. They also have a free tier with 500 builds and unlimited bandwidth(when used according to their AUP), with custom domain names with free SSL, analytics, and access policies.

Prerequisites:

• Cloudflare account, if you don’t have one create here
• GitHub account, if you don’t have one create here
• A GitHub repository with an index.html file

Preparing GitHub Repository:

Cloudflare pages similar to Netlify pulls content from the Github repository then build the site and publishes it to their CDN. You can your static site with plain HTML (or) any static Site generator like Hugo, Next.js, Jekyll. Your repository must have at least 1 file and a compulsory index.html file should be present. Below is my simple GitHub repository with index.html file

And our GitHub Repository to

Sample Github Repo

Deploying to Cloudflare Pages:

Step 1: Login into your Cloudflare account and click on the Pages icon on the right side menu, this will take you Cloudflare Pages dashboard. Then click on create the project.

Click on this icon

Click on create project

Step 2: This will take to you a webpage that asks you to connect to your GitHub account.

Connect to Github account

Now authorize the repositories you want Cloudflare pages to get installed, you can select all repositories (or) selected repositories

Authorize Cloudflare pages

Step 3: Select the repository you want to deploy and configure the deployment settings

select your repository

Now select the deployment configurations

• Name of the project: give a name to your project
• Production branch: branch of the repository you want to deploy
• Framework: Select the framework you have used in your project select None for static HTML, React, Hugo, and more
• Build command: Command to build the website, If you choose none in the framework leave it blank, or else it will be automatically applied according to your framework. If you have used a custom framework give your custom build command.
• Build Output folder: Directory of output from the build command, If you choose none in framework leave it blank, or else it will be automatically applied according to your framework. If you have used a custom framework give your custom build output directory.

After you have selected your configuration, click on save and deploy.

build configuration

Now Cloudflare will build and deploy your site, if you have done everything correctly you will see something like below:

Success

You can connect to a custom domain from the project dashboard, and You can also enable analytics and access policies from project settings.

Add custom domain if you have one

Add analytics and access policies