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.