---
title: "Discover Cloudflare Pages and Skyrocket Deployment of your Website"
description: "Learn how to deploy a static website to Cloudflare Pages! Cloudflare Pages enables the serving of static websites from hundreds of locations, close to the client, around the world without a traditional hosting server."
canonical: "https://adamtheautomator.com/cloudflare-pages/"
---
# Discover Cloudflare Pages and Skyrocket Deployment of your Website
> Learn how to deploy a static website to Cloudflare Pages! Cloudflare Pages enables the serving of static websites from hundreds of locations, close to the client, around the world without a traditional hosting server.
Source: https://adamtheautomator.com/cloudflare-pages/
---
ATA Learning
Tap to hide
[
ATA Learning
](/)
* [Home](/)
* [Tutorials](/tutorials/)
* [Instructors](/author/)
* [Advertising](/advertising/)
* [Recommended Resources](/resources/)
* [About Adam](/about-adam/)
Search for:
* [](https://twitter.com/adbertram)
* [](https://github.com/Adam-the-Automator)
* [](https://www.linkedin.com/company/adam-the-automator-llc)
* [](/feed/)
# Discover Cloudflare Pages and Skyrocket Deployment of your Website
[Adam Listek](https://adamtheautomator.com/author/alistek/)8 September 20215 min. read
Categories: [Cloud](/category/cloud/)
Tags:[CloudFlare](/tag/cloudflare/)[Websites](/tag/websites/)
Table of Contents
* [Prerequisites](#prerequisites)
* [Creating a Cloudflare Pages Project](#creating-a-cloudflare-pages-project)
* [Deploying HTML Content From GitHub to Cloudflare Pages](#deploying-html-content-from-github-to-cloudflare-pages)
* [Adding a Custom Domain for a Cloudflare Pages Project](#adding-a-custom-domain-for-a-cloudflare-pages-project)
* [Conclusion](#conclusion)
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](https://developers.cloudflare.com/pages/) solves this problem by delivering your site close to the client from their hundreds of data centers around the world.
Not a reader? Watch this related video tutorial!
**_Not seeing the video? Make sure your ad blocker is disabled._**
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.
* An existing [Cloudflare account](https://dash.cloudflare.com/sign-up/pages).
* A [GitHub account](https://github.com/join) with a repository containing the website to deploy to Cloudflare Pages.
* The [Git command-line client](https://git-scm.com/downloads) installed, necessary for the command-line examples shown.
> _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](https://adamtheautomator.com/static-vs-dynamic-website/), are not supported with Cloudflare Pages._
Related:[Static vs Dynamic Websites: What’s the Difference?](https://adamtheautomator.com/static-vs-dynamic-website/)
## 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](https://dash.cloudflare.com/login) and click the **Pages** link on the right-hand side navigation.
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.
3\. Click the **Connect GitHub account** button to authorize Cloudflare Pages as an [Installed GitHub application](https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fsettings%2Finstallations) able to access your repositories. 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.
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.
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
7\. Click **Begin Setup** to configure the site for 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
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
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
## 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](https://git-scm.com/) 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](https://git-scm.com/docs/git-add) a file that you want to track versions of. Next, you [commit](https://git-scm.com/docs/git-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](https://git-scm.com/docs/git-push) 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](https://git-scm.com/docs/git-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.
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`](https://github.com/Adam-the-Automator/cloudflare-pages-tutorial.git)
> _You do not need to create the folder, the `git clone` command does this for you._
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.
```markup
Hello world! This site is served from Cloudflare Pages.
```
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.
```bash
# 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
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
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
2\. Enter the domain, or sub-domain to use with the specific Cloudflare Pages project. Here, [cloudflare-pages-tutorial.adamtheautomator.com](https://cloudflare-pages-tutorial.adamtheautomator.com) is used. Once entered, click the **Continue** button.
Adding a custom domain
3\. Review the expected changes and click on **Activate domain**, once you are ready to proceed.
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
Related: [How to Set Up End-to-End SSL Encryption with CloudFlare](https://adamtheautomator.com/cloudflare-ssl/)
## 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?
Share this article
[Share on X](https://twitter.com/intent/tweet?url=https%3A%2F%2Fadamtheautomator.com%2Fcloudflare-pages%2F&text=Discover%20Cloudflare%20Pages%20and%20Skyrocket%20Deployment%20of%20your%20Website)[Share on Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fadamtheautomator.com%2Fcloudflare-pages%2F)[Share on LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fadamtheautomator.com%2Fcloudflare-pages%2F)
## Related Posts
### [Getting Started with Cloudflare Workers](/cloudflare-workers/)
Need a way to publish application that doesn't consume container or VM technology? Learn how to create and publish an application with Cloudflare Workers in this tutorial!
### [How to Setup Cloudflare Dynamic DNS](/cloudflare-dynamic-dns/)
Keep your DNS record updated using Cloudflare's application programming interface (API) and learn how to set up Cloudflare Dynamic DNS via PowerShell and Cloudflare's API!
### [Create & Host Azure Static Websites with Ease](/azure-static-website/)
Build and host an Azure static website with HTTP and HTTPS support using HTML, CSS, and JavaScript.
## Categories
* [IT Ops](/category/it-ops/)
* [Cloud](/category/cloud/)
* [DevOps](/category/devops/)
* [Home Ops](/category/home-ops/)
* [Information Security](/category/infosec/)
* [Software Development](/category/software-development/)
## Site
* [Home](/)
* [Tutorials](/tutorials/)
* [Instructors](/author/)
* [Advertising](/advertising/)
* [Recommended Resources](/resources/)
* [About Adam](/about-adam/)
Copyright 2026© ATA Learning | [Privacy Policy](/privacy/)