W3 NOTES BLOG | The Internet Money Feed : CLOUDFLARE PAGES | Put Your Website on the Internet — Deploy a Static Site to Cloud Hosting Without Managing a Server

A website stored on your computer is not automatically

available to people on the Internet. To make it publicly accessible, its files must be served through an Internet-connected hosting environment.

Traditionally, website owners might rent hosting, configure a server, upload files through an FTP client, and manage a domain. Those methods are still useful, but modern cloud platforms offer alternatives for certain kinds of websites.

Cloudflare Pages lets you publish static websites to a globally distributed hosting platform. You can deploy HTML, CSS, JavaScript, and other website assets without managing a traditional web server yourself.

This is useful when building a personal website, portfolio, documentation site, landing page, small business information site, or front end for a digital project.

In this practical guide, you will prepare a simple website, deploy it through Cloudflare Pages using the dashboard's Direct Upload workflow, obtain a public address, verify that the site works, and learn how to update it safely.

You will also learn an important limitation: a Direct Upload project cannot later be converted into a Git-integrated project. If you want automatic deployment whenever you update a GitHub repository, choose the Git integration route when creating your project instead.

1. Understand What Cloud Hosting Does

Before publishing anything, understand the difference between the files you create and the infrastructure that makes them available online.

A website might contain:

HTML files that define its content and structure.
CSS files that control its presentation.
JavaScript files that provide browser-side interactivity.
Images, icons, fonts, and other static resources.
Additional files generated by a website framework or build process.

When you publish these files to a suitable hosting platform, the platform makes them available through web addresses.

A visitor enters the address in a browser. The browser requests the relevant resources, and the hosting platform returns them.

Cloud hosting moves some of the infrastructure work away from the website owner. Instead of maintaining the physical server, operating system, and web server software yourself, you use a managed service to deliver the site's files.

However, cloud hosting does not eliminate every technical responsibility. You still need to manage your content, keep your code safe, understand the platform's limits, and test updates.

Cloud hosting versus cloud storage

Cloud storage and cloud hosting solve related but different problems.

Cloud storage services help you store and retrieve files. Website hosting makes website resources available through a web-serving environment configured for that purpose.

Uploading an HTML file to a general-purpose file storage service does not automatically create a properly hosted website.

Cloudflare Pages is designed to deploy website assets, making it suitable for the static-site project in this guide.

2. Decide Whether Cloudflare Pages Fits Your Project

Cloudflare Pages is particularly useful for websites that can be published as static files.

Examples include:

Personal portfolios.
Small business information websites.
Product landing pages.
Documentation and help pages.
Static blogs generated by a website tool.
Front-end interfaces for applications.
Small educational websites.

A static website can still contain JavaScript and provide interactive features. The key distinction is that the deployed files do not require a traditional application server to generate every page request.

What about dynamic websites?

A website that depends on PHP execution, a WordPress installation with a database, or a continuously running Node.js application cannot simply be copied to Pages as ordinary static files and expected to work unchanged.

Some applications can be adapted using Cloudflare's additional server-side products, such as Workers and supported data services. That requires a separate architecture and deployment approach.

For this tutorial, we will publish a simple static website.

If your project contains a database, private server-side logic, login sessions, or backend processing, identify those requirements before choosing a hosting platform.

3. Prepare a Website on Your Computer

You need a small website to deploy. If you already have a static website, you can use its prepared output files instead.

For a first exercise, create a folder named:

w3-cloud-demo

Inside that folder, create a file named:

index.html

Open the file in a text editor and add this example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First Cloud Website</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 720px;
      margin: 60px auto;
      padding: 24px;
      line-height: 1.6;
    }

    h1 {
      color: #2563eb;
    }
  </style>
</head>
<body>
  <h1>My First Cloud Website</h1>
  <p>This website is hosted on Cloudflare Pages.</p>
  <p>I created the files locally and deployed them to the cloud.</p>
</body>
</html>

Save the file.

The folder should now contain:

