Building a Free Personal Website with Cloudflare Pages and GitHub: The Ultimate Guide (2026 Edition)

In today’s digital age, having a personal website is essential for showcasing your portfolio, blog, or brand—without breaking the bank. Imagine creating a professional site like mehr1dad.com, which serves as a personal hub for resumes, articles, and more, all hosted for free. The best part? You don’t need to buy hosting or even a domain to get started. Using Cloudflare Pages combined with a GitHub repository, you can deploy a static website at no cost, with automatic updates across multiple domains if you choose to add them.

This comprehensive guide will walk you through everything: from the basics of why this setup works, to its features (including SEO, blogging, and multi-domain support), technical capabilities and limitations, and a step-by-step tutorial. By the end, you’ll have a reference resource to build, deploy, and maintain your own site. No coding expertise required—though basic familiarity with Git helps.

Why Cloudflare Pages and GitHub? The Free Hosting Revolution

Cloudflare Pages is a free platform for deploying static websites directly from your Git provider (like GitHub). It leverages Cloudflare’s global content delivery network (CDN) for lightning-fast loading, automatic SSL certificates, and unlimited bandwidth—all without charging a dime for the basics.

• Completely Free to Start: Use a free subdomain like yourproject.pages.dev. No hosting fees, ever.
• Optional Domains: If you want a custom domain (e.g., yourname.com), you can buy one cheaply (~$10/year), but it’s not required. As seen on sites like mehr1dad.com, you can even connect multiple domains (e.g., mehr1dad.com, mehr1dad.ir, digimehrdad.ir) to the same site. Updates sync instantly across all.
• GitHub Integration: Manage your site’s content in a GitHub repo. Push changes, and Cloudflare auto-deploys—perfect for version control and collaboration.
• Real-World Example: The site mehr1dad.com is a personal portfolio hosted on Cloudflare Pages, demonstrating resume hosting, article publishing, and multi-domain aliases. It updates seamlessly across its .com and .ir domains, proving the setup’s efficiency.

This combo outperforms traditional free options like GitHub Pages alone, offering better speed, security, and scalability.

Key Features and Capabilities

Cloudflare Pages excels at static sites but integrates with tools for more dynamic needs. Here’s a breakdown:

1. Static Site Hosting

• Supports plain HTML/CSS/JS or frameworks like React, Vue, Angular, Svelte.
• Use static site generators (SSGs) for advanced sites: Jekyll (Ruby-based, great for blogs), Hugo (Go-based, ultra-fast), Eleventy, or Gatsby.
• Global CDN: Your site loads quickly worldwide, with built-in DDoS protection and HTTPS.

2. Blogging Support

• Easily set up a blog using SSGs. Write posts in Markdown, and the generator builds HTML.
• Jekyll Example: Ideal for GitHub users; auto-builds themes and posts.
• Hugo Example: Blazing fast; perfect for large blogs with thousands of posts.
• Features: Categories, tags, RSS feeds, comments (via third-party like Disqus, integrated statically), and search (via Algolia or Lunr.js).
• No database needed—everything’s file-based in your GitHub repo.

3. SEO Capabilities

Static sites are inherently SEO-friendly: Fast load times (Google loves sub-2-second pages), clean URLs, and easy meta tags.

Best Practices:

• Generate sitemap.xml and robots.txt via your SSG (e.g., Hugo’s built-in sitemap).
• Add meta descriptions, Open Graph tags, and schema markup in templates.
• Submit to Google Search Console: Cloudflare’s speed boosts rankings; enable caching for better performance.
• Analytics: Integrate Google Analytics or Cloudflare’s free Zaraz for tracking without slowing your site.
• Mobile-Friendly: Use responsive designs; test with Google’s Mobile-Friendly Test.

Cloudflare Enhancements: Automatic image optimization, browser hints, and polish for better Core Web Vitals scores.

Limitations: Dynamic SEO (e.g., user-generated content) requires Cloudflare Workers (free tier limited to 100k requests/day).

4. Multi-Domain and Alias Support

• Connect up to 100 custom domains per project on the free plan (e.g., yourname.com, yourname.ir).
• All domains point to the same content; updates propagate instantly.
• Aliases: Redirect or alias domains (e.g., www. to root) via Cloudflare DNS.
• Example: Like mehr1dad.com aliasing to .ir variants—push once to GitHub, and all sync.

5. Other Technical Capabilities

• Functions: Add serverless JS (e.g., for forms, APIs) via Pages Functions—free up to Workers limits.
• Integrations: With Cloudflare Workers, R2 (storage), D1 (database), but free tiers apply.
• Preview Deployments: Test branches before merging.
• Redirects/Headers: Customize via _redirects or _headers files (up to 2,100 redirects).
• Unlimited Bandwidth/Users: No caps on traffic or collaborators.

