Deploy to Cloudflare Pages

What is Cloudflare Pages?

Cloudflare Pages is a fast, secure hosting platform for static sites. Deploy your HTML files directly or connect your GitHub repository for automatic deployments.

Option 1: Direct Upload

1. Go to pages.cloudflare.com
2. Create a new Cloudflare Pages project
3. Choose Direct Upload
4. Drag your site folder onto the upload area (or select files)
5. Your site goes live in seconds with a Cloudflare domain

Option 2: GitHub Integration (Recommended)

1. Push your exported site to a GitHub repository
2. Go to pages.cloudflare.com
3. Click Connect to Git
4. Authorize GitHub and select your repository
5. Set build settings (leave blank for static sites)
6. Click Deploy
7. Every push to GitHub automatically deploys your site

Connect Your Custom Domain

1. In your Cloudflare Pages project, click Custom Domain
2. Enter your domain name
3. Follow the setup instructions (usually just updating nameservers)
4. Your site is now accessible at your custom domain
5. HTTPS is automatically enabled

Build Settings (For GitHub)

If using GitHub integration, you can configure build settings:

• Build Command: Leave blank for static sites (no build needed)
• Build Output Directory: Leave blank or set to /
• Environment Variables: Add any custom variables if needed

For a static site exported from the Site Builder, no build is needed.

Analytics & Monitoring

• Cloudflare automatically tracks page views and requests
• View analytics in your Cloudflare Pages dashboard
• Monitor performance metrics and visitor data
• Set up notifications for deployment issues

Updating Your Site

If Using Direct Upload:

1. Make changes in Site Builder
2. Export your updated site
3. Go to your Cloudflare Pages project
4. Upload the new files

If Using GitHub Integration:

1. Make changes in Site Builder
2. Export and push to GitHub
3. Cloudflare automatically deploys your changes

Troubleshooting

Site Not Accessible?

• Verify index.html is in your project root
• Check DNS settings if using a custom domain
• Wait a few minutes if you just deployed

Broken Links or Images?

• Ensure all files were uploaded
• Use relative paths in your HTML (e.g., ./images/photo.jpg)
• Check file capitalization

Performance Issues?

• Compress images before uploading
• Minify CSS and JavaScript
• Check PageSpeed Insights for recommendations

GitHub Pages vs Cloudflare Pages

Best Practices

• Use GitHub Integration: Automatic deployments save time
• Monitor Deployments: Check logs if something goes wrong
• Optimize Assets: Compress images and minify code
• Test Locally: Verify everything works before deploying
• Use Custom Domains: Makes your site more professional