w3-cloud-demo/
└── index.html

You can add more files later. For this exercise, a single HTML file is enough.

Test the file locally

Open the folder and open index.html in your browser.

You should see a heading and two paragraphs. If the file opens as text instead of a rendered page, confirm that it is actually named index.html, not index.html.txt.

This local test confirms that the basic HTML file is usable before you upload it.

Important: This is a simple demonstration site. Do not include passwords, private keys, access tokens, customer information, or other confidential data in files you intend to publish.

4. Understand the Direct Upload Choice Before Proceeding

Cloudflare Pages offers more than one deployment workflow. The appropriate method depends on how you build and maintain your website.

Direct Upload

Direct Upload lets you upload a prepared website folder or supported ZIP archive through the dashboard. It is useful when you want to publish a small static site without first connecting a Git repository.

Git integration

With Git integration, you connect a supported GitHub or GitLab repository. Cloudflare Pages can then build and deploy the site when changes are pushed to the connected repository.

This is better suited to an ongoing development workflow in which source files are version-controlled and updates should be deployed automatically.

Choose deliberately: Cloudflare documents that a project created with Direct Upload cannot later be switched to Git integration. If you begin with Direct Upload and later decide that you want the Git-integrated workflow, you will need to create a separate project.

Official documentation:

https://developers.cloudflare.com/pages/get-started/direct-upload/

For this exercise, we will use Direct Upload because it provides a straightforward way to understand the relationship between website files and cloud deployment.

5. Create a Cloudflare Account

To deploy through the dashboard, you need a Cloudflare account with access to the Pages functionality.

Open the official Cloudflare website: https://www.cloudflare.com/
Select the account registration or sign-in option.
Follow the current registration instructions if you do not already have an account.
Complete any required account verification.
Sign in to the Cloudflare dashboard.

Cloudflare's interface may change, and the exact wording of buttons can differ from the instructions in this article.

Use the official website and follow the current prompts displayed in your account.

You do not need to purchase a custom domain just to complete the initial exercise. Cloudflare Pages can provide a project address under the pages.dev domain.

Check the current terms and plan details before relying on a platform for a commercial or production-critical website.

6. Prepare the Files for Upload

Cloudflare's Direct Upload workflow supports uploading a folder of website assets or a ZIP archive through the dashboard.

For this example, your website consists of one file: index.html.

You can upload the folder containing that file. Alternatively, create a ZIP archive containing the website files.

If you create a ZIP archive, make sure the archive structure is correct.

The desired structure is:

website.zip
└── index.html

A common mistake is creating an archive that contains an extra parent folder:

website.zip
└── w3-cloud-demo/
    └── index.html

The second arrangement may not behave as expected if the deployment process places the parent folder's contents one level deeper than intended.

For a basic site, make sure index.html is at the top level of the deployed website assets.

Cloudflare Pages uses the top-level index.html as the default entry point for a standard static website. If it is missing or buried in an unexpected directory, visiting the site's main address may produce a 404 error.

7. Deploy the Website Through Cloudflare Pages

Now publish the prepared files.

Sign in to the Cloudflare dashboard.
Open the Workers & Pages area.
Select the option to create an application.
Find the Pages deployment workflow.
Choose the Direct Upload or drag-and-drop option presented by the current interface.
Enter a project name.
Select or drag in your website folder or ZIP archive.
Review the selected files.
Start the deployment using the available deploy button.

The exact sequence and labels may change as Cloudflare updates its dashboard. If the interface differs, consult the official Direct Upload guide rather than guessing at unfamiliar options.

Official instructions:

https://developers.cloudflare.com/pages/get-started/direct-upload/

Choose a project name

Choose a name that is easy to remember and appropriate for the site.

For example:

w3-cloud-demo

The name may be unavailable if another project already uses it. If that happens, choose a different name.

Your site will generally receive an address under:

https://PROJECT-NAME.pages.dev

Replace PROJECT-NAME with the actual project name or the hostname Cloudflare assigns to your deployment. The final address may differ if the requested name is unavailable.

After deployment, Cloudflare should display a deployment result and provide a link to the published site.

Do not assume the deployment succeeded merely because you clicked the button. Wait for the dashboard to report the result and open the actual site address.

8. Verify That the Website Is Publicly Accessible

Deployment is only one stage of publishing. You must also verify that the resulting website works.

Open the assigned pages.dev address in your browser.

Check the following:

The page opens without an unexpected error.
The heading and paragraphs appear.
The page uses the expected styling.
The browser address matches the assigned project address.
The page remains accessible after you refresh it.

If practical, open the address in a private browsing window or on another device. This can help distinguish a publicly accessible site from a page that appears to work only because of local browser state.

For a more substantial website, test the links, navigation, images, mobile layout, forms, and other important features.

A successful deployment does not guarantee that every feature works correctly.

For example, a static form may display correctly while failing to submit data because it has no configured backend or form-processing service.

Confirm the entry point

If you receive a 404 error at the root of your site, inspect the deployed file structure.

Cloudflare's documentation specifically advises checking that the website has a top-level index.html when a Pages address returns a 404.

Do not repeatedly redeploy the same files without checking the likely cause.

9. Update the Website After Deployment

A website is rarely finished after its first deployment. You may need to change text, correct an error, add a page, or update its design.

With the Direct Upload workflow, prepare the revised files and create a new deployment using the project's dashboard controls.

A safe update process is:

Keep a local copy of the current website files.
Edit the appropriate file in your local project folder.
Open the updated file locally to check it.
Prepare the complete set of website assets.
Open your Cloudflare Pages project.
Select the option to create a new deployment.
Upload the revised website assets.
Wait for the deployment to finish.
Open the public site and verify the changes.

Follow the current dashboard instructions for selecting the production or preview deployment environment, where those options are available.

Keep a backup

Do not overwrite your only copy of a working website without preserving it.

A simple versioned folder system can help:

w3-cloud-demo/
w3-cloud-demo-backup/
w3-cloud-demo-v2/

For a real project, version control is usually a stronger way to track changes. Git can record what changed, when it changed, and how to return to an earlier version.

If you expect to update the site frequently, consider whether Git integration is the more appropriate long-term workflow before creating the production project.

10. Understand the Limits of Cloudflare Pages

Cloud hosting does not mean unlimited hosting. Each platform has usage limits, technical constraints, and plan-specific conditions.

Cloudflare's published Pages limits include restrictions on deployment activity, file counts, and individual asset sizes. Its documentation listed the following Free-plan limits as of September 2026:

Resource	Published Free-plan limit
Builds per month	500
Files per site	20,000
Maximum size of a single site asset	25 MiB

These are platform limits, not a promise that every project will have identical performance or be suitable for every use case. Check the current documentation before making a decision for a production project.

Official limits reference:

https://developers.cloudflare.com/pages/platform/limits/

Other considerations include:

Static hosting does not automatically provide a database.
Server-side application logic requires an appropriate additional service or architecture.
A custom domain requires its own configuration.
External APIs may impose separate usage limits or costs.
A third-party service can become unavailable even when your static website is still being served.
A site may require additional security, privacy, accessibility, monitoring, or compliance work depending on its purpose.

A free plan can be a useful starting point, but do not interpret the word free as meaning that every associated service, domain, API, or future requirement will cost nothing.

11. Connect a Custom Domain Later

The pages.dev address is useful for testing, learning, and sharing a basic project. A business or established publication may eventually prefer a custom domain.

A custom domain might look like:

www.example.com

The domain is a separate part of your website's identity and configuration. You must register or already control the domain and then configure it through Cloudflare Pages and the relevant DNS settings.

The exact procedure depends on whether the domain is already managed by Cloudflare and on the hostname you want to use.

Before changing DNS records, record the existing configuration and understand which services depend on it. Incorrect changes can interrupt an existing website or email service.

Follow Cloudflare's current documentation:

