One-page class instructions

Publish your first website with Cloudflare Pages

Use this guide when your website files are ready. The easiest permanent beginner path is Direct Upload: upload your folder, deploy, and share your .pages.dev link.

Start With Direct Upload Check My Files

The simple upload flow

Website folder index.html + assets
Upload to Pages drag folder or zip
Live link project.pages.dev

Remember: prepare the folder, upload it, copy the live link.

Before You Start

Cloudflare Pages hosts static websites very well. For today, keep the project simple and make sure the home page file is named exactly index.html.

Need

A finished website folder

Your folder should contain index.html and any CSS, JavaScript, or image files your page uses.

Need

A Cloudflare account

Sign in at dash.cloudflare.com. Use the account your teacher tells you to use.

Goal

A public website link

After deployment, your site will have a link like project-name.pages.dev.

Keep it small: For dashboard drag-and-drop uploads, Cloudflare supports a single folder or zip with up to 1,000 files and 25 MiB.
My home page is named index.html.
My CSS and images are inside the same project folder.
My links use relative paths such as assets/style.css.
I opened the file locally and checked it works.

Fast Class Preview

If your teacher only wants a quick live preview, use Cloudflare Drop. Drag in a folder or zip, test the temporary public link, then claim it with a Cloudflare account if you need to keep it.

Teacher note: Cloudflare Drop previews last for one hour unless the student claims the deployment. For homework links that must stay online, use Direct Upload or Git integration.

Method 1: Direct Upload

Best for beginners, one-page websites, and class demos. Use this when you do not need automatic updates from GitHub.

Open Workers & Pages

Go to the Cloudflare dashboard, then open Workers & Pages.

Create a Pages project

Select Create application, then choose the drag-and-drop Pages option.

Name your project

Use a simple lowercase name such as amy-profile-site. Avoid spaces and special symbols.

Upload your folder

Drag your whole website folder into the upload area. If you use a zip file, zip the files inside the folder, not an extra folder layer.

Deploy and test

Select Deploy site, wait for it to finish, then open your .pages.dev link in a new tab.

Important: A Direct Upload project cannot later be changed into a Git integration project. If your class wants automatic deployment every time you push code, start with Method 2 instead.

Method 2: GitHub or GitLab

Use this method when students already know GitHub or GitLab. It takes longer to set up, but Cloudflare can redeploy automatically after each push.

Push your project

Put your website files in a GitHub or GitLab repository. The repository must already have at least one branch, usually main.

Connect to Git

In Cloudflare, go to Workers & Pages, select Create application, choose Pages, then choose Connect to Git.

Choose build settings

For a simple HTML site, leave the build command blank and use the folder that contains index.html as the output directory. For many beginner projects, this is the root folder.

Save and deploy

Start the deployment. After it finishes, open the live link and submit it to your teacher.

Common Fixes

The page is blank

Check that the file is called index.html. Also check that it is inside the folder you uploaded.

The style is missing

Check your CSS path. If the file is in an assets folder, the link might be assets/style.css.

Images do not show

Use matching filenames. photo.png and Photo.png can be treated as different files after upload.

The link is not updated

Refresh the page. For Git projects, check that the latest deployment finished successfully.

Which Method Should I Pick?

Situation Best choice Why
Fast in-class preview Cloudflare Drop No account is needed to start, but the temporary preview must be claimed to keep it.
First lesson or quick homework upload Direct Upload Fast permanent path: upload files and get a live link.
Group project with many updates Git integration Cloudflare can deploy again when the repository changes.
Advanced project with a build tool Git integration or Wrangler You can set a build command and output directory.