Host Your Static Website on Cloudflare Pages with Custom Domain

Host Your Static Website on Cloudflare Pages with Custom Domain

If you are looking for a simple and reliable way to host your static website, Cloudflare Pages is a great option. With Cloudflare’s powerful infrastructure, you can easily deploy and manage your static site, and even set up a custom domain to give it a professional touch. In this guide, we’ll walk you through the steps of hosting a static website on Cloudflare Pages and how to configure your custom domain using Cloudflare’s DNS settings.

Step-by-Step Instructions

1. Log in to your Cloudflare Dashboard
Start by logging into your Cloudflare account. If you don’t have one, you’ll need to create an account and add your domain to Cloudflare.

2. Access Workers & Pages
Once logged in, head over to the Workers & Pages section in your Cloudflare dashboard and click on Overview. This is where you’ll manage and deploy your static website.

Host Static Website on Cloudflare

3. Create a New Project
Click the Create button to begin setting up a new project. Then, select Pages and click on Upload Assets.

Host Static Website on Cloudflare

4. Name Your Project
For better organization, it’s recommended that you name your project the same as your domain name. This helps keep things consistent and easy to find later.

Host Static Website on Cloudflare

5. Upload Your Website Files
Once your project is created, you’ll be prompted to upload your site’s files. Make sure you have your static site’s files compressed into a zip file, and then upload it directly to Cloudflare.

6. Deploy Your Site
After successfully uploading the zip file, click on Deploy. Cloudflare will automatically handle the hosting, and your static site will be live on a temporary Cloudflare subdomain (e.g., https://yourproject.pages.dev).

Host Static Website on Cloudflare


Setting Up a Custom Domain for Your Site

To make your website accessible through your custom domain (e.g., www.yourdomain.com), follow these steps:

1. Return to Workers & Pages
Go back to the Workers & Pages section and select your project. Click on View Details for your active project.

Host Static Website on Cloudflare

2. Configure Environment Variables
Expand the Environment Variables section and click on Settings.

Host Static Website on Cloudflare

3. Add Custom Domain
At the top of the settings page, find the Custom Domains module and click on Set Up Custom Domain.

Host Static Website on Cloudflare

4. Enter Your Domain Name
In the next step, enter your custom domain name (e.g., www.yourdomain.com) and click Continue.

Host Static Website on Cloudflare

5. Update DNS Records
Cloudflare will now show you the existing DNS records and the changes that will be made. Review the changes and click Activate Domain to complete the setup.

Host Static Website on Cloudflare

That’s it! Your static site is now hosted on Cloudflare, and your custom domain is successfully configured. Cloudflare not only makes the deployment process fast and easy, but it also offers excellent performance and security benefits for your site. This setup is ideal for anyone looking to host lightweight, static sites without the complexity of a traditional server.

Make sure to test your site after setting up the domain to ensure everything works as expected.

 

You May Also Like

About the Author: Hamza Waseem

Share This