Build and Host Your Own Website for Free with Claude Code, GitHub and Cloudflare

You do not necessarily need traditional web hosting to put a website online.

If you are building something relatively simple, like a portfolio, landing page, restaurant menu, personal website or small business website, you can build it locally with AI, store the code on GitHub and let Cloudflare publish it to the internet.

The result is a real website with its own URL, automatic deployments whenever you make changes, and potentially €0 in hosting costs.

In this guide, I will take you through the entire process, starting with an empty folder on your computer and ending with a live website.

You do not need to be an experienced developer. You should, however, be comfortable following instructions, installing a few tools and occasionally troubleshooting something if it does not work exactly as expected.

For this tutorial, we are building a static website.

A static website is a website where the pages can be generated in advance and served directly to visitors.

This makes static websites fast, simple to host and perfect for projects that mainly need to display information.

Imagine, for example, a website for a local restaurant.

It might have a Home page, Menu, About, Gallery and Contact page.

Visitors open pages, look at photos, read information and click buttons. There does not necessarily need to be a database or a custom server processing something every time somebody opens the website.

That is exactly the kind of website this setup is great for.

Before we start installing anything, it helps to understand what each tool is actually doing.

We are going to use Claude Code, Astro, Node.js, Git, GitHub and Cloudflare.

They each have a different job.

Claude Code is the AI coding assistant we are going to use to create and modify the website.

Instead of manually writing every file and every line of code, you describe what you want to build.

Claude can then work directly inside your project folder, create files, edit code, install packages, run commands and help fix problems.

This is different from simply asking an AI chatbot to give you some HTML. Claude Code is actually working with the project on your computer.

Astro is the framework we are going to use to structure the website.

You do not need to learn Astro before doing this tutorial. Claude will create and manage most of the project for you.

Astro works particularly well for fast, content-focused websites, which makes it a good fit for portfolios, business websites, landing pages and similar projects.

Node.js allows your computer to run the development tools needed by the project.

When you install Node.js, you also get npm.

npm is used to install the packages your Astro project needs and to run commands like starting the website locally or creating the final production build.

Git tracks changes to your project.

You can think of it as version history for your code.

It also gives us the ability to send the project from your computer to GitHub.

GitHub stores your website's source code online.

That gives you a remote copy of the project, but there is another important reason we are using it.

Cloudflare will connect directly to your GitHub repository. Whenever new changes are pushed to GitHub, Cloudflare can automatically rebuild and publish the website.

Cloudflare Pages is what turns the project stored on GitHub into a public website.

Cloudflare takes your code, runs the production build and publishes the resulting website to its global network.

After that, anyone can open your website through a normal URL.

GitHub, Node.js and Git can all be used for free.

Cloudflare also offers free static hosting suitable for this type of project.

Claude Code requires supported Claude access or API usage.

A custom domain is optional. You can publish the website without owning a domain and Cloudflare will give you an address similar to your-project.pages.dev.

Later, you can connect something like yourwebsite.com.

First, create your GitHub and Cloudflare accounts if you do not already have them.

Then install Node.js, Git and Claude Code on your computer.

Once everything is installed, it is worth checking that your computer can actually access each tool before continuing.

Open Terminal on macOS. On Windows, open Terminal or PowerShell.

Run these commands one at a time.

Each command should return a version number.

For example, running git --version should return the version of Git currently installed on your computer.

If one of the commands returns an error saying the command cannot be found, that tool probably has not been installed correctly yet.

Fix that before moving on.

Once Claude Code is installed, start it from Terminal.

The first time you use Claude Code, you may be asked to authenticate your account.

Follow the instructions on screen.

Once Claude opens successfully in your terminal, you are ready to create the website.

Create a new empty folder somewhere on your computer.

You could call it my-website.

The location does not really matter. You can put it on your Desktop, inside Documents or inside a folder where you normally keep projects.

The important part is that we want Claude Code working inside this folder.

Open Terminal and navigate into it.

For example:

Once you are inside the correct folder, start Claude Code.

Now we are going to tell Claude to create the technical foundation for the website.

Instead of manually creating the Astro project ourselves, we can ask Claude to handle the setup.

Claude should now create the Astro project, install the required dependencies and start the development server.

During this process, Claude may ask for permission before running commands or changing files.

Read what it is asking for before approving anything.

Once Claude finishes creating the project, it should start the Astro development server.

You should see an address similar to:

Open that address in your browser.

You now have a website running.

There is one important thing to understand at this stage.

The website is not online yet.

localhost means the website is currently running only on your own computer.

Someone on another computer cannot open that address.

This local version is where you build, test and improve the website before publishing it.

Now comes the interesting part.

You need to tell Claude what you actually want to build.

This is also where many people get disappointing results from AI. They give the AI almost no information.

Claude can technically work with that.

But what exactly does “nice” mean?

What is the website for? Who is visiting it? What should visitors do? What pages should exist? What should the website look like?

The quality of your instructions has a huge effect on the quality of the result.

Compare that to “Build me a restaurant website.”

The shorter prompt gives Claude almost nothing to work with.

The detailed prompt gives it structure, direction and constraints.

You do not need to create the perfect website with one giant prompt.

A much better workflow is to build something, look at it and then improve it.

Think of Claude as someone working on the project with you.

Open the local website, look at what Claude created and then explain what you want changed.

Repeat that loop until you are happy with the website.

Being specific is much more useful than saying things like “Make it better.”

Explain what feels wrong and what you want instead.

A website looking correct in your browser does not necessarily mean it is ready for production.

Before publishing, ask Claude to review the entire project.

One of the most important things Claude should test is the production build.

Astro uses:

If everything works correctly, Astro should generate a folder called:

That folder contains the production version of your website.

