Host your static website using Cloudflare Pages

Hey there! Here's a quick tutorial if you're interested in hosting your static website on the internet!
Previously, I was using GitHub Pages for a while, but I wasn't happy with the domain name. So, I switched to Cloudflare, purchased a custom domain, but ran into issues trying to add it to my GitHub website (maybe I did something wrong, though).
After looking around for another solution, I realized that you can actually host a static website for free on Cloudflare using Cloudflare Pages! What's great is that if you already have a custom domain in the same CDN, you can easily add subdomains to your DNS records.
For now, I just have a simple blog, but I'm hoping to build a full website on the wwwsubdomain soon!

Step 1: Build your website
First, you'll need to build your website. On my side, Iβm using Publii, which helps me generate posts and manage a lot of cool features with a GUI interface. I got a bit tired of Hugo and other markdown-based frameworks that require building with Visual Studio Code :D
So for now, something easy to manage works best for me! But hey, feel free to use whatever tool you prefer, as long as you end up with HTML files that can be used for your website.

Step 2: Create an Application
From the "Compute (Workers)" menu, go to the "Workers & Pages" sub-menu to create your first Pages application.

As you can see, you have two options here: Cloudflare needs access to your website files.
Connect to a GitHub or GitLab repository where your website is stored.
Upload the static HTML files directly through the browser.
In my case, I used my GitHub account, which is linked to Cloudflare, allowing me to access the repository where my HTML files are stored.

For the repo structure, you need to leave the index.html in the root of the repo. Here is an example : https://github.com/AlrikRr/alrikrr.github.ioΒ

Step 3: Connect your Custom Domain
Once everything is connected, just wait a bit until your website becomes visible. Initially, it will have an address like pages.dev. However, if you have a domain name registered with Cloudflare, you can easily add a custom domain, which will be automatically added to your DNS records.

PS: I deleted the 2nd record because i was not using a subdomain here !
Β
Β