Setting Up a Website with Cloudflare and GitHub Pages

GitHub Pages is awesome.
Cloudflare is even more awesome.
When you combine them… you get free speed, security, and a cool factor.

Prerequisites

Ready? First, gather your ingredients:

  • A GitHub account (with a repo like username.github.io)
  • A domain name (example: yourdomain.com) – get it from the domain kings: Namecheap or Google Domains
  • A cup of tea (because why not)
  • A Cloudflare account (Free plan is more than enough)

Step-by-Step Setup

Is Your GitHub Pages Project Ready?

https://github.com/username/username.github.io
  • The homepage should be index.html.
  • On GitHub > Settings > Pages:
    • Source: main (or master)
    • Custom Domain: something like www.yourdomain.com

Bonus: Check the “Enforce HTTPS” box (protects you from advanced annoyances).

Add Your Domain to Cloudflare

  1. Go to https://dash.cloudflare.com → Click “Add a Site”.
  2. Enter your domain: yourdomain.com
  3. It will scan your DNS records automatically → just continue
  4. Change your nameservers to the ones Cloudflare gives you at your domain provider.

NOTE: This step might take a while (10 min to 1 hour). Have some tea.

Set Up DNS Records

Now, go to the DNS section. Click on DNS.

TypeNameContentProxy
CNAMEwwwusername.github.ioProxied
CNAME@username.github.ioProxied

WARNING: Don’t use A records! GitHub doesn’t give you an IP. CNAME is all you need.

SSL/TLS Settings

Go to SSL/TLS > Overview and select:

Full or Full (Strict)
If you pick Flexible:

You’ll get the “SSL_ERROR_NO_CYPHER_OVERLAP” slap.

Explanation: Flexible is for servers that don’t want HTTPS. GitHub wants HTTPS, so don’t do it.

Is Universal SSL Enabled?

Disable Universal SSL (if needed)

Under SSL/TLS > Edge Certificates:

  1. Scroll down
  2. Click Disable Universal SSL

This way, GitHub will say “my certificate is ready, bro”.

Final Check on GitHub Pages Settings

In Settings > Pages:

  • Domain: www.yourdomain.com
  • “Enforce HTTPS” is active

GitHub should recognize this domain. If needed, add a CNAME file to your project directory:

www.yourdomain.com

Note: GitHub usually does this automatically, but add it if needed.

Redirects (www → root domain or vice versa)

If you want only yourdomain.com and want www to redirect there:

Rules > Redirect Rules > Create Rule

SettingValue
If hostnamewww.yourdomain.com
Then redirect tohttps://yourdomain.com
Status Code301

Done!

Test It

Open your browser, try incognito mode:

https://www.yourdomain.com

If it opens: you rock
If not: we missed something, but don’t worry, we’ll fix it together.

Bonus: Why Cloudflare?

  • Speed: CDN distribution
  • Security: DDoS protection
  • Redirects, cache, firewall, and more toys
  • Free! (Our favorite price)

Wrap Up

Congrats, you now have a shiny, SSL-secured, custom domain website running on GitHub Pages.

You look like a pro, for free.

Special Thanks

  • Tea

GitHub: https://github.com/xmtaha

Questions? Check the contact page, send an email, or use smoke signals.