Limitations and Restrictions

While powerful, Cloudflare Pages isn’t for everything. Key limits on the free plan (as of 2025):

• Builds: 500 per month; each times out after 20 minutes. (Pro/Business: More builds.)
• Files: Up to 20,000 per site; max 25 MiB per file.
• Domains: 100 per project (Pro: 250; Business: 500).
• Concurrent Builds: Limited per account (not specified, but monitor usage).
• Storage/Bandwidth: Unlimited bandwidth; storage implicit in file limits.
• Dynamic Content: Static-only by default. For databases/forms, use Workers (free: 100k requests/day, 10ms CPU time/request).
• Other: No direct server-side languages (e.g., PHP/Node runtime); _headers limited to 100 rules/2,000 chars; _redirects to 2,100 total.

Best Practices to Avoid Limits: Optimize builds (e.g., cache dependencies), use Bulk Redirects for excess, request limit increases via form if needed. For high-traffic dynamic sites, upgrade to paid plans (~$20/month for Pro).

If your site needs full backend (e.g., e-commerce), consider adding Cloudflare Workers or migrating to a VPS.

Step-by-Step Tutorial: Build Your Free Website from Scratch

Follow this guide to launch your site in under an hour. We’ll use Hugo for a blog example, but adapt for plain HTML or Jekyll.

Prerequisites

• Free GitHub account (github.com/signup).
• Free Cloudflare account (dash.cloudflare.com/signup).
• Optional: A custom domain from a registrar like Namecheap or IRNIC (.ir).
• Local tools: Git, Node.js (for some SSGs), and Hugo/Jekyll installer.

Step 1: Set Up Your GitHub Repository

1. Log in to GitHub and create a new repository (e.g., yourusername.github.io or any name).
2. Clone it locally: git clone https://github.com/yourusername/your-repo.git.
3. Install a static site generator:
   • For Hugo: Download from gohugo.io, run hugo new site . in your repo folder.
   • For Jekyll: Run gem install jekyll bundler, then jekyll new ..
4. Add content:
   • Create a blog post: hugo new posts/my-first-post.md (edit in Markdown).
   • Customize theme: Add a theme submodule (e.g., git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod).
5. Commit and push: git add ., git commit -m "Initial site", git push origin main.

Step 2: Connect and Deploy to Cloudflare Pages

1. Log in to Cloudflare Dashboard > Workers & Pages > Overview > Create (under Pages).
2. Choose “Connect to Git” > Authorize GitHub > Select your repo.
3. Configure build:
   • Framework: Hugo (or Jekyll/None for HTML).
   • Build command: hugo --minify (Jekyll: bundle exec jekyll build).
   • Output directory: public (Hugo) or _site (Jekyll).
   • Environment variables: If needed (e.g., HUGO_VERSION=0.121.1).
4. Save and Deploy. Wait 1-2 minutes—your site is live at yourproject.pages.dev!

Step 3: Add Custom Domains (Including Multiple)

1. If buying a domain: Purchase (e.g., yourname.com) and change nameservers to Cloudflare’s (in Dashboard > Add Site).
2. In Pages project > Custom Domains > Add Custom Domain.
3. Enter domain (e.g., mehr1dad.com) > Continue > Follow DNS instructions (add CNAME: name=@, target=yourproject.pages.dev, proxy=on).
4. For multiple: Repeat for each (e.g., mehr1dad.ir, digimehrdad.ir). All alias to the same project.
5. Verify: Cloudflare auto-adds SSL. Test in browser—updates sync on GitHub pushes.

Step 4: Optimize for SEO and Blog

1. In your SSG:
   • Add sitemap: Enable in config (Hugo: config.toml; Jekyll: _config.yml).
   • Meta tags: Edit layouts (e.g., <head> with title, description).
2. Submit to Search Engines: Go to google.com/search-console > Add property (your domain) > Verify via DNS.
3. Blog Setup: Add posts via Markdown, push to GitHub—auto-deploys.
4. Analytics: Add GA script to templates.

Step 5: Maintain and Update

• Edit locally, push to GitHub—Cloudflare rebuilds in seconds.
• Monitor: Dashboard shows builds, traffic.
• Troubleshoot: Check logs for errors; stay under limits.

Final Thoughts

With Cloudflare Pages and GitHub, you’ve got a robust, free platform for your personal site—scalable, SEO-optimized, and multi-domain ready. Sites like mehr1dad.com prove it’s production-grade. If you hit limits, paid upgrades are affordable. Start today, and turn this guide into your launchpad. Questions? Drop them in the comments or connect on LinkedIn.