How to Host a Website on GitHub

Web App Development 2 min read

Looking to share your work with everyone? Not sure how to host your website with all the hosting options? Well, it might seem like it's difficult to host a website and also learn all the necessary requirements to host, but that's not always the case! GitHub allows developers from all levels to host their website with a simple GUI.

Steps to Hosting a Website on GitHub

1. If you don't already have a GitHub account, create one at https://github.com.

It's super simple and all you need is a Username, Email and Password.

2. Using either a Mac or Windows, download an application called GitHub Desktop. Open the application and login with your GitHub credentials.

In this example, I am using a Windows computer, hence I downloaded the GitHub for Windows.

Step 2: GitHub Desktop — I'm currently using a GitHub for Windows and I've logged onto my GitHub Account.

3. Create a new Repository on your GitHub Application. This should be located on the File/New Repository.

IMPORTANT - You must name your repository: [username].github.io and ticking the "Initialize this repository with a README" is optional. In this example I am ticking this box.

Step 3: Create a new repository — Your Name must be [username].github.io.

4. If you already have your website files set up, then great! Just move your files into the GitHub folder you saved in.

If you're not sure, check the Local Path in Step 4. For me, this is in C:\Users\[Name]\Documents\GitHub.

IMPORTANT: Your homepage HTML file should be called index.html

Step 4: GitHub Folder — My Repository folder is in Documents/GitHub/wksung.github.io

5. Back to the GitHub Application, you should see all your files that you have uploaded to your repository.

As you can see by the example, the changed files is on the left hand side. Tick the files you want to commit and press the "Commit to master" button on the bottom.

Green background shows the code you have created/edited. On the left hand side, you see the index.html ticked and when you commit to master this will commit it into GitHub.

6. On the top right of your application, click the "Publish Report" and "Publish repository" button.

I personally like to tick the "Keep this code private" box, but that's up to you.

Step 6: Publish Report — The Name should be your GitHub repository name, and tick the "Keep this code private".

7. Now check your [username].github.io on the browser, in my case it would be wksung.github.io.

NOTE: If you check and it's not there, wait for a few minutes and check again.

Step 7: Final Website — My Website! With the URL being the [username].github.io and a heading.

Un-publishing your project

Deleting the master branch that was hosting your website files. Or you could delete the whole repository.

Delete your repository — Once I've deleted the repository, if you check the website now, it'll come up with an error.

www.fonsekainnovations.com/contact/ — Check us out!

website web github