Deploying Your Website with Cloudflare Pages
Last updated on
Tutorial

Deploying Your Website with Cloudflare Pages

#cloudflare #deployment #jamstack #web hosting

Deploying Your Website with Cloudflare Pages

Cloudflare Pages is a powerful platform for deploying full-stack applications that are instantly distributed across Cloudflare’s global network. This tutorial will guide you through deploying your website using Cloudflare Pages.

What is Cloudflare Pages?

Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites. It offers:

  • Global CDN distribution
  • Automatic Git integration
  • Custom domains with SSL
  • Unlimited sites and requests on the free tier
  • Built-in analytics and performance monitoring
  • Pages Functions for server-side code execution

Prerequisites

Before we begin, you’ll need:

  • A Cloudflare account (free tier is sufficient)
  • A website or application codebase in a Git repository (GitHub or GitLab)
  • Basic familiarity with Git commands

Deploying Your First Project

Step 1: Connect Your Git Repository

  1. Log in to your Cloudflare dashboard
  2. Navigate to Pages in the sidebar
  3. Click Create a project
  4. Choose Connect to Git
  5. Select your Git provider (GitHub or GitLab) and authenticate
  6. Select the repository containing your website code

Step 2: Configure Your Build

After connecting your repository, you’ll need to configure your build settings:

  1. Set your Project name (this will be used in your .pages.dev URL)
  2. Choose your Production branch (usually main or master)
  3. Set your Build command based on your framework:
    • For Astro: npm run build
    • For Next.js: next build
    • For React: npm run build
    • For Vue: npm run build
  4. Specify your Build output directory:
    • For Astro: dist
    • For Next.js: .next
    • For React: build
    • For Vue: dist
  5. Click Save and Deploy

Cloudflare will now clone your repository and build your site. You can monitor the build process in real-time through the provided logs.

Step 3: Configure Your Custom Domain (Optional)

Once your site is deployed, you can add a custom domain:

  1. Go to your project’s Custom domains tab
  2. Click Set up a custom domain
  3. Enter your domain name
  4. Follow the instructions to configure your DNS settings

Using Pages Functions

Cloudflare Pages supports serverless functions, allowing you to implement dynamic functionality without running a dedicated server.

Creating Your First Function

  1. Create a /functions directory in your project root
  2. Create a file named hello.js with the following content:
export function onRequest(context) {
  return new Response("Hello from Cloudflare Pages Functions!");
}
  1. Deploy your site again (automatically triggered by pushing to your repository)
  2. Access your function at yourdomain.com/hello

Advanced Features

Environment Variables

To set environment variables:

  1. Go to your project’s Settings > Environment variables
  2. Add variables for Production or Preview environments

Rollbacks

If something goes wrong with a deployment:

  1. Navigate to your project’s Deployments tab
  2. Find a previous working deployment
  3. Click the three-dot menu and select Rollback to this deployment

Conclusion

Cloudflare Pages provides a robust platform for deploying static sites and full-stack applications. With its global CDN, serverless functions, and seamless Git integration, you can build and deploy web projects without worrying about traditional server management.

For more advanced usage and detailed documentation, visit the Cloudflare Pages documentation.

Back to Blogs