How I Deployed a Personal Website for Free with Cloudflare Pages

A practical walkthrough from preparing a GitHub repository to connecting Cloudflare Pages, configuring builds, enabling automatic deployment, and adding a custom domain.

How I Deployed a Personal Website for Free with Cloudflare Pages

It is easy to finish a personal website and then leave it on a local computer because hosting costs and server maintenance feel unnecessary. I wanted a simpler setup: push the code to GitHub, deploy automatically, and get HTTPS without maintaining a server. For a website built with static HTML, CSS, and JavaScript, Cloudflare Pages fit those requirements well.

This article records the complete process of preparing a GitHub repository, connecting it to Cloudflare Pages, and publishing the site on both the default address and a custom domain. The example uses a plain static site, but the workflow is similar for React, Vite, or Astro once the correct build command and output directory are configured.

1. What I prepared before deployment

I started with three things: a Cloudflare account, a GitHub account and repository, and an index.html file for the home page. A minimal static site can simply place index.html at the repository root, with optional style.css and app.js files.

Before uploading anything, I opened the site locally and checked the layout and links. Image paths must be relative paths inside the repository, such as ./images/photo.webp, rather than absolute paths that only exist on one computer. I also checked that no API keys, passwords, or private configuration files were included. Sensitive values should be kept in environment variables or Cloudflare secrets because deleting a leaked value later may not remove it from Git history.

2. Uploading the website to GitHub

I created a repository, committed the site files, and pushed them to the main branch. Cloudflare Pages supports GitHub and GitLab integration and can automatically build and deploy whenever new changes are pushed. Both public and private repositories are supported.

Cloudflare needs permission to access the selected repository. When possible, granting access only to the repository being deployed is safer than granting broad access to every repository in the account.

3. Creating the Cloudflare Pages project

In the Cloudflare dashboard, I opened Workers & Pages, created a new application, selected Pages, and connected Git. After authorizing GitHub, I selected the repository prepared earlier.

The main settings were the project name, production branch, framework preset, build command, and build output directory. The project name becomes part of the default pages.dev hostname, and main is usually the production branch. A plain HTML site can use no framework preset and may not need a build command. The output directory must point to the folder containing the files that should be published.

For a Vite project, for example, the build command is commonly npm run build and the output directory is commonly dist. These values vary, so package.json and the framework documentation should be checked. A monorepo also needs the correct root directory so that Cloudflare starts the build in the folder containing the website.

4. Checking the first deployment

After saving the settings, Cloudflare downloads the repository, installs dependencies when needed, builds the project, and deploys it. A successful deployment receives an address such as project-name.pages.dev.

I checked more than the home page: direct links to subpages, CSS and JavaScript loading, image paths, the mobile layout, HTTPS, and the behavior of missing URLs. When a deployment fails, the build log on the Deployments page is the best starting point. Common causes include an incorrect output directory, a different Node.js version, filenames with mismatched letter case, and images that were never committed. A filename that appears to work on macOS may fail in the deployment environment when its case does not match exactly.

5. Automatic deployment after every update

The most convenient part of Git integration is the ongoing workflow. After editing locally, pushing to the main branch starts a new Cloudflare Pages deployment. There is no need to upload files through FTP or log in to a server.

Changes from other branches or pull requests can also be checked through preview deployments. This makes it possible to test the real web result before changing the production address. Deployment history is also useful when comparing a working version with a recent failure.

6. Connecting a custom domain

The default pages.dev address is enough to use the site, but a custom domain gives a personal website a more permanent identity. A domain can be added under Custom domains in the Pages project, followed by the DNS configuration shown by Cloudflare.

The process is simpler when the domain's DNS is already managed by Cloudflare. With another DNS provider, the requested CNAME or other records must be added accurately. DNS changes may take time to propagate. After connection, it is helpful to choose either the root domain or the www address as the canonical location and redirect the other one.

7. Free does not mean unlimited

The Cloudflare Pages Free plan is generous for a personal static website, but it still has limits. According to the official documentation, it includes 500 builds per month, up to 20,000 files per site, and a maximum static asset size of 25 MiB per file. Pages Functions requests count toward Workers plan usage.

Images should therefore be optimized, for example as WebP, instead of uploading every photo or video at its original size. A separate storage service may be more appropriate for large media collections. Domain registration is also a separate cost even when hosting is free. Limits can change, so the official Limits page should be checked before relying on specific numbers.

Conclusion

The main benefit of Cloudflare Pages was avoiding server maintenance. A GitHub push becomes a deployment, while HTTPS and global delivery work without a separate server setup.

The entire process is: build and test the static site locally, push it to the main branch on GitHub, connect the repository in Cloudflare Pages, configure the build and output directory, verify the pages.dev deployment, connect a custom domain if needed, and use Git pushes for future automatic deployments.

The first setup screen can look complicated, but a static website becomes much easier to maintain after the initial connection. It is a practical way to launch a personal homepage without adding a hosting bill.

References

• Cloudflare Pages Git integration: https://developers.cloudflare.com/pages/get-started/git-integration/

• Cloudflare Pages limits: https://developers.cloudflare.com/pages/platform/limits/