How to Deploy a Website with Cloudflare Pages

Adam Listek

Read more posts by this author.

Fast and performant websites are hard to create. The time that server processing, network delivery, and client rendering takes too often results in a slow website. Cloudflare Pages solves this problem by delivering your site close to the client from their hundreds of data centers around the world.

By serving each request from the closest data center, Cloudflare Pages decreases both the server processing and network delivery times, resulting in fast websites regardless of location. In this article, learn how to deploy your first website with Cloudflare Pages!

Prerequisites

To follow along with the Cloudflare Pages tutorial, you need the following.

Cloudflare Pages supports static sites, which are sites that run entirely client-side in the browser. Frameworks built on server-side technologies such as PHP, like WordPress, are not supported with Cloudflare Pages.

Creating a Cloudflare Pages Project

Before Cloudflare Pages can deploy a site, you must first connect the GitHub repository to Cloudflare Pages and configure the Cloudflare Pages site for deployment. Follow along below to get started!

1. Login to your Cloudflare account and click the Pages link on the right-hand side navigation.

Navigating to the Cloudflare Pages dashboard.
Navigating to the Cloudflare Pages dashboard.

2. Next, click the Create a Project button to start the Cloudflare Pages wizard.

Creating a new Cloudflare Pages project.
Creating a new Cloudflare Pages project.

3. Click the Connect GitHub account button to authorize Cloudflare Pages as an Installed GitHub application able to access your repositories. Starting the connect GitHub account wizard.

Starting the connect GitHub account wizard.
Starting the connect GitHub account wizard.

4. Next, provide the GitHub account that contains the repo you’ll be using to deploy to Cloudflare Pages.

Choosing a GitHub account to connect to Cloudflare Pages.
Choosing a GitHub account to connect to Cloudflare Pages.

5. Choose to authorize a specific repository or access to all repositories in your GitHub account. In this tutorial, all repositories are authorized for use. Click the Install & Authorize button to complete the connection between Cloudflare Pages and GitHub.

Installing and authorizing Cloudflare Pages with GitHub.
Installing and authorizing Cloudflare Pages with GitHub.

6. After authorization, all repositories available to Cloudflare Pages will be shown from the connected GitHub account. Select the repository to deploy from. Here you may connect additional GitHub accounts as necessary if you want to give Cloudflare access to other repos.

Choosing a GitHub repository
Choosing a GitHub repository

7. Click Begin Setup to configure the site for deployment.

Starting the first deployment
Starting the first deployment

8. Enter the Cloudflare Pages project name, which defaults to the name of the GitHub repository, and the Git branch to deploy from, which is typically main. The screenshot below is keeping all defaults.

Setting the project name
Setting the project name

9. As this tutorial only deploys a static site, there is no need to select a framework or build command. Finally, click the Save and Deploy button.

Choosing the build settings, saving, and deploying the site
Choosing the build settings, saving, and deploying the site

10. Once the Save and Deploy button is clicked, Cloudflare Pages will initiate the first deployment based on your configuration. Finally, click the Continue to Project button after a successful deployment.

Viewing the results of the deployment and continuing to the project dashboard.
Viewing the results of the deployment and continuing to the project dashboard

Deploying HTML Content From GitHub to Cloudflare Pages

Although the project deployed successfully, any attempt to visit the site will result in a 404 (page not found) error message. In this tutorial, no HTML content has been added to the GitHub repository yet.

If your repository already contains HTML content, then your site will be immediately accessible after deployment.

There are two ways to add content to a GitHub repository. Typically, a developer will use the Git version control command-line commands to add, commit, and publish a file to a repository. You may also use the GitHub web interface to add a file directly to the repository.

If you aren’t familiar with Git, that’s ok! In a Git repository, you first add a file that you want to track versions of. Next, you commit, or record, the changes to the repository, which is the newly added file in this case. Finally, as the repository is stored in GitHub, and not locally, you push the changes to GitHub.

Both the command-line and web approach result in a Git repository commit which triggers a Cloudflare Pages deployment. This tutorial outlines the typical developer-oriented approach using the command-line as shown below.

1. Before adding a file to the GitHub repository, you must get the URL of the repository to clone, or copy to your local system. Navigate to your repository in GitHub, click the Code drop-down, and click the Copy to Clipboard button next to the HTTPS URL.

Retrieving the GitHub repository URL.
Retrieving the GitHub repository URL.

2. Open a command-line client and navigate to a directory to store your repository. Here, the directory C:\Articles is used. Change the current directory with the command cd C:\Articles. Once in the directory, clone the GitHub repository with the command git clone

You do not need to create the folder, the git clone command does this for you.

Cloning the GitHub repository
Cloning the GitHub repository

3. Next, open the repository folder in your favorite code editor, Visual Studio Code is shown in this tutorial. Create and save a new file, named index.html with the following content.

<!doctype html>
<html class="no-js" lang="">
	<head>
	  <meta charset="utf-8">
	  <title></title>
	</head>
	<body>
	  <h1>Hello world! This site is served from Cloudflare Pages.</h1>
	</body>
</html>
Saving the index.html file to the repository
Saving the index.html file to the repository

4. Back on the command-line, run the following GIT commands to add the file, commit the changes, and push the changes to GitHub.

# Make sure you are in the repository directory
cd cloudflare-pages-tutorial
# Add just the index.html file
git add index.html
# Record the changes with a required commit message
git commit -m 'Adding the index.html file'
# Push the changes from the main repository, the default, to GitHub, known as the origin by default
git push origin main
Add, commit, and push the newly created index.html file to GitHub
Add, commit, and push the newly created index.html file to GitHub

5. As soon as the changes are pushed to GitHub, Cloudflare Pages is notified and a new deployment starts. Once completed, click Visit site to view the primary site URL or view a commit-specific deployment linked under each deployment, useful for viewing per-commit changes over time.

Navigate to the site URL or commit-specific site URL
Navigate to the site URL or commit-specific site URL
Viewing the primary site URL
Viewing the primary site URL

Adding a Custom Domain for a Cloudflare Pages Project

Now that you have successfully created a Cloudflare Pages project and deployed a static site, you may find that the generated URL is not very memorable. You may have a domain already in Cloudflare that you wish to use with Cloudflare Pages. In this tutorial, a sub-domain is used to show how to add a custom domain for your site.

1. In the same Cloudflare Pages project dashboard, navigate to Custom domains and click the Set up a custom domain button.

Set up a custom domain for a Cloudflare Pages project
Set up a custom domain for a Cloudflare Pages project

2. Enter the domain, or sub-domain to use with the specific Cloudflare Pages project. Here, cloudflare-pages-tutorial.adamtheautomator.com is used. Once entered, click the Continue button.

Adding a custom domain
Adding a custom domain

3. Review the expected changes and click on Activate domain, once you are ready to proceed.

Activate the domain
Activate the domain

4. Once the changes have been successfully deployed, you will see the status reflected on the Custom domains tab, and the site is now available from the custom domain with SSL enabled.

You may initially see a gray “Inactive (Error)” status while the changes are applying. This typically resolves in 30 seconds to a minute.

Verifying the custom domain status
Verifying the custom domain status

Conclusion

Cloudflare Pages enables the serving of static websites from hundreds of locations, close to the client, around the world without a traditional hosting server. Tightly integrated with Git version control, every change is tracked with previews available for each commit. What can you build with Cloudflare Pages today?

Subscribe to Stay in Touch

Never miss out on your favorite ATA posts and our latest announcements!

Looks like you're offline!