How to deploy your websites to Cloudflare's Pages Platform for free

Summary

This tutorial video guides viewers on deploying a website on Cloudflare Pages, offering free hosting with up to 10k daily requests. It demonstrates creating a Cloudflare account, setting up a project, and deploying via direct upload or connecting to a GitHub repository for automatic updates. The video also covers configuring build settings, managing environment variables, testing branches, and collaborating with team members, concluding with project deletion from Cloudflare Pages while retaining the GitHub repository.

Takeaways

• 🌐 Cloudflare Pages allows you to deploy websites for free with up to 10k requests per day.
• 💻 Start by creating an account at cloudflare.com and logging in to access the dashboard.
• 📁 Click on 'Pages' to see existing projects or create a new one by clicking 'Create a Project'.
• 🔗 Two main options for uploading a website: Direct upload or connecting to a GitHub repository.
• 🤖 Connecting to Git automates updates, reflecting changes in the GitHub repository on Cloudflare instantly.
• 🚀 Demonstrated using 'Connect to Git' to deploy a website, starting with creating a GitHub repository.
• 📝 Instructions on how to create a repository on GitHub, including naming and setting it to private.
• 🔄 Showed how to commit an HTML file to the GitHub repository for testing purposes.
• 🔑 Detailed the process of connecting GitHub to Cloudflare for access to repositories.
• 🔍 Discussed how to select repositories for Cloudflare Pages to access and deploy.
• 🌟 Highlighted the ability to preview changes in different branches without affecting the production URL.
• 🛠 Mentioned the option to set environment variables for the website within Cloudflare's settings.
• 👥 Explained how to invite team members to collaborate on the website through Cloudflare Pages.
• 🗑 Demonstrated how to delete a project from Cloudflare Pages, noting that it does not affect the GitHub repository.

Q & A

What is the purpose of the video?

The purpose of the video is to demonstrate how to deploy a website on Cloudflare Pages, a platform that allows free deployment of websites with up to 10,000 requests per day.

Where should one start to deploy a website on Cloudflare Pages?

To start, one should go to desktop.cloudflare.com, create an account with Cloudflare, log in, and then navigate to the 'Pages' section on the dashboard.

What are the two main options to upload a website to Cloudflare Pages?

The two main options are 'Direct upload', where you can upload your website directly to Cloudflare, and 'Connect to Git', which connects your GitHub repository to Cloudflare for automatic deployment of changes.

How does connecting to Git on Cloudflare Pages work?

By connecting to Git, any changes made to your GitHub repository are automatically reflected in your Cloudflare deployment, ensuring that your website is always up-to-date.

What steps are involved in creating a repository on GitHub?

To create a repository on GitHub, you need to go to the 'Repositories' tab, click 'New', name the repository, set it as private or public, and then press the 'Create repository' button.

How can you upload a website to a GitHub repository?

You can either upload your website directly through the GitHub interface by creating a file, or you can clone the repository and push your website files from your local computer to the repository.

What is the process of connecting GitHub to Cloudflare Pages?

To connect GitHub to Cloudflare Pages, you need to configure GitHub access from Cloudflare, which may involve clicking 'Add account' and following the instructions to connect your GitHub account.

Why might you need to update the settings in GitHub to access a new repository from Cloudflare Pages?

You might need to update the settings if you initially granted access to only specific repositories and want to include a new repository, which requires selecting additional repositories in the GitHub Pages app settings.

What happens when you create a project on Cloudflare Pages?

When you create a project on Cloudflare Pages, you can choose a project name that will form part of your website's URL. The project name will be suffixed with '.pages.dev'.

How can you manage environment variables for your website on Cloudflare Pages?

You can manage environment variables by navigating to the 'Build settings' and then to 'Settings' in the Cloudflare Pages dashboard, where you can edit or add new environment variables.

What are the benefits of creating multiple branches in your GitHub repository for deployment on Cloudflare Pages?

Creating multiple branches allows you to test changes in a separate environment before deploying them to the production URL. This helps in ensuring that the production site remains stable and error-free.

How can you delete a project on Cloudflare Pages?

To delete a project, go to the 'Build settings', scroll down to 'Settings' in the 'General' section, and click 'Delete project'. You will need to confirm the deletion by typing the project name.