It is essentially the finished website that Cloudflare will later publish.

Now we need somewhere online to store the website's source code.

Go to GitHub and create a new repository.

Give it a simple name, for example my-website.

You can choose whether the repository should be public or private.

For this workflow, leave the repository empty.

We are keeping it empty because the project already exists on your computer.

If GitHub creates files before we push the local project, it can create an unnecessary conflict.

Once the repository is created, GitHub will show you its URL.

It should look similar to:

Copy that URL.

Go back to Claude Code.

Instead of manually setting up Git and entering all the Git commands yourself, ask Claude to do it.

Claude should initialize Git if necessary, check the project files, create a commit, connect the local project to your GitHub repository and push the project to the main branch.

If your computer has never connected to GitHub before, you may be asked to authenticate.

Follow the instructions shown on screen.

Once Claude says everything has been pushed, open the repository in GitHub and refresh the page.

You should now see your project files.

Now we can publish the website.

Log into Cloudflare.

Open Workers & Pages.

Choose Create application, select Pages, then choose Import an existing Git repository.

If this is your first time connecting GitHub to Cloudflare, Cloudflare will ask for permission to access your GitHub account.

Authorize it.

You should then see your available repositories. Choose the website repository you just created.

Cloudflare now needs to know how your project should be built.

For the Astro project created in this tutorial, use the following settings.

Cloudflare may also ask you to choose a project name.

This name can become part of your temporary Cloudflare URL.

For example, if your project is called my-website, Cloudflare may give you my-website.pages.dev.

Once the settings are correct, start the deployment.

Cloudflare will now take the code from GitHub and create the live website.

Behind the scenes, the process looks something like this:

You will see deployment logs while this happens.

If everything is configured correctly, the deployment should finish successfully.

Cloudflare will give you an address similar to:

Open it.

Your website is now live on the internet.

This is different from the localhost URL you were using earlier.

You can send the Cloudflare URL to somebody else and they can open it on their own phone or computer.

This is where the setup becomes especially useful.

Cloudflare is now connected to your GitHub repository.

That means you do not need to manually upload the website every time you make a change.

Imagine that tomorrow you want to add a new section to the website.

Open the project on your computer, start Claude Code, tell Claude what to change and test the result locally.

When you are happy, ask Claude to push the changes.

Claude pushes the new version to GitHub.

Cloudflare detects the new commit.

It automatically creates a new build.

If the build succeeds, your live website updates.

Your website is already completely usable with its Cloudflare address.

But you probably do not want your final business website to use something like my-business.pages.dev.

You probably want mybusiness.com.

To do that, you need to own a domain.

If your domain already uses Cloudflare DNS, connecting it is straightforward.

Open your Pages project.

Go to Custom domains.

Click Set up a domain.

Enter yourwebsite.com and follow Cloudflare's instructions.

Cloudflare can normally configure the required DNS record automatically when the domain is already managed through Cloudflare.

If the domain is registered somewhere else and does not currently use Cloudflare DNS, you may need to add the domain to Cloudflare first.

Cloudflare will provide nameservers.

You then go to the company where the domain is registered and replace the current nameservers with the ones Cloudflare gives you.

Once Cloudflare detects the change and the domain becomes active, you can connect it to your Pages project.

These two URLs are technically different:

yourwebsite.com

www.yourwebsite.com

It is usually better to choose one as your primary version.

For example, use yourwebsite.com as the main address and redirect www.yourwebsite.com to it.

You can also do the opposite if you prefer using www.

The important thing is that visitors consistently end up on one main version of the website.

So when I say that you can host the website for free, I specifically mean the hosting part.

You may still pay for the AI tool you use to build the website.

And if you want your own .com, .me or another custom domain, you normally need to pay the yearly domain registration fee.

First, test the production build on your own computer.

If the build fails locally, there is a good chance Cloudflare will fail for the same reason.

Copy the error and give it to Claude.

Check your build output directory.

For the Astro setup used in this tutorial, it should be dist.

Make sure Cloudflare's build directory is also set to dist.

First, open GitHub.

Check whether your latest changes actually appear there.

Editing files on your computer does not update the live website by itself.

The changes need to be committed and pushed to GitHub.

Once GitHub has the latest version, check Cloudflare's deployment history and confirm that a new deployment was triggered.

Make sure the Astro development server is running.

You can normally start it with:

Then open the local address shown in Terminal.

Check that the repository URL is correct.

You should also make sure your computer has permission to access your GitHub account.

If Git gives you an error, give the exact error message to Claude rather than trying random fixes.

Check that the domain is active inside Cloudflare.

Then check that it appears under your Pages project's custom domains.

If you recently changed nameservers or DNS records, the changes may also need some time to propagate.

A static website runs in the visitor's browser.

Anything that is shipped to the frontend should be treated as potentially visible to visitors.

Do not put private passwords, secret API keys or sensitive credentials directly into your frontend code.

Claude Code can change files and run commands on your computer.

That is what makes it useful.

It is also why you should read permission requests before approving them.

Make sure the requested action makes sense for what you asked Claude to do.

A website can look excellent on your laptop and still be difficult to use on a phone.

Always check the mobile version before publishing.

AI can confidently create information that was never provided.

Before publishing, verify things like:

A few years ago, getting from an empty folder to a deployed website required you to understand much more of the technical process yourself.

AI coding tools have changed that.

Claude can help create the project, write components, fix errors, run builds and even help with deployment.

But easier coding does not automatically mean better websites.

The important decisions still come from you.

Claude can write the code.

It cannot automatically understand your business, your customer or what makes the project useful unless you give it that context.

The better you understand what you are trying to build, the better AI becomes as a tool for building it.

And once you understand the workflow in this guide, you can repeat it for almost any simple static website you want to create.