ajcwebdev
Blog post cover art for A First Look at Cloudflare Pages

A First Look at Cloudflare Pages

Published:

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

Outline

All of this project’s code can be found in the First Look monorepo on my GitHub.

Introduction

Cloudflare Pages 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

Terminal window
npx create-react-app ajcwebdev-cfpages
cd ajcwebdev-cfpages

Create a blank repository on GitHub with the same name as your React project.

Terminal window
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.

01 - cloudflare-pages-dashboard

Click “Create a project.”

02 - connect-git-repository

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

03 - setup-build-and-deploy

Your project name and production branch will be set automatically.

04 - blank-build-settings

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

Click “Save and deploy.”

06 - initializing-build

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

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

Click the link to ajcwebdev-cfpages.pages.dev and you should see the following page.

09 - ajcwebdev-cfpages-deployed