Outlines

00:00

🌐 Deploying Websites on Cloudflare Pages

This paragraph introduces the process of deploying a website on Cloudflare Pages, a platform that allows free hosting with up to 10,000 requests per day. The speaker guides viewers to create an account on Cloudflare, navigate to the dashboard, and start a new project. Two primary methods for uploading a website are discussed: direct upload and connecting to a GitHub repository. The speaker opts to demonstrate the 'Connect to Git' method, emphasizing its real-time update capabilities. The viewer is then directed to create a GitHub repository and upload HTML files, which will be connected to Cloudflare for deployment.

05:02

🔗 Connecting GitHub to Cloudflare Pages

The speaker continues by detailing the steps to connect a GitHub repository to Cloudflare Pages. This involves configuring GitHub access in Cloudflare, which may require connecting a GitHub account if not already done. Once connected, the speaker demonstrates how to select a repository for deployment. The process includes setting up a project with a unique name to avoid random word suffixes in the URL. The speaker also explains how to select the appropriate branch for deployment and enable automatic deployment for any changes pushed to the repository. Additionally, viewers are shown how to manage environment variables and other settings for their Cloudflare Pages project.

10:03

📚 Managing Branches and Collaborators on Cloudflare Pages

In this paragraph, the speaker discusses managing multiple branches in a GitHub repository and how they can be reflected in Cloudflare Pages without deploying to the production URL. The speaker creates a new 'testing' branch from the 'Main' branch and updates the index file to demonstrate how changes in the testing branch are immediately visible in Cloudflare Pages. The speaker also explains how to invite team members to collaborate on a website by adding them to the project and configuring their access. Finally, the speaker shows how to delete a project from Cloudflare Pages, highlighting that this action does not affect the GitHub repository.

Keywords

💡Cloudflare Pages

Cloudflare Pages is a platform provided by Cloudflare that allows users to deploy websites. In the video, it is the main service being discussed and demonstrated, highlighting its capabilities for free website hosting with up to 10,000 requests per day. The script details the steps to create an account, link a GitHub repository, and deploy a site using this platform.

💡GitHub

GitHub is a web-based platform used for version control and collaboration, allowing multiple people to work on projects simultaneously. In the video, GitHub is used to host the website's code, which is then connected to Cloudflare Pages for deployment. The script explains how to create a repository and manage integration with Cloudflare.

💡Repository

A repository, often shortened to repo, is a storage location for software packages, often used for managing code in version control systems like GitHub. In the video, the speaker creates a GitHub repository named 'demo project' to store and manage the website files, which are then deployed to Cloudflare Pages.

💡Direct Upload

Direct Upload is an option provided by Cloudflare Pages to upload website files directly from a local computer. The video contrasts this method with connecting to a GitHub repository, showing that direct upload is a simpler but less automated way to deploy a website.

💡Connect to Git

Connect to Git refers to linking a GitHub repository to Cloudflare Pages so that any changes made to the repository are automatically deployed. This is the method demonstrated in the video, emphasizing the seamless integration and automatic updates provided by this approach.

💡Branch

A branch in version control systems like GitHub is a parallel version of a repository. Branches allow users to work on different features or fixes independently. In the video, the speaker creates a new branch called 'testing' to demonstrate how changes can be made and tested in a separate environment before merging them into the main branch.

💡Deployment

Deployment is the process of making a website or application available for use. In the video, deployment occurs when the website files are pushed to Cloudflare Pages, making them accessible on the internet. The video covers both automatic deployment through GitHub integration and manual deployment via direct upload.

💡Environment Variables

Environment variables are dynamic values that can affect the way running processes behave on a computer. In the context of the video, environment variables are used to manage configuration settings like API URLs and credentials, which can be set within Cloudflare Pages to customize the website's behavior.

💡Team Collaboration

Team Collaboration refers to the ability to work jointly with others on a project. The video mentions that Cloudflare Pages allows users to invite team members and configure their access levels, facilitating collaborative development and management of a website.

💡Delete Project

