How to Publish Your Website for Free with GitHub Pages (2026 Guide)

You do not need to pay for hosting

One of the biggest myths in web development is that you need to pay for hosting before anyone can see your website.

You don't.

Every website our students built during the [Giiyo Tech July 2026 Bootcamp] is hosted completely free using GitHub Pages. No credit card, no monthly subscription, no complicated server configuration. Just a GitHub account and a few clicks.

If you have built your first HTML, CSS and JavaScript website and you are wondering how to get it online, this guide walks you through the whole process, including the errors that catch almost every beginner.

What is GitHub Pages?

GitHub Pages is a free hosting service provided by GitHub. It publishes static websites directly from a GitHub repository, which means that if your site is built with HTML, CSS and JavaScript, GitHub will host it for you at no cost.

When you are finished you will have a live website at an address like this:

https://yourusername.github.io/my-first-website

You can connect your own custom domain later if you want to.

Before you begin

You will need:

• A GitHub account
• A finished HTML, CSS and JavaScript website
• Git installed on your computer (optional but recommended)
• Visual Studio Code (optional but recommended)

If you have never used Git, do not worry. GitHub also lets you upload files directly through your browser.

Step 1: Create a new repository

Sign in to GitHub and click New Repository.

Choose a repository name, for example:

my-first-website

Leave it set to Public. This matters. GitHub Pages only works on public repositories unless you are on a paid plan, so a private repository will not publish.

Click Create Repository.

Step 2: Upload your website

There are two ways to do this and both work perfectly.

If you are using Git, open your project folder in the terminal and run:

bash

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/USERNAME/my-first-website.git
git push -u origin main

Replace USERNAME with your GitHub username.

If you do not use Git yet, drag and drop your project files into the repository through GitHub's web interface instead.

One warning about the drag and drop method: open your project folder first and drag the files themselves, not the folder that contains them. Dragging the outer folder puts everything one level too deep, which breaks the next step.

Step 3: Check your file structure

Before publishing, make sure your project looks like this:

my-first-website/
│
├── index.html
├── style.css
├── script.js
└── images/

The single most common mistake we see is placing index.html inside another folder.

GitHub Pages expects your homepage to be exactly here:

index.html

Not:

website/index.html

Not:

project/index.html

Just:

index.html

That tiny mistake is responsible for a surprising number of 404 errors.

Check the spelling too. GitHub Pages is case sensitive, so Index.html with a capital I will not be found. It must be lowercase.

Step 4: Enable GitHub Pages

Open your repository.

Click Settings.

Select Pages from the left menu.

Under Build and deployment, choose Deploy from a branch.

Then select:

• Branch: main
• Folder: / (root)

Click Save.

One thing to watch here. Some repositories use master instead of main. Open the Code tab and check the branch name shown above your file list. Whatever it says, select that same branch in this menu. If your files live on main but Pages is pointed at master, you will get a 404 no matter how correct everything else is.

Step 5: Wait a few minutes

Deployment usually takes less than two minutes, though it can occasionally take longer.

Refresh the settings page after a few minutes and GitHub will display your live website URL.

Congratulations. Your website is now available anywhere in the world.

Step 6: Updating your live website

Your website is published, but it is not finished, because nothing ever is.

Change something in your project. A colour, a heading, anything at all. Save the file.

Then commit and push:

bash

git add .
git commit -m "Updated heading colour"
git push

Wait about a minute and refresh your live link. Your change is now public.

That loop is what professional developers do every single day. Edit, commit, push, live. The scale changes, the loop does not.

If your change does not appear, your browser is showing a cached copy. Force a refresh with Ctrl Shift R on Windows or Cmd Shift R on Mac.

Common problems

Why does my GitHub Pages site show a 404?

This is almost always one of four things. Your index.html is not in the repository root. The repository is private rather than public. Pages is pointed at a different branch from the one holding your files. Or the site is still deploying and simply needs a few more minutes.

Check them in that order.

Why is my CSS not loading?

Look at your stylesheet link. It should be:

html

<link rel="stylesheet" href="style.css">

If you have written href="/style.css" with a leading slash, that is your problem. The slash tells the browser to look at the very top of the domain rather than next to your HTML file. It works locally with Live Server and breaks the moment you publish, which is why it catches so many people. Remove the slash.

The same applies to images. Use images/photo.jpg, not /images/photo.jpg.

Why does my JavaScript not work?

Open your browser's Developer Tools and look at the Console. Most JavaScript errors tell you exactly what went wrong and on which line.

Learning to read those messages is one of the fastest ways to become a better developer.

Why we teach GitHub Pages at Giiyo Tech

We do not want students building websites that only exist on classroom computers. We want them building projects they can send to friends, parents, teachers, universities, employers and future clients.

Publishing your work changes how you think about it. Suddenly you are not completing an assignment, you are launching something, and that shift in mindset does more for a young developer than any amount of extra theory.

By the end of our July 2026 bootcamp, every student had published their own website using GitHub Pages. Some of them had never written code before the programme began, and a few weeks later they all had live projects they could share with the world.

That is why GitHub Pages remains one of our favourite tools for beginner developers. It is free, reliable, easy to learn, and it reminds every student of something important.

Your work deserves to be seen.

Looking to learn web development?

At Giiyo Tech we teach young people how to design, build and publish real projects using the same tools professional developers use every day.

Explore our programmes at giiyotech.com.