Build a Website Without Writing Code: Claude Code + Three Free Hosting Options Tested

Title

Build a Website Without Writing Code: Claude Code + Three Free Hosting Options Tested

Meta Description

How to build a website without coding? This article demonstrates using Claude Code to generate an invitation page with one prompt, and tests three free hosting solutions—Cloudflare Pages, Workers, and GitHub Pages—covering file limits, free quotas, and a post-launch self-check list, plus troubleshooting for the file protocol issue.

Article Content

Many people think building a website requires knowing how to code. In reality, as long as you can describe your requirements in natural language, an AI coding assistant in your terminal can generate complete web page files for you. What really stumps most people isn't "can't build it" but "how do I put it online for others to see"—a page that opens fine when double-clicked locally but won't open when sent to a friend, and the problem often lies in the first few characters of the address bar.

This content comes from a hands-on demo by a Bilibili creator: using Claude Code to make a weekend party invitation page, then walking through three free hosting solutions. Below we break down the entire process, including the official rules for each path, free quotas, and a 10-second post-launch self-check.

Step 1: Use Plain Language to Have Claude Code Generate a Web Page

Claude Code is an AI coding assistant installed in the terminal—you describe requirements, it writes the files. The creator chose an "invitation page" as a practice project because it's inherently meant to be sent to others—if it can't be sent out, it loses its purpose, making it perfect for practicing the launch process.

Four Things to Clarify in Your Request

Prompts for Claude Code need to cover: what to make, what content to include, what technology to use, and what it should look like. The specific requirements in the demo were: a weekend party invitation page with the event name, time, location, countdown, and a "I'm coming" button below that displays a thank-you message when clicked.

Two of these sentences are specifically for going live:

• Use only HTML, CSS, and JavaScript—this produces a purely static web page, no backend needed, supported by all three hosting solutions, and the least hassle.
• Name the homepage file index.html—when a hosting platform opens your URL, it looks for this name by default. GitHub's official documentation states this clearly; if not found, it returns a 404.

After pressing Enter, Claude Code will request permission to create files—just approve. Once done, three files appear in the folder. Double-click index.html, the countdown starts ticking, and clicking the button pops up a thank-you message. Not happy with the button color? Just say so in plain language in the terminal, refresh the page, and you'll see the change.

Why Opening Locally Doesn't Count as "Going Live"

Look at the address bar—the first part is file:///, followed by a path on your computer. This means the web page is just a piece sitting on your desk; only someone sitting in front of this computer can see it. Send the address to a friend, and their computer doesn't have this file at all—naturally it won't open.

To let people see it, you need to move the files to a place that's online 24/7 and accessible to anyone—that's hosting, and the URL the hosting platform assigns you is your address.

The Essential Difference Between the file:// Protocol and the http(s):// Protocol

file:// is the protocol browsers use to access local disk files—it's followed by an absolute path on your computer, such as file:///Users/yourname/Desktop/invite/index.html. This address is only valid on your computer because the file only exists on your hard drive. When a friend clicks this link in WeChat, their browser tries to find the same path on their own computer, naturally fails, and shows "Cannot open page" or a blank page.

http:// and https:// are network protocols that point to a resource on some server on the internet. What hosting platforms do is upload your files to their servers and assign a publicly accessible URL. This way, anyone with an internet connection can request your files through this URL. https adds a layer of encryption over http, and modern hosting platforms provide https by default.

Understanding this, you can see why "opens fine when double-clicked locally" doesn't equal "others can access it"—the former is local file reading, the latter is a network request, and they take completely different paths.

The Secret in the Address Bar: The Difference Between file and http Protocols

This is the most easily overlooked concept in the entire process. The file:// protocol points to a file on your local disk, while the https:// protocol points to a server on the network. Your friend can't open your page not because their network is broken, but because the file path you mentioned doesn't exist on their device.

Once you understand this, the logic for choosing among the three hosting routes becomes clear: they all essentially help you move files to a public server and assign an accessible URL. The differences lie in operational complexity, free quotas, and whether automatic updates are supported.

Three Free Hosting Routes: How to Choose