Delete Project is a feature that allows users to remove a deployed project from Cloudflare Pages. The video demonstrates this by showing how to navigate the settings and delete the project, while clarifying that this action does not affect the repository on GitHub, ensuring users do not accidentally lose their code.

Highlights

Deploying websites on Cloudflare's Pages platform is free and supports up to 10k requests per day.

Start by creating an account at cloudflare.com and logging in to access the dashboard.

Click on 'Pages' to view existing projects or create a new one.

Option to upload websites directly or connect to a Git repository.

Connecting to Git allows automatic updates to the Cloudflare deployment from GitHub.

Demonstration of deploying a website using the 'Connect to Git' option.

Creating a new repository on GitHub with HTML files for the website.

Instructions on how to upload a website directly to the GitHub repository.

Committing a new file to the GitHub repository for testing purposes.

Configuring GitHub access in Cloudflare to access repositories.

Updating GitHub settings to allow Cloudflare access to all repositories.

Selecting a GitHub repository to deploy on Cloudflare Pages.

Setting up the project name, which determines the URL.

Selecting the branch for deployment and enabling automatic deployment.

Viewing the deployed site and exploring additional settings.

Managing environment variables for the website through Cloudflare Pages settings.

Creating and testing multiple branches for different deployment sites.

Inviting team members to collaborate on the website through Cloudflare Pages.

Deleting a project from Cloudflare Pages and noting that it does not affect the GitHub repository.

Transcripts

hello everybody this is in

today's video I'm gonna show you how to

deploy your website on cloudflare's

pages platform so we can deploy our

websites to cloudflare for free with up

to 10k of requests per day

to start please go to desktop

cloudfooter.com

and from there you create your account

to cloudflare

and once it is done login and then you

will end up on this dashboard here from

here click on pages

and this will show you your existing

projects if you have any otherwise you

can press this create a project button

and choose any of these options to

upload your website to cloudflare

so if you have your website ready on

your local computer you can click on

Direct upload upload it directly to

cloudflare and another option which is

quite interesting is connect to git this

is where you connect your GitHub

repository where you have your website

uh this repository will be connected to

cloudflare so any changes you do to your

repository will be reflected in

cloudflare deployment right away

so I can go with direct upload

but I think uh it is better to show you

an example with a connect to git option

so yeah without further Ado let's try to

uh use this option to deploy our website

to cloudflare pages

before we do that let's go to our GitHub

account and create a repository with

some

HTML files right so I'm here on my

GitHub account I will go to repositories

Tab and click new

in here I will name the repository as a

demo project and I'll keep it as private

then I'll just press create repository

button

and then I will uh if you if you if you

have a website locally you can upload it

directly here uh like uh if you have

like single file otherwise you can you

know clone this repository and then push

your whole website to the repository

directly from your local computer in my

case I'll just create a file from here

I'll name it ad intex.html and here I

will just add these contents since this

is for testing purpose only right and I

have H1 here and uh title and finally I

have some message since this is a main

uh Branch right so I'll just press

commit new file button

and then I will have this file here

now let's go back to uh Cloud Player and

here let's press this create a project

button and click connect to git

from here like you have to configure

[Music]

GitHub

[Music]

access in from cloudflare so cloudflare

is able to you know access your

repositories on your GitHub account

for in my case it is already connected

the cloudflare is already connected to

my GitHub account so I am able to see my

GitHub account here in your case you

might need to click on the add account

button and then follow the instructions

to connect your GitHub account to

cloudflare

so once it is done uh you will find

cloudflare's app in your GitHub uh

settings

and because of that integration uh you

will be able to see your GitHub

repositories in cloudflare

so

I am able to see these two repositories

from my GitHub account but they are

already in use and what I want to do now

is I want to see this demo project

repository in my cloudflare account so

that I can deploy it to cloudflare pages

right so I am not seeing uh that demo

project repository here because I did

not configure my uh

uh GitHub cloudflare app in my GitHub

account to access all the repositories I

just selected specific uh these two

repositories from there so in order I I

in order to access this new repository I

need to update the settings so from here

I can click cloudflare Pages link

and it will take me to my GitHub account

and here I can see the settings for my

GitHub Pages uh app in my GitHub setting

right so it is inside the integration

and applications and here I can see I