https://developers.cloudflare.com/pages/configuration/custom-domains/

Do not assume that merely typing a custom domain into a form completes the configuration. Verify the domain's status and test the actual address after setup.

12. Troubleshoot Common Deployment Problems

The deployment succeeds, but the website shows a 404

Check whether index.html exists at the top level of the deployed files. If you uploaded a ZIP archive, inspect its internal structure.

Also confirm that you opened the correct project address.

The website loads, but images are missing

Inspect the image paths in your HTML. File names and directory paths must match the deployed assets.

For example, if the HTML references images/logo.png, the deployed files must contain the image at that relative path.

Check capitalization and spelling. A path that appears to work on one local computer may fail in a hosting environment when the file names do not match exactly.

The HTML appears, but styling is missing

Check whether the stylesheet exists and whether the HTML references the correct location.

Open the browser's developer tools and inspect the Network panel for failed CSS requests. The browser may show the HTML successfully while failing to retrieve the stylesheet.

The project name is unavailable

Choose another valid name and try again. Do not assume that a desired project hostname can be claimed simply because it is not currently familiar to you.

The uploaded site is not the latest version

Check the deployment status and confirm that you are visiting the intended production address rather than an older preview address.

Verify that the updated files were included in the deployment.

You need automatic deployments

If you began with Direct Upload, remember that Cloudflare documents that you cannot convert that project into a Git-integrated project. Create a separate project using Git integration if that workflow is appropriate.

Before choosing a deployment method for a major project, decide whether you want manual uploads or an automated process tied to your source repository.

13. When Should You Use Git Integration Instead?

Direct Upload is useful for a simple static website that you update manually. Git integration is often better for a project under active development.

With a connected repository, Cloudflare Pages can build and deploy changes when you push updates to the configured branch. It can also provide preview deployments for supported branches and pull requests.

This workflow is particularly useful when:

You develop with a code editor.
You need a record of source-code changes.
Multiple people contribute to the project.
You want repeatable builds.
You want to review changes before production deployment.
You plan to maintain the site over a long period.

The basic Git-integrated workflow involves creating a repository, putting the source files in it, connecting the repository to Cloudflare Pages, selecting the appropriate build configuration, and verifying the first deployment.

Build settings depend on the technology used. A simple static HTML site may not require a build command, while a framework-based project often does.

Official documentation:

https://developers.cloudflare.com/pages/configuration/git-integration/

Choose the workflow that fits the project rather than assuming that one method is always superior.

14. Your Practical Cloud Deployment Exercise

Use the example site to complete this exercise.

[ ] Create a folder containing a valid index.html.
[ ] Open the file locally and verify that it displays correctly.
[ ] Create or access a Cloudflare account.
[ ] Review the Direct Upload and Git integration choices.
[ ] Deploy the static files using the Direct Upload workflow.
[ ] Open the assigned pages.dev address.
[ ] Refresh the public page and verify that it still works.
[ ] Change one sentence in the local HTML file.
[ ] Create a new deployment with the updated files.
[ ] Verify that the public site displays the revised sentence.
[ ] Record the project address and preserve a local backup.

At the end of the exercise, you should have a working public website and a basic understanding of how static files move from a local computer to cloud hosting.

Official References

Cloudflare — Pages documentation
Cloudflare — Direct Upload
Cloudflare — Deploy a static HTML website
Cloudflare — Git integration
Cloudflare — Custom domains
Cloudflare — Pages platform limits

The Practical Lesson

Cloud infrastructure becomes easier to understand when you deploy a real project rather than studying abstract definitions alone.

A static website is a useful first project because it lets you learn the core workflow: prepare files, choose a hosting method, deploy, verify the public address, update the content, and understand the platform's limits.

Cloudflare Pages removes the need to manage a traditional web server for this kind of site, but the quality and reliability of the result still depend on correct files, appropriate configuration, careful testing, and a sensible deployment strategy.

W3 NOTES BLOG | The Internet Money Feed

Image: ukhdan.org.uk