June 3, 2024
Homelab Tutorial
The goal of this tutorial is to host your static Blocs 5 site in Cloudflare Pages for free.
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.
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 the share icon > 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!
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!