# A First Look at Cloudflare Pages

> Cloudflare Pages is a Jamstack platform for frontend developers to collaborate and deploy websites by syncing a GitHub repo and building a static frontend

- **Collection:** Blog post
- **Published:** 2021-04-08
- **Author:** Anthony Campolo
- **Canonical URL:** https://ajcwebdev.com/first-look-cloudflare-pages/
- **Markdown URL:** https://ajcwebdev.com/first-look-cloudflare-pages/index.md
- **JSON URL:** https://ajcwebdev.com/first-look-cloudflare-pages/index.json

---

> ___All of this project's code can be found in the [First Look monorepo](https://github.com/ajcwebdev/a-first-look/tree/main/deployment/cloudflare-pages/) on my GitHub.___

## Introduction

[Cloudflare Pages](https://pages.cloudflare.com/) is a Jamstack platform for frontend developers to collaborate and deploy websites. Simply connect to a GitHub repo, supply the necessary build commands and publish directories, and deploy your site to the world with just `git push`.

What's that? That sounds like they just created a carbon copy of Netlify on their own CDN and slapped a new name on it? You say that like it's a bad thing.

## Create a React App

```bash wrap=false
npx create-react-app ajcwebdev-cfpages
cd ajcwebdev-cfpages
```

Create a [blank repository](https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fnew) on GitHub with the same name as your React project.

```bash wrap=false
git branch -M main
git remote add origin https://github.com/ajcwebdev/ajcwebdev-cfpages.git
git push -u origin main
```

Sign up for [Cloudflare Pages](https://pages.cloudflare.com/).

![01 - cloudflare-pages-dashboard](https://ajc.pics/2021/04/08/01-cloudflare-pages-dashboard.webp)

Click "Create a project."

![02 - connect-git-repository](https://ajc.pics/2021/04/08/02-connect-git-repository.webp)

Select your React project and click the "Begin setup" button at the bottom.

![03 - setup-build-and-deploy](https://ajc.pics/2021/04/08/03-setup-build-and-deploy.webp)

Your project name and production branch will be set automatically.

![04 - blank-build-settings](https://ajc.pics/2021/04/08/04-blank-build-settings.webp)

The build settings are blank, but you can select the Create React App framework preset for the build command and publish directory.

![05 - create-react-app-framework-preset](https://ajc.pics/2021/04/08/05-create-react-app-framework-preset.webp)

Click "Save and deploy."

![06 - initializing-build](https://ajc.pics/2021/04/08/06-initializing-build.webp)

Go take a nice long walk around the block, grab some coffee, take out your dry cleaning, file your taxes, complete that 10,000 piece puzzle you've been putting off, and then come back and your website build should be done.

![07 - build-and-deployment-settings](https://ajc.pics/2021/04/08/07-build-and-deployment-settings.webp)

Once the build finishes you will see the build and deployment settings at the bottom and a link to your site at the top.

![08 - success-site-built-and-deployed](https://ajc.pics/2021/04/08/08-success-site-built-and-deployed.webp)

Click the link to [ajcwebdev-cfpages.pages.dev](https://ajcwebdev-cfpages.pages.dev/) and you should see the following page.

![09 - ajcwebdev-cfpages-deployed](https://ajc.pics/2021/04/08/09-ajcwebdev-cfpages-deployed.webp)

## Discover Related Content

- [A First Look at Cloudflare Workers](https://ajcwebdev.com/first-look-cloudflare-workers/)
- [Edge GraphQL with Cloudflare Workers](https://ajcwebdev.com/deploy-gql-edge-server-with-cloudflare/)
- [A First Look at SolidStart](https://ajcwebdev.com/first-look-solidstart/)
- [Deploy a React App with Vite and Vercel](https://ajcwebdev.com/videos/teach-jenn-tech-deploy-a-react-app-with-vite-vercel/) (Video)
- [Simplifying Slinkity](https://ajcwebdev.com/podcasts/js-jabber-simplifying-slinkity/) (Podcast)