Put Your Website Online for Free with GitHub Pages

A laptop folder with index.html becoming a live username.github.io website with an HTTPS padlock in the browser

A GitHub Pages website is a static site that GitHub hosts for you at username.github.io, served over HTTPS, at zero cost. Right now your site sits in a folder on your laptop, and nobody else can see it. This guide shows you how to change that in a few minutes.

Four pieces do the work. GitHub holds your code. Git sends it there. GitHub Pages publishes it. HTTPS keeps it secure. One folder goes in, and a real public website comes out, padlock included and no bill attached. Follow the steps in order and you can ship it today.

TL;DR
  • Name your repository exactly username.github.io and keep it public.
  • Push your files to a branch called main, with index.html at the root.
  • In Settings → Pages, deploy from the main branch, / (root) folder.
  • Wait about a minute, hard-refresh, and confirm the https:// padlock.
  • Most 404s come from the filename, path case or the wrong branch.
  1. 0:00Intro
  2. 0:28Your goal and what you need
  3. 1:18Create your username.github.io repository
  4. 2:09Push your site files to main
  5. 3:01Enable Pages from the main branch
  6. 3:44Open your live site and verify
  7. 4:29Seeing a 404? Fix it fast
  8. 5:13From laptop to live in five moves
  9. 5:42Push code, flip a switch, go live

Gather what you need before you start

Set the target first. You want one real public website on GitHub Pages, served over HTTPS, that anyone can open from anywhere. The address will be username.github.io, and the HTTPS padlock is already switched on. You don't buy a certificate and you don't configure a server.

The cost is zero. GitHub Pages hosts static sites for free, so plain HTML, CSS and JavaScript all work as they are. That means no credit card and no hosting plan to choose. If your site is a set of files that a browser can open directly, it qualifies.

Check one detail before you go further. Your index.html must sit at the root of your folder, not inside a subfolder. That file is the front door of your site. If it's buried somewhere else, visitors get nothing at your main address.

  • A free GitHub account
  • Git installed on your computer
  • A site folder with index.html at its root
  • Enough terminal comfort to type a few commands

Create your username.github.io repository

Give your site a home on GitHub, and slow down here. This is the step people get wrong most often. The repository name isn't just a label. It becomes your web address, so a single typo changes where your site lives.

Open github.com/new. Under "Create a new repository," type your exact GitHub username followed by .github.io in the Repository name field. Choose Public, leave Private unselected, and click Create repository. That's the entire step.

Why so strict? Match your username letter for letter and you get the root domain, username.github.io. Call the repo anything else, such as portfolio, and the site lands at a subpath instead. Visibility matters just as much. On a free GitHub plan, Pages only publishes from public repositories. Pick Private and nothing goes live.

  • Repo name is exactly your-username.github.io
  • Spelling matches your GitHub username letter for letter
  • Visibility is set to Public
  • You clicked Create repository

Push your site files to the main branch

Your repo exists, but it's empty. Now ship your files up to it. Open your terminal inside your site folder, the one holding index.html. Every command below runs from there, and six of them cover the whole move.

Here's what each one does. git init creates a hidden Git repository in the folder. git add . stages every file. git commit saves a snapshot with a short message. git branch -M main renames the branch to main. git remote add origin links the folder to your GitHub repo URL. git push -u origin main sends it all up. When the push succeeds, look for a line showing a new branch, main -> main.

Why rename the branch? Older Git setups default to master, and in the next step you'll point Pages at main. The names need to match. Keep index.html at the root too. If it's inside a folder like site/ or dist/, nothing shows at your address. Your folder layout is your URL layout.

  • Terminal is open in the folder that contains index.html
  • Branch is named main, not master
  • Push output shows main -> main
  • index.html is at the root, not in site/ or dist/
git init
git add .
git commit -m "First version"
git branch -M main
git remote add origin <your-repo-url>
git push -u origin main

Enable GitHub Pages from the main branch

Your code is on GitHub, but it isn't a website yet. This is the switch that makes it live, and it all happens on one settings screen. You don't need build tools, config files or deploy scripts.

In your repository, open Settings, then choose Pages in the sidebar. Under GitHub Pages, set the source to Deploy from a branch. Pick main as the Branch, choose / (root) as the Folder, and click Save.

GitHub then starts a deployment that copies your files onto its servers. You can watch it run in the Actions tab of your repo. From now on, every push redeploys. Commit, push to main, and the live site refreshes by itself. Updating your site takes one git push.

  • Source is set to Deploy from a branch
  • Branch is main
  • Folder is / (root)
  • You clicked Save and the deployment appears in Actions

