How to Host Free Static Website in CloudFlare Pages

By . in General. Updated on .

Cloudflare Pages is one of my favorite Cloudflare’s platforms. It’s makes deploying static sites and JAMStack applications easy. You will get access to the fast Cloudflare’s global network, latest web standard such as HTTP3 and QUIC and image compression, and automatic free SSL for you site. It also integrates with Github well that allows you to automate and set up continuous deployment in your site deployment process.

In this tutorial, we’ll walk you through the process of getting started with Cloudflare Pages, deploying your first website, and exploring its various features to optimize your site.

Without further ado, let’s just get started.

Build your site

You do not need to use a special library or framework to build your site. Your site can be as simple as an HTML file, as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to My Website!</h1>
    </header>
    <main>
        <section>
            <h2>About Me</h2>
            <p>I am a web developer with a passion for creating beautiful and functional websites.</p>
        </section>
        <section>
            <h2>My Skills</h2>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>© 2023 My Website</p>
    </footer>
</body>
</html>

…with the corresponding CSS file:

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 1em;
    text-align: center;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100vh;
    padding: 2em;
}

section {
    margin: 2em 0;
}

h1, h2 {
    font-weight: bold;
    text-align: center;
}

p {
    line-height: 1.5;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline-block;
    margin: 0 1em;
}

Note that your main HTML file has to be named index.html.

Deploying your Site

Once we have the files for our website ready, we can deploy it to Cloudflare.

There are two ways we can do:

  1. Upload the file using the GUI
  2. Use the Cloudflare CLI

In this case, let’s use the GUI. We are going to deploy our site by uploading the files directly to Cloudflare with the GUI it provides. It’s the easiest and quickest way to get it up and running with Cloudflare Pages.

Using Cloudflare GUI

Follow these steps to deploy with the Cloudflare GUI:

  1. Login to your Cloudflare account.
  2. Go to Workers & Pages > Overview.
  3. Select Create Application.
  4. Within the Create an application, go to the Pages tab.

In this Pages tab, click Upload Assets.

You will be directed to a new section where you need to name your project. This name will be used for the domain as well.

Click Upload Folder, and select the folder where you put the HTML and CSS files. The upload process should generally be instant and live immediately in the project main domain.

Site Preview

One of the cool things about using Cloudflare Pages is that you can upload your site for preview. This usefule when you want to check how the site would look and work before making it live in production. Or, if you’re a web developer, this is also useful to preview your site for your clients before the site is accessible from the main domain. To do so:

  1. Go to Workers & Pages > Overview.
  2. Select your project.
  3. Click Create new deployment.

You will see the option, Production and Preview, where you can upload your site. Select Preview and give it a name. This name will be used to for the subdomain for the preview environment. For example, if we name it “rev1”, Cloudflare will upload the site to rev1.{{ project-name }}.page.dev. Once the name is set, you can select the folder that contains updates of your.

In this example, we can see that the site on the preview environment appears with the update, and it does not affect anything on the main domain at all.

Serving a “Not Found” Page

Another Clouflare Pages can handle for you is to serve a custom “Not Found” page. To do so, simply create a file at the top level of your site. And the site again.

.
|-- 404.html
|-- index.html
|-- style.css

Once uploaded, when you try to load a page that does not exist on your, Cloudflare will serve the 404.html page automatically with the correct HTTP status.

Adding Redirects

Another thing you can do in Cloudflare is adding redirections. It means that you can redirect of one URL of your site or to URL of other site. This features supports all the redirect status code including 301, 302, and 307. To do this, it’s fairly simple. You only need to add a special file _redirects on the top level of your site.

.
|-- 404.html
|-- _redirects
|-- index.html
|-- styles.css

In this `_redirects` file, you can add the redirection rules. For example, if you want to redirect all the traffic from `/about` to `/about-me`, you can add the following line:

/about /about-me/ 301

Re-upload your site, and go to /about page. You should find the page redirected to /about-me/ page.

Wrapping-up

Cloudflare makes it easy to put your static website online. You can deploy a preview version of your site to review changes before making them live. It also handles ‘Not Found’ pages automatically and lets you set up custom redirects. Overall, Cloudflare Pages offers a convenient solution to get your website up and running without needing too much technical knowledge, and hopefully this tutorial can help you get started with it.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail