---
title: Cloudflare Pages
description: Deploy your gallery to Cloudflare Pages for fast global CDN distribution.
createdAt: 2025-07-20T22:35:03+08:00
lastModified: 2025-11-23T19:40:52+08:00
order: 53
---

# Cloudflare Pages Deployment

Cloudflare Pages provides fast, global static hosting with excellent CDN performance. Perfect for static gallery deployments.

## Prerequisites

- Cloudflare account (free tier available)
- GitHub or GitLab repository
- Photos processed with builder

## Deployment Steps

### Step 1: Connect Repository

1. Go to [Cloudflare Dashboard](https://dash.cloudflare.com)
2. Navigate to Pages → Create a project
3. Connect your GitHub/GitLab repository
4. Select the repository and branch

### Step 2: Configure Build Settings

**Build configuration:**
- **Framework preset**: Vite
- **Build command**: `pnpm run build:manifest && pnpm --filter web build`
- **Build output directory**: `apps/web/dist`
- **Root directory**: (leave empty, or set to project root)

**Environment variables:**
Add your storage credentials:
```
S3_ACCESS_KEY_ID=your_key
S3_SECRET_ACCESS_KEY=your_secret
S3_BUCKET_NAME=your_bucket
S3_REGION=us-east-1
```

### Step 3: Deploy

1. Click "Save and Deploy"
2. Cloudflare Pages will:
   - Install dependencies
   - Run builder to generate thumbnails and manifest
   - Build the static site
   - Deploy to Cloudflare's global CDN

## Build Configuration

### Using wrangler.toml (Optional)

Create `apps/web/wrangler.toml`:

```toml
name = "afilmory-gallery"
compatibility_date = "2024-01-01"

[build]
command = "pnpm run build:manifest && pnpm --filter web build"
cwd = "."
```

### Environment Variables

Set in Cloudflare Dashboard → Pages → Your Project → Settings → Environment Variables:

**Storage (S3 example):**
```
S3_ACCESS_KEY_ID
S3_SECRET_ACCESS_KEY
S3_BUCKET_NAME
S3_REGION
```

**Production vs Preview:**
- Set different variables for Production and Preview environments
- Useful for testing with different storage buckets

## Custom Domain

1. Go to Pages → Your Project → Custom domains
2. Add your domain
3. Configure DNS:
   - Add CNAME record pointing to Cloudflare Pages
   - Cloudflare will automatically provision SSL

## Continuous Deployment

Cloudflare Pages automatically:
- **Production**: Deploys on push to main/master
- **Preview**: Creates preview deployments for pull requests

Each deployment gets a unique URL.

## Performance Features

Cloudflare Pages provides:
- **Global CDN**: Fast delivery worldwide
- **Automatic compression**: Gzip and Brotli
- **Image optimization**: Automatic image optimization (Pro plan)
- **Cache control**: Intelligent caching headers

## Build Limits

Free tier limits:
- **Build time**: 20 minutes per build
- **Builds per month**: 500
- **Bandwidth**: 500 requests/second

Upgrade to Pro for higher limits.

## Troubleshooting

**Build failures:**
- Check build logs in Cloudflare Dashboard
- Verify all environment variables are set
- Ensure `builder.config.ts` is correct
- Check storage credentials

**Missing photos:**
- Verify thumbnails and manifest are in build output
- Check file paths are correct
- Ensure storage is accessible during build

**Slow builds:**
- Use repo cache plugin to avoid full rebuilds
- Optimize storage access
- Consider reducing photo count

## Next Steps

- Configure custom domain
- Set up monitoring
- Optimize build performance
- Review [Cloudflare Pages documentation](https://developers.cloudflare.com/pages)
