How to host your website for free with Cloudflare

People often wonder: "Do I need to pay to host my web site or a blog?". The answer is a decisive NO. You can absolutely avoid paying for hosting your website, web app or a blog. A simple yet powerful way to host your fully functional JavaScript-enabled web site and apps is by using CloudFlare Pages and Workers, among other methods. You can host for free both the client-side apps (e.g. a classical info web page) and the ones with a backend (i.e. to hide your secret variables from client's browser) or to interact with a database. Hosting apps with a backend would require Claudflare (CF) workers. You can read about creating and hosting apps with workers for backend here. But let's start with simpler option - CF pages - for hosting fully functional static web sites.

CloudFlare Pages

CF pages serve static files to the client. That is, the files like HTML/CSS and JavaScript (JS) can be uploaded to CF and served online in multiple locations around the world in a minute. Note, that the following works with vanilla (or standard) JS and does not work with e.g. React apps.

First you would need a CloudFlare account, which is free. Following the registration go to your dashboard (dash.cloudflare.com) you are likely to see the following welcome board:

Chose "Build apps on our developer platform".

Alternatively, just pay atention to the sidebar:

Select: Compute (Workers) -> Workers & Pages -> Click "Create application" button:

You will then be presented with a "Get started" menu with "Workers" as a default tab. We now need to switch to the "Pages" tab and select "Drag and drop your files" so that we can upload our HTML files from a local computer. See CF app screenshot below:

Clicking on "Get started" button would open a dialogue for the project creation. You would need to chose a name for your project. If the name is unique it will become the name of your subdomain, where you web site will be hosted. For example, I chose the name "zerocoststartup" (see screenshot below) and the address of my web site is thus: zerocoststartup.pages.dev.

Please note that if your project name is not unique among pages.dev subdomain CF would add some random characters to your subdomain name after the dash.

Next you need to upload your static web site files (HTML/CSS/JS bundle of just a single HTML file). Once you get the files ready you either need to zip them or place in the single folder for uploading.

If you don't have a static web site ready you can generate a single HTML file with the following static web sites generator (that also generates functional JS): Iterixa.

When the job is done just copy resulting code into index.html file and save it locally. IF you do not have code editor you can first creat index.txt, copy-paste there code generated by Iterixa, save the file and rename it to index.html. You can now open it with the browser as a fully functional JS-enabled web page. For uploading to CF remeber to zip your index.html or to place it to the folder (name does not matter) and upload this folder to CF app.

This is it, the web site is now (within a minute) is live and fast served worldwide via CF's Content Delivery Network (CDN).

When you need to update your website go to Workers & Pages again and select your project.

Then click "Create Deployment" and upload a new zip file or a folder with updated files.

And that is how you can host your interactive JS-enabled web site for free on CloudFlare.

If you prefer to dynamically update your files via GitHub/GitLab rather than upload manually each time to CF you would need to chose the different rout when creating an application and chose "Import an existing Git repository" instead of "Drag and drop your files".

Final remark, despite the fact that the your site is on a subdomain it is still possible to get it indexed by e.g. Google so that it appears in search results. Alternatively you can get the domain name that you own and map it to your subdomain on pages.dev