Module 6

Deployment with Cloudflare Pages

Taking your website live with free, fast, and secure Cloudflare Pages hosting

How Static Web Pages Are Served

The Journey of a Web Page

Before we dive into Cloudflare Pages, let's understand how a static website makes its way from a server to your browser:

1

Request

When you type a website URL (like www.pet-adoption.com) and press Enter, your browser sends a request to find that website.

2

DNS Lookup

The Domain Name System (DNS) works like a phone book, translating the human-friendly URL into an IP address (like 192.168.1.1) where the website is hosted.

3

Server Connection

Your browser connects to the web server at that IP address and asks for the website files.

4

File Transfer

The server sends back HTML, CSS, JavaScript, images, and other static files that make up the website.

5

Rendering

Your browser processes these files and displays the complete website on your screen.

Think of it like: Ordering a pre-made meal (static content) from a restaurant. You ask for it, they find it, and deliver it exactly as it was prepared.

Traditional vs. CDN Hosting

Traditional Hosting

Files stored on a single server
All visitors connect to same server
Distance affects loading speed
Limited traffic capacity

CDN Hosting

Files copied to servers worldwide
Visitors connect to nearest server
Consistently fast loading speeds
Handles high traffic easily

Cloudflare Advantage: Cloudflare Pages uses a global CDN (Content Delivery Network) to store copies of your website around the world, making it load quickly for everyone.

Anatomy of a Static Website

HTML

The structure and content of your pages

CSS

Styling and visual appearance

JavaScript

Interactive functionality

Assets

Images, videos, fonts, and other media

Organization

Folder structure and file relationships

Key Point: All of these files are pre-built and don't change unless you update your code and redeploy. Once a user loads your page, they already have everything they need for the entire experience.

The Performance Challenge

Several factors affect how quickly your website loads for visitors:

Physical Distance

The farther a user is from your server, the longer it takes for data to travel.

File Size

Larger files (especially images) take longer to download and display.

Traffic Volume

A single server can become overwhelmed with too many visitors at once.

Security Overhead

SSL encryption adds security but requires extra processing.

CDN Solution: Content Delivery Networks like Cloudflare solve these problems by caching your site on servers worldwide, optimizing file delivery, handling high traffic, and providing built-in security.

Key Takeaways

Static websites consist of HTML, CSS, JavaScript, and assets that are pre-built
Your browser requests these files from a server, which sends them back for display
Traditional hosting uses a single server, while CDNs distribute content globally
Performance is affected by distance, file size, traffic volume, and security needs
Cloudflare Pages uses a global CDN to deliver websites quickly and securely

6.1 Introduction to Cloudflare Pages

What is Cloudflare Pages?

A modern platform for deploying static websites:

Fast Global CDN

Your website is automatically distributed across Cloudflare's global network of data centers, ensuring your visitors get fast page loads no matter where they are.

Free SSL Certificates

Automatic HTTPS for all your sites with no configuration required. The padlock icon in browsers gives visitors confidence in your site's security.

Git Integration

Connect to GitHub, GitLab, or Bitbucket repositories for automatic deployments whenever you push changes to your code.

Why Cloudflare? It offers a generous free tier perfect for personal projects, portfolios, and small business websites.

How It Works

The deployment process simplified:

1

Connect Your Repository

Link your GitHub/GitLab repository containing your website files to Cloudflare Pages.

2

Configure Build Settings

Specify how your site should be built (usually not needed for simple HTML/CSS sites).

3

First Deployment

Cloudflare automatically builds and deploys your website to its global network.

4

Ongoing Updates

Future changes pushed to your repository trigger automatic rebuilds and deployments.

Why Choose Cloudflare Pages?

Key advantages for developers and clients:

Cost-Effective

Generous free tier
Unlimited sites
500 builds per month
No credit card required

Performance

Global CDN distribution
Asset optimization
Fast page loads
Optimized caching

Security

Free SSL certificates
DDoS protection
Secure asset delivery
Always-on HTTPS

Developer-Friendly

Preview deployments
Custom domain support
Framework presets
Collaborative workflows

Perfect For: Personal websites, portfolios, blogs, landing pages, small business sites, documentation sites, and static web applications.

Understanding Static vs Dynamic Sites

What can be deployed on Cloudflare Pages:

Static Sites

Perfect for Cloudflare Pages

