Free Website Hosting With Cloudflare Pages: A Walkthrough
If your website is made of plain HTML, CSS, JavaScript and images, you may not need to pay for hosting at all. Cloudflare Pages is a static hosting service with a free plan that includes HTTPS, a global content delivery network and custom domains. This guide walks through publishing a simple site. Plan details change from time to time, so check Cloudflare's current documentation and pricing page for exact limits before you rely on them.
Is static hosting right for your site?
A static site is a set of files that are sent to visitors exactly as they are. That suits:
- Personal sites, portfolios and résumés.
- Small business brochure sites with a handful of pages.
- Documentation and guides.
- Blogs built with a static site generator such as Hugo, Eleventy, Jekyll or Astro.
It does not suit sites that need a traditional server-side content management system like WordPress, user accounts, or a database out of the box. Cloudflare does offer server-side functions and storage that can add dynamic features to a Pages site, but that is a step beyond this walkthrough.
Static sites have real advantages: they are fast because files are served from servers near the visitor, there is little to hack because no server software runs your pages, and there is nothing to update except your own files.
What you need
- A free Cloudflare account.
- Your website files in a folder, with an index.html at the top level.
- Optionally, a GitHub or GitLab account if you want automatic deploys.
- Optionally, your own domain name. Without one, you get a free address ending in pages.dev.
Option A: Upload files directly
This is the simplest route and needs no other tools.
- Sign in to the Cloudflare dashboard and open Workers & Pages.
- Choose to create an application, select Pages, and pick the option to upload assets.
- Name your project. The name becomes part of your free address, such as your-project.pages.dev.
- Drag in your site folder (or a zip of it) and deploy.
Within a minute or so the site is live at the pages.dev address with HTTPS already working. To update the site later, upload a new version from the project's deployments page.
Option B: Connect a Git repository
If your site lives in a GitHub or GitLab repository, Pages can build and publish it every time you push a change.
- In Workers & Pages, create a Pages application and choose to connect to Git.
- Authorize Cloudflare to read the repository and select it.
- Choose the production branch, usually main.
- If you use a static site generator, choose its preset or enter the build command and output folder. For plain HTML, leave the build command empty and set the output folder to where index.html lives.
- Save and deploy.
A useful bonus: every other branch or pull request gets its own preview URL, so you can review changes before merging them into the live site.
Option C: Deploy from the command line
Developers can use Cloudflare's Wrangler command-line tool. After installing it with npm and signing in, a single command along the lines of wrangler pages deploy ./site --project-name your-project uploads the folder. This is handy for scripts and automated builds.
Connecting your own domain
Open your Pages project, go to Custom domains, and add your domain.
- If your domain's DNS is already on Cloudflare, it can add the needed record for you.
- If your DNS is elsewhere, you can add a subdomain such as www by creating a CNAME record at your DNS provider that points to your pages.dev address. Using the bare (apex) domain generally requires the domain's DNS to be managed by Cloudflare, so many people move their nameservers to Cloudflare's free DNS plan.
Cloudflare issues the SSL certificate automatically once the domain is verified. Add both the bare domain and www, and decide which one is the main address; you can redirect the other. See DNS basics if the records are unfamiliar.
Useful extras
- Custom 404 page: add a 404.html file to your output and it will be used for missing pages.
- Redirects: a file named _redirects lets you list old paths and where they should go, which is useful after a redesign.
- Headers: a file named _headers lets you set security and caching headers per path.
- Rollbacks: every deployment is kept, so you can roll back to an earlier version with a click if an update breaks something.
- Analytics: Cloudflare offers privacy-focused web analytics you can switch on.
Limits to keep in mind
The free plan has limits on things such as the number of builds per month, the number of files per site, and the size of individual files. For a typical small site you are unlikely to reach them, but check the current numbers in Cloudflare's documentation. Large video files are better hosted on a video or storage service and linked or embedded.
Common problems
- Blank page or 404 at the root: the output folder is wrong, so index.html is not at the top level of what was deployed.
- Styles or images missing: links use paths that only worked on your computer. Use paths relative to the site root, like /assets/style.css.
- Custom domain stuck verifying: a DNS record is missing or still cached. Check the record and wait for its TTL.
The short version
For a static website, Cloudflare Pages offers free hosting with HTTPS and a global network. Upload a folder or connect a Git repository, add your custom domain, and use _redirects, _headers and a 404 page for polish. It is a strong first home for a simple site, and you can add paid hosting later if your needs grow. For a broader look at options, read what web hosting is.