Cloudflare Pages Deployment Guide

Prerequisites

Before deploying, ensure you have:

Git Installed
GitHub Account
Cloudflare Account
Built Website

1. Build Your Website

npx @11ty/eleventy

Purpose: Generates the production-ready website.

Output:

_site/

2. Push Project To GitHub

git add .
git commit -m "Ready for deployment"
git push

Purpose: Uploads project to GitHub.

3. Create Cloudflare Pages Project

Go to:

Cloudflare Dashboard
→ Workers & Pages
→ Create Application
→ Pages
→ Connect to Git

Purpose: Connects Cloudflare to your GitHub repository.

4. Select GitHub Repository

Choose your repository and click:

Begin Setup

5. Configure Build Settings

For 11ty

Framework Preset : Eleventy
Build Command    : npx @11ty/eleventy
Build Output Dir : _site

If Eleventy is detected automatically, simply continue.

6. Deploy

Click:

Save and Deploy

Cloudflare will:

Install Dependencies
Build Website
Publish Website

7. Access Your Site

Cloudflare provides a URL similar to:

https://mysite.pages.dev

Purpose: Instant public access to your website.

Custom Domain

Add Domain

Cloudflare Pages
→ Custom Domains
→ Set Up Domain

Example:

example.com
www.example.com

Cloudflare configures DNS automatically if the domain is managed by Cloudflare.

Automatic Deployments

After initial setup:

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

Purpose: Every push to GitHub automatically triggers a new deployment.

No manual upload required.

Daily Workflow

Develop:

npx @11ty/eleventy --serve

Commit Changes:

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

Cloudflare automatically:

Builds Site
Deploys Site
Updates Live Website

Done.

Important Settings

Build Command    : npx @11ty/eleventy
Output Directory : _site
Branch           : main

Commands You Will Use 95% Of The Time

npx @11ty/eleventy --serve
git add .
git commit -m "message"
git push

Conclusion

Once Cloudflare Pages is connected to GitHub, deployment becomes fully automatic.

Edit → Commit → Push → Live

You never need to manually upload files or manage hosting. Cloudflare builds and serves the contents of the _site folder automatically.