Cloudflare Pages is the best free hosting option for Jekyll sites. You get automatic HTTPS, a global CDN, unlimited bandwidth, and zero cold starts — all for free. Here’s exactly how to set it up.
Why Cloudflare Pages for Jekyll?
Before the steps: why Cloudflare Pages over GitHub Pages or Netlify?
- Unlimited bandwidth — no caps, no overage charges
- Global CDN — serves from 300+ data centers worldwide
- Automatic builds — push to GitHub, Cloudflare rebuilds and deploys in ~30 seconds
- Custom domains — free SSL on your own domain, no paid plan needed
- Functions — Cloudflare Workers handle form submissions, APIs, and serverless logic on the free tier
GitHub Pages is solid for simple sites. But if you need form handling, serverless functions, or just want the fastest possible CDN, Cloudflare Pages wins.
Prerequisites
- A Jekyll site in a GitHub repository
- A Cloudflare account (free)
- Your domain on Cloudflare DNS (optional but recommended)
Step 1: Connect Your Repository
- Log into Cloudflare Dashboard → Workers & Pages
- Click Create application → Pages → Connect to Git
- Authorize Cloudflare to access your GitHub account
- Select your Jekyll repository
Step 2: Configure the Build
In the build settings:
| Setting | Value |
|---|---|
| Framework preset | Jekyll |
| Build command | jekyll build |
| Build output directory | _site |
| Root directory | / (or your Jekyll subfolder) |
If your Jekyll site is in a subfolder (e.g., landing/), set Root directory to landing.
Step 3: Set Environment Variables
Cloudflare uses Ruby to run Jekyll. For Jekyll 4.x, set:
| Variable | Value |
|---|---|
RUBY_VERSION |
3.3.0 |
Without this, Cloudflare may default to Ruby 3.4+ which has compatibility issues with some Jekyll gems.
Click Save and Deploy.
Step 4: Add Your Custom Domain
Once deployed, Cloudflare gives you a *.pages.dev URL. To use your own domain:
- In your Pages project → Custom domains → Set up a custom domain
- Enter your domain (e.g.,
jekyllbuilder.uk) - Cloudflare automatically creates the DNS record if your domain is managed in Cloudflare
- SSL is provisioned automatically within a few minutes
Step 5: Automatic Deploys
From this point on, every push to your main branch triggers an automatic build and deploy. Preview branches are also supported — push to any other branch and Cloudflare builds a preview URL for it.
Adding Serverless Functions
One of Cloudflare Pages’ strengths over GitHub Pages is native support for serverless functions. Create a functions/ directory in your repo:
your-site/
_posts/
_layouts/
functions/
api/
contact.js ← handles form POST
Functions run on Cloudflare Workers globally, at the edge, on the free tier.
Example contact form handler (functions/api/contact.js):
export async function onRequestPost(context) {
const { request, env } = context;
const body = await request.json();
// Send via SendGrid, etc.
return Response.json({ success: true });
}
Performance After Deploy
A Jekyll site on Cloudflare Pages typically scores:
- Lighthouse Performance: 98–100
- Time to First Byte: < 50ms globally
- Largest Contentful Paint: < 0.5s
These are static files served from the nearest Cloudflare edge node to your visitor. No PHP, no database, no cold starts.
The Shortcut: Jekyll Builder
If you’d rather not configure builds manually, Jekyll Builder handles all of this for you. Design your site visually, connect your GitHub repo, and deploy to Cloudflare Pages in one click — no YAML configuration required.