The creator laid out all three paths side by side and gave clear recommendations: if you just want to get online fastest, choose Cloudflare and drag the folder; if you want the URL to auto-update after changing files, use Cloudflare's Git method or GitHub Pages; if your site needs to store lists, have a backend, or run a persistent program, then it's time for your own server.

Cloudflare: Dragging Folders Is Fastest, Workers Is the New Direction

Log in to the Cloudflare dashboard, find Workers and Pages on the left, create an application, choose drag-and-drop files, enter a project name, drag in the folder containing index.html, and deployment is complete. The URL is the project name plus the pages.dev suffix. The official page states you can start for free without a credit card.

The drag-and-drop upload limits are: up to 1,000 files, with each file not exceeding 25MB. An invitation page with a few files is far from hitting these limits. But there's a pitfall to know in advance: projects created by dragging folders cannot later be converted to Git auto-deployment—if you want automatic updates, you'll need to create a new one.

Another change worth noting: Cloudflare's older product is called Pages, but the official documentation page header now states that Workers covers most of Pages' use cases and recommends starting new projects with Workers. Pages hasn't been discontinued, and the drag-folder approach still works. If you go the Workers route, the core is a single wrangler deploy command—you can also just have Claude Code deploy the current folder following the official static website guide; the step of logging into your Cloudflare account requires you to complete it yourself in the terminal as prompted. After successful deployment, the terminal will give you a URL ending in workers.dev—if you can open the invitation page on your phone, it's a success.

Regarding free quotas, the official Workers documentation states: accessing static files is free and unlimited, up to 20,000 files per site, 25MB per file. After connecting Git auto-deployment, each push counts as one build, with 500 builds per month on the free tier.

Static Websites and Static Hosting

A static website is one that doesn't need server-side programs to dynamically generate content—it typically consists of static files like HTML, CSS, JavaScript, and images. The server returns whichever file the browser requests; no database or backend logic is needed. Invitation pages, portfolios, and documentation are all typical static websites.

The advantage of static hosting is simplicity, speed, and low cost (even free), because the server only needs to return files without running programs. Cloudflare Pages, GitHub Pages, Netlify, and others are all static hosting services.

In contrast, dynamic websites require servers running PHP, Node.js, Python, or other programs to generate pages or process forms—this requires your own server or cloud host. When the article says "you need your own server only when you need to store data or have a backend," it's referring to dynamic requirements.

GitHub Pages: The Repository Must Be Public

The official quick start steps are short: create a new repository in the top right, name it "your-username.github.io", put index.html and other files in it; then go to repository settings, find Pages on the left, select "Deploy from a branch" as the source, choose the branch where the files are, and after a moment the URL will open.

Three things you must know in advance:

1. Using GitHub Pages with a free account requires the repository to be public. Anyone can see your files—not a single character of passwords or keys should go in.
2. Official usage limits: site no larger than 1GB, 100GB soft bandwidth per month, 10 soft builds per hour. Invitation pages, portfolios, and documentation are far from these limits.
3. Usage restrictions are stated directly: not allowed as a free online store, not for sites primarily involving commercial transactions, and don't upload passwords, credit card numbers, or other sensitive information. Personal homepages and project documentation are perfectly fine—if you want to run an online store, you'll need to go elsewhere.

At this stage, Claude Code can help you organize files, write documentation, and push files to the repository, but you'll need to use your own GitHub account for pushing.

Incidentally, Cloudflare can also connect to GitHub repositories, automatically re-publishing each time a new version is pushed—if you want "auto-update after changes," this is a shared benefit of both.

Basic Concepts of Git and GitHub

Git is a version control system used to record every modification to files, making rollback and collaboration easy. GitHub is a Git-based code hosting platform where you can turn a local folder into a "repository" and push it to GitHub's servers.

For hosting web pages, the benefit of Git is: each time you modify files and push to GitHub, GitHub Pages automatically re-publishes the latest version with the same URL. This is the principle behind "auto-update."

If you haven't used Git before, Claude Code can help you run commands like git init, git add, git commit, but pushing to GitHub requires you to log in to your own account (usually via browser authorization or entering a token). A public repository means anyone can browse your code, so remember not to commit passwords, API keys, or other sensitive information.

