How to Publish a Website for Free Using GitHub Pages

by sssledge in Circuits > Computers

53 Views, 4 Favorites, 0 Comments

How to Publish a Website for Free Using GitHub Pages

github_pages_Tutorial_big.png

Publishing a website might sound complicated, especially if you think you need to pay for hosting or buy a domain first. When I first started building websites for class projects, I didn’t realize there was a completely free way to put them online. GitHub Pages lets you host your website for free in just a few steps.

This guide is for beginners, college students, or anyone who has built a simple website and wants to publish it online without paying for hosting. By the end of this tutorial, you will have a live website link that you can share with professors, employers, or clients.


Supplies

• Computer or laptop

• Internet connection

• A GitHub account

• A basic website file (at a minimum, an index.html file)

Create a GitHub Account

Screenshot 2026-04-22 at 6.29.30 PM.png
Screenshot 2026-04-22 at 6.31.52 PM.png
Screenshot 2026-04-22 at 6.32.42 PM.png

Go to www.github.com in your web browser.

Click the Sign-Up button in the top right corner.

Enter your email address, create a username, and set a password. Follow the on-screen instructions to complete the account setup process.

Once your account is created, log in to access your GitHub dashboard.

At this point, you should see your GitHub homepage with options to create a new repository.


Create a New Repository

Screenshot 2026-04-22 at 6.35.30 PM.png
Screenshot 2026-04-22 at 6.36.27 PM.png


Click the “+” icon in the upper right corner of your dashboard.

Select “New repository.”

In the Repository Name field, type a name for your project.

If you want this to be your main website, name it: yourusername.github.io

(Replace “your username” with your actual GitHub username.)

If this is just a project site, you can name it anything you prefer.

Keep the repository set to Public, since GitHub Pages only works with public repositories on free accounts.

Click Create repository at the bottom of the page.

You now have an empty repository ready to upload files.



Upload Your Website Files

Screenshot 2026-04-22 at 6.37.44 PM.png


Click the “Add file” button inside your new repository.

Select “Upload files.”

Drag and drop your website files into the upload area. At a minimum, you need a file named: index.html

If your website includes CSS, images, or JavaScript files, upload those as well. Scroll down and click Commit changes to save your files to the repository.

After committing, your files should now be visible inside your repository.


Make Sure Your Main File Is Named “index.html”

Screenshot 2026-04-22 at 6.26.35 PM.png

Open your repository and look at the list of uploaded files.

Check that your main homepage file is named exactly:

index.html

GitHub Pages automatically looks for a file named index.html when loading your site. If your file is named something different (for example, home.html or main.html), the website will not display correctly.

If needed, click on the file name, choose the edit (pencil) icon, and rename the file to index.html. Then scroll down and click Commit changes.

Once this file is correctly named, GitHub can recognize it as your homepage.


Open Your Repository Settings

Picture5.png

Click on the Settings tab at the top of your repository.

Scroll down the left menu until you see Pages.

Click on Pages to open the GitHub Pages configuration section.

This is where you will activate your live website.


Enable GitHub Pages

Screenshot 2026-04-22 at 6.38.58 PM.png

Under the Build and Deployment section, locate the “Source” dropdown menu. Select Deploy from a branch.

Under Branch, choose main (or master if that is your default branch). Click Save.

GitHub will now begin publishing your site. It may take a minute or two to process. Once publishing is complete, a message will appear with your live website link.


Locate Your Live Website Link

Screenshot 2026-04-22 at 6.39.49 PM.png

After saving your settings, stay on the Pages section.

Look for a green box that says:

“Your site is live at…”

Click the provided URL.

Your website should now open in a new tab.

If everything was uploaded correctly, you should see your live webpage displayed online.


Test and Update Your Website

Review your live site carefully.

Check:

• Do all images load?

• Does your CSS styling appear correctly?

• Do links work?

If something is not correct, return to your repository.

Click on the file you want to update.

Select the edit icon, make your changes, and click Commit changes again. GitHub will automatically update your live site after each commit.

Refresh your website after a minute to see the updates.


Troubleshooting Tips

If your site shows a 404 error:

• Make sure your file is named index.html

• Confirm you selected the correct branch in Pages settings

If your CSS is not loading:

• Check that your file paths are correct

• Make sure your CSS file was uploaded successfully

If your site does not appear immediately:

• Wait 1–3 minutes and refresh the page