How to Host Your Portfolio on Cloudflare Pages

Introduction

Your portfolio is your storefront, and where it's hosted says something before a visitor reads a word. Cloudflare Pages hosts static sites free on infrastructure spanning 300+ cities worldwide — fast everywhere, free forever on the generous tier, with Git-based deploys that rebuild your site on every push.

This is the exact setup running the site you're reading right now: a Next.js static export pushed to GitHub, built and served by Cloudflare Pages.

Why Static + Cloudflare

A static site is a folder of HTML/CSS/JS files — no server code, no databases, nothing to hack or scale. That makes it:

Free to host — serving files is cheap; Cloudflare's free tier has no bandwidth cap worth hitting.

Fast globally — your files replicate to edge data centers near every visitor.

Simple to operate — no servers to patch, no SSL certificates to renew (HTTPS is automatic).

For portfolios, blogs, and documentation, static is almost always the right call.

Step 1: Get a Site to Deploy

Any static site works — plain HTML, or a framework's export. A Next.js static export (as used here) needs one config line:

code

// next.config.ts
const nextConfig: NextConfig = {
  output: "export",
}

Then npm run build produces an out/ folder — the entire site. Push the repo to GitHub first (the Git guide covers this).

Step 2: Connect Cloudflare Pages

Cloudflare dashboard → Workers & Pages → Create → Pages → Connect to Git.

Authorize GitHub and pick your repository.

Configure the build:

Setting	Value (Next.js export)
Framework preset	None (or Next.js — static export)
Build command	`npm run build`
Build output directory	`out`

Click Save and Deploy.

Two minutes later your site is live at yourproject.pages.dev. From now on, every push to the production branch rebuilds and deploys automatically — and every pull request gets its own preview URL, so you can review changes before they go live.

Step 3: Custom Domain

Buy a domain (Cloudflare Registrar sells at cost, or transfer an existing one).

Pages project → Custom domains → Set up a domain.

Enter it — if the domain's DNS is on Cloudflare (automatic if bought there), the SSL certificate and routing configure themselves.

Within minutes, https://yourdomain.com serves your site with HTTPS. Subdomains (blog.yourdomain.com, app.yourdomain.com for a Streamlit app) attach to other projects the same way.

Step 4: Files Worth Knowing

Two special files in your output directory change behavior:

`_redirects` — URL redirects, one per line:

code

/old-page /new-page 301
/resume https://example.com/resume.pdf 200

`_headers` — custom HTTP headers per path:

code

/*
  X-Frame-Options: DENY
  /images/*
  Cache-Control: public, max-age=31536000

The redirect file is how this site's renamed blog posts keep their old URLs working — old link, 301, new page, no SEO damage.

Common Issues & Fixes

Build succeeds locally, fails on Cloudflare — Node version mismatch: set Environment variables NODE_VERSION to your local version (node -v), or add an .nvmrc file.

Site deploys but assets 404 — wrong output directory; for Next.js exports it's out, not .next or dist.

Changes don't appear after push — check the deployment log: the build may have failed (read the error), or you pushed to a branch Pages isn't watching (production branch setting).

`wrangler.toml` breaks the Pages build — Pages configs only support Pages keys; a [assets] block is Workers-only and fails validation (this exact error cost this site one failed deploy).

Key Concepts

Static export — the whole site as files; the host just serves them.

Git-based deploys — push = deploy, PRs = preview URLs.

Edge network — files live near every visitor, not one data center.

`_redirects` / `_headers` — platform behavior via plain files.

What to Try Next

Deploy this site's projects as live demos and link them from your portfolio.

Add a contact form via Cloudflare Pages Functions (serverless, still free tier).

Set up Cloudflare Analytics to see visitor traffic without Google's cookie banner.

Move your Streamlit apps onto subdomains of the same domain.

FAQ

What does the free tier actually include?

Unlimited bandwidth, 500 builds/month, unlimited sites, unlimited requests. Custom domains and HTTPS included. Nearly everyone never leaves this tier.

Can I run a backend on Pages?

Static files plus Pages Functions — serverless functions in a /functions folder that run on request. Enough for forms, APIs, and light dynamic behavior without a server.

How is this different from GitHub Pages?

Same core idea. Cloudflare's edge is faster in more regions, build minutes are more generous, preview deployments are built-in, and the platform integrates with the rest of Cloudflare (DNS, Workers, analytics) under one roof.