1Push Code to GitHub
Your code must be in a GitHub repository to deploy.
# Initialize repository (if first time)
git init
# Add files
git add .
# Commit
git commit -m "Initial commit"
# Connect GitHub repository (if first time)
git remote add origin https://github.com/username/my-project.git
# Push
git push -u origin mainInfo
If you don't have a GitHub repository, create one at github.com/new.
2Configure Cloudflare Pages
- Sign up for Cloudflare (free)
- Click Workers & Pages in the dashboard
- Select Create application → Pages
- Click Connect to Git
- Connect your GitHub account and select repository
Build Settings (by framework)
React + Vite
- Build command:
npm run build - Build output:
dist
Next.js
- Build command:
npx @cloudflare/next-on-pages@1 - Build output:
.vercel/output/static
Astro
- Build command:
npm run build - Build output:
dist
3SPA Routing Configuration
SPAs using React Router or similar require additional configuration. This prevents 404 errors on page refresh.
/* /index.html 200
Create this file in the public folder.
What happens without this?
Refreshing on a page like /about will result in a 404.
See Fixing SPA 404 Errors for details.
4Environment Variables (if needed)
Set sensitive information like API keys as environment variables.
- Cloudflare dashboard → Select project
- Settings → Environment variables
- Add variable (e.g.,
VITE_API_URL) - Can distinguish between Production/Preview environments
Info
When using Vite, environment variable names must start with VITE_.
See Fixing Environment Variable Errors for details.
5Custom Domain (optional)
A default project-name.pages.dev domain is provided.
Additional configuration is needed to use your own domain.
- Project → Custom domains
- Click Set up a custom domain
- Enter domain (e.g.,
myapp.com) - Follow DNS setup instructions
Tip
If you manage your domain with Cloudflare DNS, it connects automatically. For other DNS providers, you'll need to add a CNAME record.
Deployment Checklist
0/5 doneDeployment Complete!
Congratulations!
Your app will now automatically deploy every time you push code to GitHub.
Check it at project-name.pages.dev.