# Module 2: Deploy Website with Cloudflare Pages
**Duration:** 30 minutes
## Objective
Deploy a static website to Cloudflare Pages using direct upload.
---
## Step 1: Create Your Website Files
### Create index.html
1. Open a text editor (Notepad, TextEdit, VS Code, etc.)
2. Copy and paste this code:
```html
My University Website
🎓 Welcome to My Website
This website is deployed on Cloudflare Pages - a global edge network with zero configuration!
✨ Powered by Cloudflare
```
3. Save the file as: **index.html**
4. Remember where you saved it
---
## Step 2: Compress Your Files
Cloudflare Pages requires files to be uploaded as a ZIP archive.
### On Windows:
1. Right-click on your **index.html** file
2. Select **Send to** → **Compressed (zipped) folder**
3. Rename the ZIP file to: **website.zip**
### On macOS:
1. Right-click on your **index.html** file
2. Select **Compress "index.html"**
3. This creates **index.zip** - rename it to: **website.zip**
### On Linux:
1. Open Terminal in the folder containing **index.html**
2. Run: `zip website.zip index.html`
**✓ You should now have a file named `website.zip`**
---
## Step 3: Navigate to Workers & Pages
1. Go to: **https://dash.cloudflare.com**
2. In the **left sidebar**, click **Build**
3. Click **Compute & AI**
4. Click **Workers & Pages**

---
## Step 4: Create a Pages Project
1. Click the **Create application** button (blue button, top right)
2. Click the **Pages** tab

3. Click **Upload assets**

---
## Step 5: Upload Your Website
1. **Project name:** Enter `my-university-site` (or any name you like)

2. Click **Create project**
3. You'll see the upload page
4. Click **Upload files** or drag and drop your **website.zip** file

5. Click **Deploy site**
**Note:** Cloudflare Pages will automatically extract the ZIP file and deploy the contents.
---
## Step 6: Wait for Deployment
1. You'll see a deployment progress screen
2. Wait for the status to show: **Success**
3. This usually takes 10-30 seconds

---
## Step 7: Access Your Website
1. Once deployed, you'll see a **Visit site** button
2. Click **Visit site**
3. Your website will open in a new tab
4. The URL will look like: `https://my-university-site.pages.dev`

---
## Step 8: Test Your Website
1. Verify your website loads correctly
2. Check that the styling appears properly
3. Copy the URL from your browser
4. Try opening it in a different browser or device
5. Share the URL with a colleague to test global access
---
## Step 9: View Deployment Details
1. Go back to the Cloudflare Dashboard
2. You should see your project listed under **Workers & Pages**
3. Click on your project name

4. Explore the tabs:
- **Deployments** - View deployment history
- **Settings** - Configure your project
- **Analytics** - View traffic stats (after some visits)
---
## Step 10: Make an Update (Optional)
1. Edit your **index.html** file
2. Change the heading text to something else
3. Save the file
4. **Compress it again** into a new ZIP file
5. Go back to your project in the Dashboard
6. Click **Create deployment**
7. Upload the updated ZIP file
8. Click **Deploy site**
9. Visit your site again to see the changes
---
## ✅ Checkpoint
You should now have:
- ✅ Website files created (index.html)
- ✅ Pages project created
- ✅ Website deployed successfully
- ✅ Public URL accessible globally
- ✅ Automatic HTTPS enabled
---
## Key Features You Got Automatically
- **Global CDN** - Your site is served from 300+ locations worldwide
- **HTTPS/SSL** - Automatic secure connection
- **Unlimited Bandwidth** - No data transfer fees
- **DDoS Protection** - Automatic protection against attacks
- **Instant Deployments** - Changes go live in seconds
---
## Next Steps
Continue to [Module 3: DNS Security](./03-dns-security.md)