Free Fast Static Website Hosting

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:

JGC Tweeted about a fast way to host a static site for free.

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 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.

Your free Github account has a button to create a new repository where you will host your website files.

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.

Github repository settings: I named it, set it to Private and I skipped the default files.

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.

The next screen provided the important "upload an existing file" link.

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.

Drag website's static files from your computer into Github's upload window.

After dragging the files in, you need to scroll down to the bottom to Commit Changes for your repository to go live.

Green "Commit changes" button at Github.

It didn’t take long for Github to process the files.

Github processing takes a few minutes.

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.

File manager window at Github.

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.

Cloudflare main menu with a link to lightning-fast Pages to host your website.

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.

Cloudflare Pages main screen with a link to your website files.

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.

Pages setup from your Github repository with a "Save and Deploy" button to begin hosting your fast free website.

It doesn’t take long to deploy Pages, and you’ll end up with a site at a generic hostname. You can certainly test it out at this point.

Cloudflare Pages deployment status screen.

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.

Blue "Set up a custom domain" button.

I selected the domain I just added to my account, and Cloudflare automatically created the DNS record for that domain.

Blue "Activate domain" button.

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.

DNS records for my site.

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.

Page rule to forward 'www' to the main site.

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.