You've spent hours writing code, choosing colors, and making your website look exactly the way you imagined it. Now comes the exciting moment of sharing your work with the world.

You might think that publishing your website is intimidating or only something professional developers do. However, you can publish your site for free in just a few minutes!

One of the easiest ways to do this is using GitHub Pages. A free hosting service that turns your coding projects into live websites anyone can visit. 

What is GitHub Pages?

Imagine you made a beautiful art piece. You set it on your desk, but only you or the people you bring into your room can view it. If you wanted anyone to be able to see it you would have to display it somewhere public.

Your website works in this same way. Your files are saved only on your computer, so it can only be viewed from your computer. GitHub Pages acts like a public art museum, giving your website a public home on the internet so it can be viewed by anyone with the link. 

Let's get started!

Below are some videos that will walk you through uploading your files into GitHub and publishing your site, so it is live. You can also follow along with the step-by-step directions.

Before publishing 

Make sure you have:

A website folder on your computer, in it should be an index.html file (this is your homepage. It must be named index.html), a style.css file and your images.

Step 1: Create a GitHub Repository

A repository (repo) is where your project lives online.

Go to GitHub and click the + in the top right. Click New repository. Name your repository for example, my-website. Click Create repository and done! Your empty repo is ready.

Step 2: Upload Your Website Files

Open your new repository. Under the Code section click Add file, Upload files, and drag your whole website folder files into GitHub. Scroll down and add a message like "First website upload". Then click Commit changes and your files are now online!

Step 3: Turn On GitHub Pages

This makes your website public.

Inside your repo, click Settings. On the left side, click Pages and under Source, choose: Deploy from a branch. Then select:
Branch: main
Folder: / (root)

Click Save and wait 1–3 minutes.

GitHub will create your website link. It will look like: https://yourusername.github.io/my-website/

Your website is now live!

Step 4: Update Your Website Later

If you want to add changes to your website follow these steps.

Open your website files on your computer using a code editor, such as Visual Studio Code. Make your changes and save your files. Then go back to your GitHub repo and upload the updated files again. Scroll down to the bottom of the page and add a small description of your changes and click commit changes.

That's it! GitHub Pages will automatically update your website.

Keep Building 

Great job! You created and published your very own website. Let this be only the beginning of your developer journey. With these skills you can continue to build many more projects.

If you have any questions please contact us and we invite you to stay connected with Code On Wheels through the public programs we offer. We will guide and support you as you explore your interests in coding and tech!