Until recently, there has not been a great way get hosting for a basic static website for free. Let alone one that’s high-performance fast. All you need are:
- A registered domain (this one is deployed to pagesdemo.xyz)
- A Cloudflare account
- A Github account
- Static website files
A few days ago, this Tweet about Cloudflare Pages caught my attention. I figure if some guy with a PhD and happens to be Cloudflare’s CTO can do this in 8 minutes, I can do it in less than an hour. It turns out I did it in less than a half hour. I already had Freenom, Cloudflare, and Github accounts, so that saved me some time.
Step 1: Register a Free Domain
I’ve used Freenom before, back when the .tk domain caught my eye because that’s the abbreviation for Transitional Kindergarten. Too bad the school district I worked for rightfully block shady free TLDs such as .tk. And probably the others as well. So I registered pagesdemo.cf in just a few minutes, then added it to my Cloudflare account which required me to set the name servers at Freenom. If you’ve used Cloudflare, you know the drill.
Step 2: Set up a Free Website Repository
For some reason I don’t remember, I have a Github account. It was unsurprisingly empty. So I clicked the “New” button to get this process started.
I gave the repository an easy name, and set it to Private. I don’t want people poking around the site code on Github, and Cloudflare Pages can connect directly into my account with permission.
After I clicked the “Create repository” button, the next screen provided a link to upload an existing file. Except that I didn’t have any existing files to upload.
Step 3: Free Hosting For Your Site’s Static Files
As much as I love WordPress, I did not feel like converting one of my sites to static files with something like Simply Static. So I grabbed a template from HTML5 UP. For this demo, I didn’t change any content. I just dragged them right into Github. Simple as that.
After dragging the files in, you need to scroll down to the bottom to Commit Changes for your repository to go live.
It didn’t take long for Github to process the files.
And now I have an active repository. Just as on your local computer, you can click and edit any of these files. Upon saving, the repository will update.
Step 4: Activate Pages (They’re fast!)
You’re now done at Github. It’s time to fire up Pages at Cloudflare. There’s a Pages link on the main menu in the right column.
Once in Pages, you have to link to your Github account, which doesn’t take much time. Then your list of repositories will show up and you pick the one you just created.
Now that you’ve selected your project, you pick a production branch. I only have one, and that’s “main.” There are no settings to change on this screen. Just Save and Deploy.
It doesn’t take long to deploy Pages, and you’ll end up with a site at a generic .workers.dev hostname. You can certainly test it out at this point.
Step 5: Set Up Your Website Custom Domain
Since I already added my domain to Cloudflare, I’m almost all set. Just click on the Custom Domains link at the top so you can begin.
I selected the domain I just added to my account, and Cloudflare automatically created the DNS record for that domain.
Now all that’s left to do is redirect ‘www’ requests to the root domain of my site. I use “AAAA” IPv6 records because they’re easy to set up with a placeholder IP address of ::. Make sure it’s set to orange cloud Proxied so the Page Rule will work.
And now for the Page Rule: Match the full ‘www’ hostname with a wildcard at the end to to catch any requests in that subdomain. Then set a Forwarding URL to the non-www hostname with a $1 at the end to forward any path to the new site. Make sure you Save and Deploy.
Step 6: Enjoy Your Fast, Free, Static Website
As soon as that’s done, your amazingly fast static website will be live for absolutely free! And it will be hosted “serverless,” which means you don’t need hosting for your site. As this is a static site, I did not bother with Firewall Rules.
Once I gave this a test run on a few static sites, I thought I’d share the easy way to get free fast static website hosting, then discovered JGC already blogged about it.