HTML, CSS, JavaScript
Pre-built content at deployment
No server-side code
No database required
Fast and secure

Cloudflare Pages Compatible

Dynamic Sites

Needs additional services

Server-side processing
Database-driven content
User authentication
Form submissions with logic
Complex backend operations

Needs Cloudflare Workers for dynamic features

Note: Many static site generators (like Next.js, Gatsby, Hugo) can create fully-featured websites that still deploy as static sites. Cloudflare Pages supports all major frameworks.

Key Takeaways

Cloudflare Pages is a powerful, free platform for deploying static websites
It offers global CDN distribution, free SSL, and Git integration
The platform automatically builds and deploys your site when you push code changes
It's ideal for personal projects, portfolios, and small business websites
You can deploy multiple websites without paying anything

6.2 Setting Up Your Repository

Creating a GitHub Repository

Preparing your code for Cloudflare deployment:

1

Sign up for GitHub

If you don't already have an account, create one at github.com.

2

Create a New Repository

Click the "+" icon in the top right of GitHub and select "New repository".

GitHub's new repository form

3

Configure Repository

Choose a descriptive name like "my-portfolio-website"
Add an optional description
Choose public visibility (unless you need private)
Initialize with a README if starting from scratch

4

Create Repository

Click "Create repository" to finalize setup.

Tip: If you're unfamiliar with GitHub, you can ask AI for step-by-step guidance specific to your project type.

Repository Structure Best Practices

Organizing your files for deployment:

my-website/
│
├── index.html         # Your homepage
├── about.html         # About page
├── contact.html       # Contact page
├── assets/            # Folder for static assets
│   ├── css/           # Stylesheets
│   │   └── style.css
│   ├── js/            # JavaScript files
│   │   └── main.js
│   └── images/        # Image files
│       ├── logo.png
│       └── hero.jpg
├── .gitignore         # Files to exclude from Git
└── README.md          # Information about the project

Important Considerations:

Your main homepage should be named index.html
All paths should be relative (not absolute)
Keep assets organized in folders
Include a .gitignore file for excluding temporary files
Add a descriptive README.md explaining your project

Uploading Your Website Files

Adding your code to GitHub:

Web Upload

Easiest for beginners

Go to your repository on GitHub
Click "Add file" then "Upload files"
Drag and drop your website files
Add a commit message describing the upload
Click "Commit changes"

Git Command Line

More powerful approach

Clone the repository to your computer
Copy your website files into the folder
Use git add, commit, and push commands
Push changes to GitHub
Verify files appear in your repo

# Command line approach
# Clone your repository
git clone https://github.com/username/my-website.git

# Navigate to the repository
cd my-website

# Copy your website files into this folder
# (done manually or with cp/copy commands)

# Add all files to git
git add .

# Commit the changes
git commit -m "Initial website upload"

# Push to GitHub
git push origin main

AI can help: If you're not familiar with Git, you can ask AI to generate the exact commands you need for your specific situation.

Common Mistakes to Avoid

Problems that can affect deployment:

Absolute File Paths

Using paths like /images/logo.png instead of images/logo.png or ./images/logo.png

Fix: Use relative paths in all HTML, CSS, and JavaScript files

Missing Index File

Not having an index.html file in the root directory

Fix: Ensure your main page is named index.html at the root

Case Sensitivity Issues

Using Images/logo.png in code but having images/logo.png in files

Fix: Be consistent with casing in all file references

Including Unnecessary Files

Adding large files, temporary files, or sensitive information

Fix: Use a .gitignore file to exclude non-essential files

Key Takeaways

GitHub provides free hosting for your website's source code
Organize your repository with a clear structure and naming conventions
Upload your files using either the web interface or Git command line
Avoid common mistakes like absolute paths and case sensitivity issues
A well-organized repository makes deployment and maintenance easier

6.3 Deploying with Cloudflare Pages

Step-by-Step Deployment

Taking your site from repository to live:

1

Sign Up for Cloudflare

Create a free account at dash.cloudflare.com/sign-up if you don't already have one.

2

Navigate to Pages

In the Cloudflare dashboard, click on "Pages" in the left sidebar.

Cloudflare dashboard with Pages section highlighted

3

Create a Project

Click "Create a project" and select "Connect Git" to link with your GitHub repository.

4

Authorize GitHub Access

