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:

// 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

1. Cloudflare dashboard → Workers & Pages → Create → Pages → Connect to Git.
2. Authorize GitHub and pick your repository.
3. Configure the build:

4. 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

1. Buy a domain (Cloudflare Registrar sells at cost, or transfer an existing one).
2. Pages project → Custom domains → Set up a domain.
3. 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:

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

• _headers — custom HTTP headers per path:

/*
  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.