Cloudflare Pages + Blocs

The goal of this tutorial is to host your static Blocs 5 site in Cloudflare Pages for free.

Setup GitHub

Cloudflare Pages utilizes Github to store the source code for your site. Login or make a GitHub account at github.com. Create a new repository and name it whatever you’d like. I recommend making a private repository. Download GitHub Desktop and sign in with your account. 
Click Add > Clone then select your newly created repository and clone it to your computer.

Setup Blocs

Go to your site project in Blocs then File > Project Settings and make sure HTML is selected as the page file type. Then go to Share > Quick Export and select the location of your cloned GitHub repository. 

TIP: Cloudflare Pages does NOT have a built in 404 page. I suggest making a 404 page template in Blocs. Rename the 404 page in the export to 404.html. Go into the page with a code editor and find “../“ and replace this string with “https://yoursite.com/“. Remember to put the slashes in that way the proper files will load on your 404 page. Cloudflare Pages handles 404 errors by looking for a page named 404.html in the same directory or higher as the error. Put this 404.html file in the root of your repository.

In GitHub Desktop give a summary for your changes, I usually do a version number. Then click Commit to main and Push origin. Your site is now uploaded to GitHub!

Setup Cloudflare Pages

Login to your Cloudflare Dashboard and go to Workers & Pages on the left sidebar. Click Create Application then Pages then Connect to Git. Login to your GitHub account and choose the repository containing your site. Click Begin setup then name your project whatever you’d like. Click Save and deploy and watch while your site is being pushed to Cloudflare servers. Cloudflare will automatically give you a pages.dev domain with an SSL cert. You can add your own domain by going to Custom domains in your project settings. Cloudflare will ask you to set a CNAME record on your domains nameservers.

Congratulations! You now have your Blocs site hosted on Cloudflare for free!