Follow the prompts to connect your GitHub account and authorize Cloudflare access.

5

Select Repository

Choose the repository containing your website from the list.

6

Configure Build Settings

For a simple HTML site, you can often leave the defaults unchanged.

Cloudflare Pages build settings form

Standard Settings: For a basic HTML/CSS site, the default settings typically work without changes. More complex sites may need framework-specific settings.

Build Settings Explained

Customizing deployment options:

Setting	Description	Typical Value
Production branch	The branch to use for the live site	`main` or `master`
Build command	Command to build the site (if needed)	Empty for static HTML, `npm run build` for React
Build output directory	Where built files are located	`/` for static HTML, `build` or `dist` for frameworks
Root directory	Directory containing source code	`/` (repository root)
Environment variables	Settings for build process	Usually empty for simple sites

Framework-Specific Settings

React (Create React App):

Build command: npm run build
Output directory: build

Next.js:

Build command: npm run build
Output directory: out (for static export)

Completing the Deployment

Final steps to go live:

7

Save and Deploy

Click "Save and Deploy" to start the deployment process.

8

Monitor Build Process

Cloudflare will show you a build log. Wait for the process to complete.

Cloudflare Pages build log

9

Deployment Complete

Once finished, Cloudflare provides a URL where your site is live (typically your-project.pages.dev).

10

Visit Your Site

Click the provided URL to see your live website!

Congratulations! Your website is now live on Cloudflare's global network, with free SSL and CDN delivery.

Using Custom Domains

Connecting your own domain name:

1

Purchase a Domain

Buy a domain from any registrar (GoDaddy, Namecheap, Google Domains, etc.).

2

Go to Pages Project

In your Cloudflare Pages project, click on "Custom domains" tab.

3

Set Up Custom Domain

Click "Set up a custom domain" and enter your domain name.

4

Configure DNS

Follow Cloudflare's instructions to update your domain's DNS settings.

Tip: For the simplest setup, consider transferring your domain to Cloudflare's own domain registrar service, which integrates seamlessly with Pages.

Continuous Deployment

Updating your site after deployment:

Make Changes

Update your HTML, CSS, or other files locally.

Commit and Push

Commit changes and push to your GitHub repository.

Automatic Deployment

Cloudflare automatically detects the changes and rebuilds your site.

No Manual Uploads: Once set up, you never need to manually upload files to update your site. Just push to your repository and Cloudflare handles the rest!

Key Takeaways

Cloudflare Pages offers a straightforward deployment process
Connecting your GitHub repository enables continuous deployment
Basic HTML sites require minimal configuration
Preview deployments let you test changes before they go live
Custom domains can be easily connected for a professional appearance
Future updates are automatically deployed when you push code changes

Module 6 Summary

What We've Learned

How Static Web Pages Are Served

Understanding the journey of a web page from server to browser, how DNS works, and the difference between traditional hosting and CDN distribution.

Introduction to Cloudflare Pages

The benefits of using Cloudflare Pages for hosting websites, including the global CDN, free SSL certificates, and Git integration.

Setting Up Your Repository

How to create and organize a GitHub repository with proper structure for deployment, and common pitfalls to avoid.

Deploying with Cloudflare Pages

Step-by-step process for deploying a website, configuring build settings, and setting up continuous deployment for future updates.

Key Benefits of This Approach

Speed & Performance

Global content delivery
Automatic optimizations
Fast load times worldwide

Security

Free SSL certificates
DDoS protection
Security best practices

Cost Effectiveness

Free hosting tier
No server maintenance
Unlimited websites

Simplified Workflow

Automated deployments
Preview environments
Easy content updates

Course Completion

Congratulations on completing the entire AI for Website Development course! You now have the skills to:

Understand how AI can enhance your web development workflow
Use AI tools to generate code and solve programming challenges
Leverage Cursor IDE to boost your development productivity
Create responsive and well-structured HTML pages with AI assistance
Build complete website projects with proper structure and components
Deploy your websites to a global content delivery network

What's Next?

Continue your journey by:

Building your own personal portfolio website using these techniques
Exploring more advanced frameworks like React or Vue.js with AI assistance
Joining web development communities to share your projects
Staying updated on the latest AI advancements in web development

You've Completed the Course!

Thank you for joining us on this journey through AI-powered web development!

Return to Course Home

Course Celebration