Hosting a single index.html file is easy, but what happens when your project grows? If you are trying to host a complete HSE training site, a portfolio with image galleries, or a documentation hub, you need more than just one file—you need a structure.

Many users get stuck when their images show up as broken icons or their links result in “404 Not Found” errors. This usually happens because of how folder structures are handled during the upload process.

In this guide, we will walk through the correct way to host a multi-page static site with an images folder using Cloudflare Pages and GitHub. We will also cover why using GitHub Desktop or the Command Line (CLI) is far superior to the drag-and-drop method.

The Real-World Scenario: HSE Training Site

To make this practical, let’s look at a real project structure we use for HSE (Health, Safety, and Environment) training. We aren’t just hosting a “Hello World” page; we are hosting a course list.

Our Project Files:

  • Homepage: index.html
  • Course Pages: MEWP3b.html, RNB.html, SLOT.html
  • Assets: An images folder containing logo.png and diagram.jpg

If we just dump these files randomly, the site will break. Here is how to do it right.

Phase 1: The “Engineer-Approved” Folder Structure

Cloudflare Pages is a static host. It serves files exactly as they are arranged in your repository. The #1 rule is to keep your main HTML files at the root (top level).

Correct Structure:

/My-Safety-Website (Root Folder)
│
├── index.html          <-- MUST be here, not in a subfolder
├── MEWP3b.html
├── RNB.html
│
└── /images             <-- Create a folder specifically for assets
    ├── logo.png
    └── diagram.jpg

Common Mistake: Do not put your index.html inside a folder named public or site unless you know how to change build configurations. Keep it simple: Root is King.

Phase 2: Mastering Relative Links

Before we upload anything, we need to ensure our code works. When you link pages on your local computer, your PC might forgive mistakes that a Linux server (like Cloudflare’s) will not.

1. Linking Pages Together

In your index.html, never use absolute paths (like C:/Users/Admin/...). Use relative filenames.

  • Correct: <a href="MEWP3b.html">Start MEWP Course</a>
  • Incorrect: <a href="/MEWP3b.html"> (The leading slash can sometimes cause issues in sub-directories).

2. Linking Images

To display an image from your folder, you must include the folder name in the path.

  • Correct: <img src="images/logo.png" alt="Logo">
  • Incorrect: <img src="logo.png"> (The browser will look for the logo in the root, fail to find it, and show a broken icon).

Pro Tip: Linux servers are Case Sensitive. Image.png and image.png are two different files. Always stick to lowercase filenames to avoid headaches!

Phase 3: Uploading to GitHub (The Reliable Way)

Here is where most tutorials fail. They tell you to use the GitHub website’s “Upload files” button.

The Problem: The web uploader is buggy. It often creates the images folder but fails to upload the actual pictures inside it, leaving you with empty directories. The Solution: Use GitHub Desktop or the CLI.

Option A: GitHub Desktop (Visual & Easy)

  1. Download and install GitHub Desktop.
  2. In the app, go to File > Clone Repository and clone your empty GitHub repo to your computer.
  3. Open that folder on your PC and paste your HTML files and images folder into it.
  4. Back in the app, you will see all files (including images) listed in green.
  5. Type a summary (e.g., “Initial upload”) and click Commit to main, then Push origin.

Option B: The Command Line (Fast & Professional)

If you manage servers or use Proxmox (like we do!), you likely prefer the terminal.

# 1. Clone the repo
git clone [https://github.com/your-username/safety-training.git](https://github.com/your-username/safety-training.git)

# 2. Paste your files into the folder manually

# 3. Push to cloud
cd safety-training
git add .
git commit -m "Upload full site with images"
git push origin main

Phase 4: Deploying to Cloudflare Pages

Now that your code is safely on GitHub with the correct structure, Cloudflare does the heavy lifting.

  1. Log in to the Cloudflare Dashboard.
  2. Go to Workers & Pages > Create Application > Pages.
  3. Click Connect to Git and select your repository.
  4. Build Settings:
    • Framework Preset: None (Since this is raw HTML).
    • Build Output Directory: Leave blank.
  5. Click Save and Deploy.

Cloudflare will verify your index.html exists and deploy your site globally in seconds.

Troubleshooting Guide

1. My images are broken (Red X icon). Right-click the broken image on your live site and choose “Open image in new tab”. Look at the URL. Does it say yoursite.com/logo.png? If so, you forgot the folder path. Update your code to images/logo.png.

2. I get a 404 Error on sub-pages. Check your capitalization. If your file is RNB.html but your link is <a href="rnb.html">, it will fail on the server even if it worked on your Windows PC.

3. The ‘images’ folder is empty on GitHub. This confirms the web uploader failed. Use GitHub Desktop (Option A above) to push the missing files without needing to start over.

Did this guide help you get your multi-page site online? At EngineerHow, we believe in making robust IT solutions accessible. If you have questions about static hosting or server management, drop a comment below or check out our YouTube channel for more tutorials!

Copyright © 2025 EngineerHow.com. All Rights Reserved.