Open your live site and check the padlock

Now prove it works. Give it about a minute, because the first deploy takes a moment. A blank page after ten seconds is normal, not a failure. Then open username.github.io in your browser, exactly the way a stranger would.

Here's what happens under the hood. Your browser starts an HTTPS handshake with GitHub Pages. GitHub Pages answers with a valid certificate. The browser then requests /index.html and gets back 200 OK along with your page. That exchange is why the padlock appears without any setup from you.

Hard-refresh before you judge the result. Press Cmd+Shift+R on a Mac or Ctrl+Shift+R on Windows to skip the cache, so you see the fresh deploy and not an old copy. Then check the address bar. If it starts with https:// and shows the lock icon, your site is live.

  • You waited about a minute after saving
  • You hard-refreshed with Cmd+Shift+R or Ctrl+Shift+R
  • The URL starts with https://
  • The lock icon shows in the address bar

Fix a GitHub Pages 404 error fast

Seeing a 404 instead of your page? On GitHub Pages it almost always comes down to the same few mistakes. Check them in this order and you'll catch nearly every case.

Start with the filename. Index.html with a capital I, or index.htm, won't be found. Rename it to exactly index.html. Next, check path case. Your laptop may treat Logo.png and logo.png as the same file, but the server doesn't, so a link to Images/Logo.png can break. Keep paths lowercase and matching. Finally, check the branch. Confirm Pages is set to main and the root folder.

Still seeing an old version after a fix? Deploys can lag a little. Wait another minute, then hard-refresh again. Most fixes come down to one rename and one push.

  • Filename is exactly index.html, all lowercase
  • Links and image paths match file names case for case
  • Pages is reading main, / (root)
  • Waited a minute, then hard-refreshed again

Recap the five moves from laptop to live

Here's the whole route from a private folder to a public site. It's five moves and a few minutes of work, and you haven't spent anything. Git moves your code, one setting makes it public, and every push after that updates the live site.

Once it's live, sharing it is the next move. A natural next step after this is putting your own custom domain on the site. Start with the username.github.io address, though. Your work deserves an audience, so ship it today.

  • Create the username.github.io repo
  • Push your files to main
  • Enable Pages from the root folder
  • Verify it's live on HTTPS
  • Fix 404s by checking the name, the case and the branch

The bottom line

  • GitHub Pages hosts static HTML, CSS and JavaScript sites for free, with HTTPS included.
  • The repo name username.github.io gives you the root domain, and any other name gives you a subpath.
  • Free plans need a public repository for Pages to publish.
  • Keep index.html at the root and push to a branch named main.
  • After setup, every push to main redeploys your site automatically.
  • Most 404s trace back to the filename, path case or the selected branch.

Quick-fire questions

Is GitHub Pages really free?

Yes. GitHub Pages hosts static sites for free, and HTTPS is already switched on. You don't need to buy a certificate or pay for a server.

Why is my GitHub Pages site showing a 404?

The usual causes are a misnamed file such as Index.html or index.htm, paths whose upper and lower case don't match the real file names, or Pages reading the wrong branch. Fix the name, match the case, set Pages to main and / (root), then wait a minute and hard-refresh.

Can I use a private repository with GitHub Pages?

On a free GitHub plan, Pages only publishes from public repositories. If your repo is private on a free account, your site won't go live.

What happens if my repo isn't named username.github.io?

Your site still publishes, but at a subpath instead of the root domain. For example, a repo called portfolio ends up under your github.io address at /portfolio rather than at the address itself.

How do I update my site after it's live?

Commit your changes and push to the main branch. Every push redeploys automatically, and you can watch the deployment in your repo's Actions tab.

How long does a GitHub Pages deploy take?

Give the first deploy about a minute. If you still see an old version, wait a little longer and hard-refresh with Cmd+Shift+R or Ctrl+Shift+R.

Watch the full video on YouTube →

Souy Soeng

Souy Soeng

Hi there 👋, I’m Soeng Souy (StarCode Kh)
-------------------------------------------
🌱 I’m currently creating a sample Laravel and React Vue Livewire
👯 I’m looking to collaborate on open-source PHP & JavaScript projects
💬 Ask me about Laravel, MySQL, or Flutter
⚡ Fun fact: I love turning ☕️ into code!

Post a Comment

CAN FEEDBACK
Ad