How to Publish Your Website for Free: GitHub Pages and Netlify

Learn how to publish your website for free with GitHub Pages or Netlify, so anyone can visit it. We prepare your files, put them online step by step, and test the site on a phone.

What are web hosting and a domain name?

Right now your website lives only on your computer. To let other people see it, you need web hosting: a computer that is always on and connected to the internet, which sends your files to anyone who asks for them. That computer is called a server. Hosting is like renting a shop: your files are the goods, and the server keeps the door open day and night.

A domain name is the address people type to find your site, like example.com. It is like the street address of your shop. Free hosts give you a free address that includes their name, for example sam.github.io or sam-portfolio.netlify.app. You can buy your own domain later if you want one.

For a site made only of HTML, CSS, images and maybe a little JavaScript (called a static site), hosting can be completely free. Two popular, beginner-friendly options are GitHub Pages and Netlify. Both give you free HTTPS, which means the padlock icon in the address bar.

How to prepare your files before you publish

A few small checks now will save you from broken pages later.

1. Name your home page index.html. Servers look for this file first. When someone visits your address, index.html is the page they see.
2. Use lowercase file names with no spaces. Write about-me.html and team-photo.jpg, not About Me.html. Web servers treat Photo.jpg and photo.jpg as different files.
3. Use relative paths for your own files. Write images/logo.png, never C:\Users\Sam\Desktop\logo.png. A path to your own hard drive does not exist on the server.
4. Put everything in one folder. Your HTML, CSS and images all go inside one project folder, with index.html at the top level (not hidden inside a sub-folder).

A tidy project folder looks like this:

my-website/
├── index.html
├── about.html
├── 404.html
├── css/
│   └── style.css
└── images/
    ├── logo.png
    └── team-photo.jpg

And here is an index.html that is ready to publish:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sam Lee - Web Design Student</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <img src="images/logo.png" alt="Sam Lee logo" width="120" height="120">
  <h1>Hi, I'm Sam</h1>
  <p>I'm learning HTML and building my first website.</p>
  <a href="about.html">Read more about me</a>
</body>
</html>

Every path is relative and lowercase, so the logo, the stylesheet and the "About" link work on your computer and on the server. The viewport meta tag makes the page fit small phone screens.

Both GitHub Pages and Netlify also look for a file called 404.html. If someone visits a page that doesn't exist, they see this friendly page instead of a plain error:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page not found - Sam Lee</title>
</head>
<body>
  <h1>Sorry, this page does not exist</h1>
  <p>The link may be old, or the address may have a typo.</p>
  <a href="/">Go to the home page</a>
</body>
</html>

The link uses /, which means "the root of the site", so it works from any address on your site.

Common mistake: Everything works on your computer but images are broken online. Usually a file is called Logo.PNG while your HTML says logo.png. Windows and macOS ignore the difference; web servers do not.

How to publish with GitHub Pages, step by step

GitHub is a website for storing code. GitHub Pages turns a GitHub project into a live website for free.

1. Go to github.com and create a free account. Your username becomes part of your web address.
2. Click the + button at the top right and choose New repository. A repository (or "repo") is a project folder stored on GitHub.
3. Give it a name like my-website, make it Public, and click Create repository.
4. On the new page, click uploading an existing file (or Add file, then Upload files). Drag in everything inside your project folder, including the css and images folders. Then click Commit changes to save.
5. Open the repo's Settings tab and click Pages in the left menu.
6. Under "Build and deployment", set the source to Deploy from a branch, choose the main branch and the / (root) folder, then click Save.
7. Wait one or two minutes and refresh. GitHub shows your address, for example https://sam-lee.github.io/my-website/.

To update your site later, upload the changed files to the same repo. The live site updates by itself after a minute or so.

Tip: If you name the repository exactly your-username.github.io, your site lives at https://your-username.github.io/ with no folder name at the end. Each account can have one site like this.

How to publish with Netlify drag and drop

Netlify is even faster if you don't want to learn GitHub yet.

1. Go to netlify.com and sign up for a free account. You can sign up with your email or your GitHub account.
2. Find the area that says you can drag and drop your project folder to deploy.
3. Drag your whole my-website folder onto it. Netlify uploads it and gives you a live address in a few seconds, like https://shiny-cupcake-12ab34.netlify.app.
4. In the site settings, change the site name to something nicer, such as sam-lee-portfolio. Your address becomes https://sam-lee-portfolio.netlify.app.

To update the site, open the site's Deploys page and drag the folder in again. Netlify keeps old versions, so you can go back if something breaks.

Using your own custom domain

If you want an address like samlee.com, buy it from a domain registrar (a company that sells domain names); most cost about 10 to 20 US dollars a year. Then open the custom domain section in GitHub Pages settings or in Netlify's domain settings and type your domain. The host shows you some DNS records, which are like signposts that tell the internet where your domain points. Copy them into your registrar's DNS settings. It can take from a few minutes to a day to start working, and both hosts then add free HTTPS for you.

How to check that your website works on a phone

Most visitors will use a phone, so always test there.

• Open your live address on your phone, or send the link to yourself in a message.
• Check that the text is readable without zooming and that nothing is wider than the screen.
• Tap every link and check that every image loads.
• Visit a made-up page, like /test-page, to see your 404 page.
• On your computer, open DevTools (F12) and turn on the device toolbar to try many screen sizes quickly.

Note: After you upload changes, your browser may still show the old version from its memory (the cache). Do a hard refresh with Ctrl + Shift + R (Cmd + Shift + R on a Mac) to load the newest files.

Practice exercise

Publish your personal profile page from the beginner project. Rename the main file to index.html if needed, make all file names lowercase, and add a simple 404.html. Publish it with GitHub Pages or Netlify, then open the live link on your phone and test every link and image.

Hint: if an image is broken online, compare the file name in your HTML with the real file name, letter by letter, including capital letters and the file extension.

Frequently asked questions

Is GitHub Pages really free?

Yes. GitHub Pages is free for public repositories and is meant for personal, project and portfolio sites. It does not run server code like PHP or databases, only static files.

Should I choose GitHub Pages or Netlify?

Both are great. Netlify drag and drop is the quickest start. GitHub Pages is a good choice if you also want to learn GitHub, which most developers use every day.

Why does my site show a 404 error after publishing?

Usually there is no index.html at the top level of what you uploaded. Make sure index.html is not inside an extra folder, and that its name is all lowercase.

Key takeaways

• Hosting stores your files on a server; a domain name is the address people type.
• Before publishing, use index.html, lowercase names without spaces, and relative paths.
• GitHub Pages: upload files to a public repo, then turn on Pages in Settings.
• Netlify: drag and drop your folder to get a live site in seconds.
• Always test the live site on a real phone and do a hard refresh after updates.