Deploy to Cloudflare Pages

This page teaches you how to deploy Finance App to Cloudflare Pages using your GitHub account. You do not need any deployment experience.

By the end of this page, you will have:

• A Cloudflare account
• Your Finance App project connected to Cloudflare
• A live website accessible from a public URL

What Is Cloudflare Pages?

Cloudflare Pages is a free hosting service for static websites. It connects directly to your GitHub repository. Every time you push new code to GitHub, Cloudflare rebuilds and republishes your site automatically.

This means you never have to upload files manually. Change a file, push to GitHub, and your site updates.

Before You Start

Make sure you have:

• A GitHub account with your Finance App project already pushed (see the previous page)
• A browser
• About 10 minutes

You do not need a credit card. Cloudflare Pages has a free tier that is enough for most projects.

Step 1 — Create a Cloudflare Account

1. Open your browser and go to:

https://dash.cloudflare.com/sign-up

2. Enter your email address and a password
3. Click Sign Up
4. Check your email inbox. Cloudflare will send a verification link.
5. Click the verification link to activate your account
6. Log in to the Cloudflare dashboard

Step 2 — Open the Pages Section

1. In the Cloudflare dashboard, look at the left sidebar
2. Click Workers & Pages
3. Click the Pages tab
4. Click Create application
5. Click Import an existing Git repository

Step 3 — Connect Your GitHub Account

1. Cloudflare will ask you to connect to GitHub. Click Connect GitHub.
2. A GitHub authorization page will open
3. Click Install & Authorize
4. Choose whether to allow Cloudflare to access all repositories or only selected repositories
   • If you choose only selected repositories, select your Finance App repository from the list
5. Click Install

After this step, Cloudflare can read your repository and deploy it.

Step 4 — Select Your Repository

1. Back in Cloudflare, you will see a list of your GitHub repositories
2. Find your Finance App repository
3. Click Begin setup

Step 5 — Configure the Build

Fill in the form with these values:

Field	What to Enter
Project name	A short name, like finance-app
Production branch	main
Framework preset	Astro (select from the dropdown)
Build command	npm run build
Build output directory	dist

If the framework preset is set to Astro, the build command and output directory will be filled in automatically. Check them to make sure they match the table above.

Do not change any other settings unless you know what you are doing.

Step 6 — Deploy

1. Click Save and Deploy
2. Cloudflare will start building your site
3. Wait for the build to finish. This usually takes 1 to 3 minutes.
4. When the build succeeds, you will see a green check mark and a URL like:

https://your-project-name.pages.dev

5. Click the URL to open your live site

Your website is now live on the internet.

Step 7 — Automatic Updates

After this setup, Cloudflare watches your GitHub repository. Every time you push new code:

1. Cloudflare detects the change
2. It rebuilds the site automatically
3. It republishes the updated version

You do not need to do anything else. Just push your changes to GitHub.

How to Update Content Later

When you want to change text, images, or posts:

1. Edit the JSON or Markdown files in your project folder
2. Open a terminal in the project folder
3. Run:

git add .
git commit -m "Update content"
git push

4. Wait 1 to 3 minutes
5. Refresh your live site to see the changes

Optional — Add a Custom Domain

By default, your site uses a .pages.dev address. If you want to use your own domain, like yourdomain.com:

1. In Cloudflare Pages, open your project
2. Click Custom domains
3. Click Set up a custom domain
4. Enter your domain name
5. Follow the on-screen instructions to update your DNS records
6. Wait for the DNS to propagate. This can take a few minutes to a few hours.

After adding a custom domain, update the site field in astro.config.mjs to match, then push the change.

Common Mistakes

Mistake	What Happens	Fix
Wrong build command	Build fails	Use npm run build
Wrong output directory	Site shows 404 or blank page	Use dist
Wrong production branch	Cloudflare watches the wrong branch	Use main
Node.js version too old	Build fails with an error	In Cloudflare project settings, set the Node.js version to 18 or higher
Did not push to GitHub	Cloudflare cannot find the code	Push your project first
Repo is not selected in GitHub authorization	Cloudflare cannot see the repo	Re-authorize Cloudflare in GitHub settings and add the repo

Troubleshooting

Problem	Solution
Build fails with “command not found”	Make sure package.json has a build script. Check Cloudflare’s build log for the exact error.
Build succeeds but site is blank	Check that the output directory is dist, not public or build
Site shows 404 on every page	Confirm the framework preset is set to Astro
Changes do not appear after push	Check the Cloudflare Pages dashboard. If the build failed, open the log and fix the error.
Cannot find the repo in Cloudflare	In GitHub, go to Settings → Applications → Cloudflare Pages, and grant access to the repository
Custom domain shows “not secure”	Wait for the SSL certificate. Cloudflare issues it automatically, but it may take a few minutes.

Next Step

After deploying to Cloudflare Pages, you can deploy the same project to other platforms, or move on to configuring your custom domain and DNS.