Configuration of GitHub Pages, Cloudflare, and your custom domain takes a few steps.

GitHub Pages

1. Read Getting started with Github Pages, some notes:
   • Specify the branch and directory you want to use for your GitHub Pages site. You don’t need to utilize a gh-pages branch!
   • You can use the main branch of a repo named <org>.github.io , for example, https://github.com/username/username.github.io/. This will automatically gets published to https://username.github.io/, and when configured in a later step, will redirect to your custom domain, https://example.com/
   • You can use a static-site generators like Hexo or Jekyell , there are other options, many have lots of documention and themes you can use.

2. For your GitHub repository, generate a ‘CNAME’ file at the root and insert your domain name (e.g., example.com) within it.

   cd /your/project/base/dir
   touch CNAME
   echo 'example.com' > CNAME
   git add CNAME
   git commit -m 'Added CNAME'
   git push origin main
   

Cloudflare and your Domain provider

1. Ensure you have a registered domain name
2. If not done already, sign up for a free CloudFlare account and create an account for your domain.

3. To set up cloudflare on your domain, point the nameservers to it in your registrar’s admin panel. For instructions specific to different registrars, check out this helpful list of links.

   

4. From where you manage DNS records (In my case, Cloudflare!), create A recorda to point <domain>.<tld> to GitHub (185.199.108.153, 185.199.109.153, 185.199.110.153 and 185.199.111.153). This works for any apex domain (such as example.com). Refer to GitHub docs for more details.

   

5. Optional, you can specify a CNAME for www. This will do a URLs redirect:

   

6. To Ensure your domain is secure, activate the HTTPS (SSL/TLS) feature in CloudFlare’s settings and establish a Page Rule to force HTTPS redirection.

   

7. If you’re feeling adventurous, you can also allow automated minification for text-based components such as HTML, CSS, JS, or SVG – it’s an impressive tool if you don’t have a build step dedicated entirely to minifying assets

   

8. Done. Your website will now be served to your users through CloudFlare.

References

• Managing a custom domain for your GitHub Pages site