Creating and Hosting a Static Website on CloudFlare for Free


February 7, 2026 / Coding

SVG Illustration of HTML and CloudFlare logos
Static sites are cooool

Why I Think This is Cool

This post will guide you through, step-by-step, creating a incredibly basic static html website and hosting it on CloudFlare Pages.

I think creating a website for yourself is one of the most fun, empowering, and helpful things you can do during the rise of AI. In a world where more and more of the web is getting eaten by people mishandling AI, it’s an awesome feeling to make something 100% authentic, even if it looks like crap. So that’s what I’m going to walk you through today.

Step 1: Code Editor

Before we can write code we need a tool to write code in. This is called a code editor or an IDE (integrated development environment). There are literally dozens (probably hundreds) of options but the most commonly used code editor is VS Code, so let’s install that.

Visit the VS Code website and download the version you need for your operating system: https://code.visualstudio.com/download

Screenshot of VS Code download page

Step 2: Get Setup

Alright now that you have a code editor we need to write some code. Start by clicking open folder and creating a folder on your computer that your code can live in then open it.

Screenshot of VS Code open folder button

Now you should be able to see on the sidebar that you have opened that folder, in my case I named it StaticWebsite

Screenshot of VS Code explore sidebar

Step 3: Create The File

Now that we have a folder we need to create the file that will hold all of our code for our website. Inside your project folder click the new file button and create a file called index.html.

Screenshot of VS Code create new file button

Your project should now look like this:

Screenshot of VS Code project overview

Step 4: Write Some Code

Alright now we get to write some code. VS Code takes some of the guess work out of this. If you type a “!” and hit enter it will automatically create a basic HTML template for you. It should look something like this:

Screenshot of VS Code index.html file

Alright, this is a good start. Let’s replace the title with the name of your site and let’s go ahead and start adding some content. Inside the

tag lets insert this code: . Make sure to hit save.

Screenshot of VS Code with added title and h1

Step 5: Let’s Get This on the Web

Believe it or not you now have the foundations of a website and we can go ahead and get it hosted on CloudFlare. I’m not going to walk you through creating an account so go to https://www.cloudflare.com/, create an account, and login. When you get to your dashboard it should look similar to this:

Screenshot of CloudFlare dashboard

On the sidebar you should see a navigation item titled “Compute & AI” go ahead and click that then select “Workers & Pages” when it drops down.

Screenshot of CloudFlare dashboard navigation to workers & pages

Then hit “Create application” at the top

Screenshot of CloudFlare pages create application button

You should now have a new popup with different options. Ignore all the obvious options and click “Get started” at the bottom.

Screenshot of CloudFlare pages get started button

Alright, we are approaching the finish line here. Click “Get started” under the “Drag and drop your files” option.

Screenshot of CloudFlare pages drag and drop files section

Next you will need to give your project a name and hit “Create project.” After a second you should see a place to drag and drop website files. Make sure you saved your changes in VS Code then drag your folder that contains your index.html file over.

Screenshot of CloudFlare pages upload project assets section

Step 6: The Moment of Truth

Now that your files are uploaded you should see a button that says “Deploy site,” hit it. Then on the next page click “Continue to project.”

Screenshot of CloudFlare pages deploy site button

Step 7: You Did It!

Congratulations, you have successfully created a website and hosted it for free on CloudFlare. Click the little blue box icon with an arrow to open your site in another tab.

Screenshot of CloudFlare view site icon on pages dashbaord

Wrapping Up

I hope it’s pretty obvious at this point that the website you created isn’t fully “fleshed out.” It’s just a heading on a page. But, It’s the start of something awesome, and it’s how I started learning web development 10 years ago. The web is a canvas and you’ve just painted your first stroke. If you’d like to explore web development, and learn to build out your site more, here is a list of resources I’d recommend:

Thanks for reading and if you see any mistakes or if this guide needs to be updated please shoot me an email.




Source link

Leave a Reply

Your email address will not be published. Required fields are marked *