How to Create and Host a Website for Free Using Cloudflare Pages

Learn how to build and host a static website for free using Cloudflare Pages with this step-by-step guide.

What is Cloudflare Pages?

Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites. It allows you to deploy static sites directly from your GitHub repository. Because it's a static hosting service, it only supports static files like HTML, CSS, JavaScript, and assets. There is no backend processing (like PHP or databases) on Cloudflare Pages.

Despite being static-only, it's powerful and highly performant thanks to Cloudflare's globally distributed edge network. This makes it a fantastic choice for blogs, portfolios, documentation sites, and lightweight business websites.

To get started you need to sign up for a Cloudflare Account. Go to Cloudflare's website and click Sign Up. Enter your email address and create a secure password, confirm your email address through the verification link sent to your inbox. Once signed up, you'll land in your Cloudflare dashboard.

Creating a GitHub Repository for your Web Files

If you haven't already created a GitHub repository to store your static web files and assets, go to GitHub and sign in or create an account. Click New Repository to create a new repository, name your repository (e.g., my-static-site) and choose visibility. Cloudflare works with public and private repositories. Clone the repository to your local machine using Git:

git clone https://github.com/your-username/my-static-site.git

Add your project files (HTML, CSS, JS) to this directory. When you are done, commit and push your changes to update the repository.

git add .
git commit -m "Initial commit"
git push origin main

Creating the Cloudflare Pages Project

Once you are logged into the dashboard we need to create a Cloudflare Pages project. In your Cloudflare dashboard, click Compute (Workers) from the left-hand menu, then select Workers & Pages. Click the Create a Project button then select Pages from the tabs. You'll be asked to connect a GitHub account after which you can select the repository containing your static website files.

To configure the build settings, set the framework preset if your project uses a front end framework such as Vue.JS. Set to none if you just have static HTML/CSS or precompiled assets. The build command will be set using the defaults for the framework. If you selected no framework, enter the build command as exit 0. Set the output directory to dist or public depending on your framework or leave blank for static files. Click Save and Deploy.

Your GitHub repository is now linked to Cloudflare Pages, and each push to the main branch will trigger an automatic build and deployment. You'll receive a *.pages.dev URL where your site is publicly accessible.

If needed, you can set up Preview Deployments for pull requests, define Environment Variables for different environments (e.g., API keys), and rollback to previous deployments with one click.

Using Custom Domain Names with Cloudflare Pages

Using a custom domain name is one of the best ways to build trust and brand recognition for your website. Instead of relying on the default *.pages.dev subdomain, which can look generic and less professional, a custom domain provides a branded and memorable URL that users are more likely to trust and return to. It also improves your website's credibility, helps with SEO, and gives you greater control over your online identity.

1. In your Cloudflare dashboard, go to Pages, then open your project.
2. Click the Custom Domains tab.
3. Enter your domain name and click Add.
4. If the domain is not yet managed by Cloudflare, you'll be prompted to add it and change your DNS nameservers to Cloudflare's. Refer to your domain registrars documentation on how to change nameservers.
5. Once verified, Cloudflare will automatically configure the DNS settings for your domain to point to your Pages site.

Enable SSL/TLS for Your Custom Domain

Security is essential for any website, and enabling SSL/TLS ensures that the connection between your users and your website is encrypted. When using Cloudflare, SSL/TLS certificates are provided for free and are easy to enable.

1. Go to your domain in the Cloudflare dashboard.
2. Click on the SSL/TLS tab in the top menu.
3. Set the SSL/TLS encryption mode to Full (or Full (strict) if your origin server supports it).
4. Cloudflare will automatically issue and manage an SSL certificate for your custom domain.

Once this is active, visitors will be able to access your site securely using https://, which is a ranking factor in search engines and builds trust with your audience. Cloudflare will automatically handle redirects from http to https. To verify navigate to SSL/TSL > Edge Certificates and find the Always use HTTPS open is enabled.

Set Up Redirects and Canonical Domain

To avoid duplicate content penalties from Google, you should redirect traffic from the default *.pages.dev domain to your custom domain and enforce HTTPS.

Because Cloudflare Pages' _redirects file only supports path-based redirects and not domain or protocol-based ones, you should configure these settings using the Cloudflare dashboard:

Go to Rules > Settings > Bulk Redirect Rules in your Cloudflare dashboard.

Create a rule that matches yourproject.pages.dev and redirects to https://yourcustomdomain.com with a 301 status.

This ensures that all traffic to the *.pages.dev domain is redirected to your custom domain.

To setup a redirect for www to non-www (or vice versa)

1. Go to Rules > Page Rules in the Cloudflare dashboard.
2. Click Create Page Rule.
3. For the URL pattern, enter: http://www.yourcustomdomain.com/*
4. Choose the setting Forwarding URL and select 301 - Permanent Redirect.
5. Enter the destination URL: https://yourcustomdomain.com/$1
6. Click Save and Deploy.

Enable Hotlink Protection

Hotlinking can drain your bandwidth when other sites link directly to your images and helps promote copyright theft. To prevent hotlinking:

1. Go to your domain in the Cloudflare dashboard.
2. Navigate to your Pages project.
3. Navigate to Scrape Shield on the left hand menu.
4. Toggle Hotlink Protection to On.

This prevents external sites from embedding your images unless they are hosted on your domain.

Monitor with Built-in Analytics and Logs

Cloudflare provides powerful analytics and logging tools to help you monitor your website's performance, security, and traffic trends. With Cloudflare Pages, you can access:

• Traffic Analytics: See real-time and historical data on visits, unique visitors, bandwidth usage, and geographical locations.
• Performance Metrics: Monitor site speed and evaluate load times across different devices and networks.
• Security Insights: View blocked threats, firewall events, and bot detection reports.
• Request Logs (via Cloudflare Workers + Logpush): Gain access to detailed request logs for debugging and auditing.

To access analytics, simply go to your site dashboard in Cloudflare and navigate to the Analytics tab. These tools provide valuable insights to help you optimize your site, troubleshoot issues, and ensure everything is running smoothly.

Final Thoughts

Cloudflare Pages is an excellent option for developers and creators looking to publish static websites without any hosting costs. Its integration with GitHub and support for custom domains, security features, and global CDN make it a no-brainer for many projects.

Whether you're building a portfolio, launching a blog, or creating a landing page, Cloudflare Pages gives you the tools to do it fast, securely, and for free.