Your Own Server: Maximum Freedom, Maximum Effort

Static web pages like invitation pages don't actually need it—going to a server just adds work for yourself. Its value lies elsewhere: when your site needs to store data (like a registration list), needs a backend, or needs a program that runs continuously, then it's time for it.

Taking Oracle's free machines as an example, the official page states that new accounts get $300 in trial credits usable within 30 days; after 30 days, without any action, the Always Free portion continues to be free, including two AMD small machines (each with 1/8 core, 1GB memory), plus ARM quota of 1,500 core-hours and 9,000GB-hours per month, roughly equivalent to a 2-core 12GB machine running continuously. The cost is that registration requires a bank card, and system updates, firewalls, and ports all need to be managed by yourself.

A 10-Second Post-Launch Self-Check

After the page is deployed, Claude Code says "done," but clicking through it yourself is more reassuring than trusting its word. This checklist can catch most problems:

• Open on a different network: Turn off WiFi on your phone, use mobile data to enter the URL—this is what your friend sees, not the cache on your computer.
• Open again in a different browser or incognito window.
• Click every button: Does the countdown run? Does "I'm coming" respond?

• Check for private information: Anyone can right-click to view the source code of a public web page—don't write real phone numbers, home addresses, or any keys into the page. If the invitation page needs contact info, use one dedicated to the event. You can also directly ask Claude Code to check whether any passwords, keys, or personal information have been written into the web page files in the current folder.

If you get a 404 when opening, it's most likely that index.html isn't at the top level of the selected folder—move it out and redeploy. To change content later, just tell Claude Code, and publish again after changes: re-drag the folder if you used drag-and-drop, re-run the command if you used commands, or push a new version if connected to a repository and it will auto-update.

Common Causes of 404 Errors

404 means the server cannot find the requested resource. In static hosting, the most common cause is that the homepage file isn't named index.html, or it isn't at the root level of your specified publish directory. When a hosting platform receives a request for the root URL, it looks for index.html by default; if not found, it returns 404.

Another possibility is inconsistent case in file paths: Index.html and index.html are two different files on most Linux servers. Also, if you use subfolders, make sure link paths are correct.

When troubleshooting, first confirm that index.html is at the top level of the folder you uploaded, then check whether the filename is all lowercase. If it's still 404, check the hosting platform's dashboard for deployment error messages.

Cost Reminder: Hosting Is Free, Tools Are Not

All three routes have free hosting, but Claude Code is not free. The official quick start page states clearly that using it requires a Claude subscription or Console account. If you're already subscribed, you can proceed; if not, factor in the tool cost first.

Also, the pages.dev or workers.dev URLs provided by platforms work, but they're more like temporary addresses. For long-term use or printing on business cards, switching to your own domain is more presentable. Cloudflare Pages' free tier allows up to 100 custom domains per project—how to get a cheap or even free domain is another topic.

All three routes in one sentence: for fastest launch, choose Cloudflare drag-and-drop folder; for the officially recommended new approach and auto-updates, choose Workers; for non-commercial small web pages only, choose GitHub Pages (public repository); for storing data or running a backend, use your own server. Platform quotas and rules change, so before actual deployment, it's recommended to double-check the numbers against the official pages.

One-line Summary

Generate static web pages with Claude Code and compare the launch processes and pitfalls of three free hosting solutions.

Paragraph Summary

The article uses making a weekend party invitation page as an example to demonstrate how to command Claude Code in the terminal with natural language to generate a purely static web page, emphasizing that the homepage must be named index.html. It then explains the difference between the local file:// protocol and the public http(s) protocol, clarifying why a page that opens locally can't be shared. Next, it compares three free hosting routes in detail: Cloudflare drag-and-drop folder (fastest, but with file count limits and no conversion to Git auto-deployment), Cloudflare Workers (officially recommended new direction, command-line deployment), GitHub Pages (requires public repository, prohibits commercial use), and your own server (suitable for scenarios needing a backend and data). Finally, it provides a 10-second post-launch self-check list and cost reminders.