have given access to cloudflare to these

two repositories but I could also select

you know all repository so it is able to

access all but in my case I am following

this option and let's now click on

select repositories and then add another

eight

give access to the cloudflare pages to

another repository I have here so demo

project and then save

so with that change I should be able to

see uh that repository in My Cloud

Player

deployment settings so let's close this

and go back to the original one so now

yeah if you see this I can see this demo

project repository let's click it and

begin setup right

and the name of the project uh uh like

whatever uh name you want to give it

here it will be your url so you see it

is demo project

and uh with that URL I am getting this

uh

uh website URL right so whatever is

unique it will put dot Pages dot Dev

right it will be suffixed with this URL

so I think demo project is an existing

repository let me create something that

is unique so I don't get this random

word there so let's say the first

chapter we

yeah so you see I am able to create this

uh URL with this project name and it I'm

not receiving any random uh word there

because it is kind of unique right

nobody has used this in cloudflare page

before

so yeah for now let's stick to demo

project I don't care about additional

word there

and then let's select which branch you

want this

deployment to access right uh in my case

I have only a main branch here so that

I'm getting main branch here if I had

like multiple branches I could get you

know other branches here as well right

so I won't change anything else I will

just press save and deploy button

and

once it is done I should be able to see

the deployed site

so yeah it is almost done let's go back

to GitHub and refresh

and

[Music]

oh yeah I can see the status deployed

successfully right so let's go back to

this and

I think deployment is done yeah let's

click continue to project

and

uh from here I can see the URL already

now let's go back to the pages again

and we can see my new project being

listed here I can click visit site to

see my website uh directly

so you see the URL we picked while

creating the project so demo project doc

dot pages.dev this is kind of uh

uh like main URL for GitHub for cloud

players pages so

uh what we receive is sub domain

basically uh with whatever project name

we chose right so you see I am seeing my

website deployed so this was a success

now let's go back and explore a few

settings

so let's explore a few settings here let

me click on view details and then

I can see some settings uh

let's click on build settings and then

click on the settings link here

from here we can see my

production branch is Main and automatic

deployment is enabled so whenever I push

any change it will be deployed right

away

and

I don't have any other settings

one useful thing if you are using any

environment variables in your website

then you can you know edit them from

here

uh let's say you want to add any like

you are using any apis and you want to

configure your best URLs to that API

maybe credentials to that API or

whatever you can add all the environment

variables here right so that is it for

the environment variables and other

things we can check here

is

we can also have like uh multiple

branches and if we create any branch in

our repository we can see uh whatever

changes we do in that branch in here

directly in Pages without even deploying

to the production URL that is just URL

right so let's go back to the repository

and create a branch just to demo that

thing so I'll create a new Branch for

testing

and I'll create it from Main Branch

right so

this is done now I have testing branch

and uh

from here let's go to code then load the

testing branch

in this Branch I will edit this file and

update its message

demand from Main Branch to testing

branch

just to demo this thing right

so yeah now in my uh testing Branch I

have that message now let's go back to

uh

our Cloud Player pages

dashboard and in here if you click on

view details

you can see I have uh

let's go to deployment settings

I can see multiple deployment sites so

this deployment was for Main and this is

for the testing so this is this is this

happened when we created a branch and

this is when we updated the index file

right so you see I am also getting the

new URL for this branch so if I click on

this one

I'll see my change in that branch and if

I go back to the original deployment if

I refresh I won't see that change

so this is useful in case you are

testing something before deploying to

production environment

so yeah

one other thing you can do is you can

invite uh other team members to

collaborate on some website here so for

that you have to go to pages and there

you can add members

so whatever members you add you can

configure their access and they will be

able to collaborate with you on that

website so okay so last thing we can do

we can try is this go to the setting and

see how we can delete this project so

under build setting click setting and

there if you go uh scroll down

under settings in general

you should be able to see delete project

so here we can do delete project and

write the name of the project and click

delete

uh this way we should be able to delete

it yes it's gone now if you refresh it

doesn't exist anymore but it is not

deleted from your GitHub repository so

not to freak out or something so yeah

that's about it for this video I hope

you liked it be sure to subscribe to

this Channel and I'll see you in next

video