How to Host a Static Website on Github for Free

Photo by Soundtrap on Unsplash

Yeah, that’s right. Unlike many websites that require you to purchase hosting and domain, GitHub lets you upload a static website on their platform using Github Pages for free. Let’s make it clear that a static website means the content will not frequently change, i.e., a basic HTML and CSS site, which is a good starting point for beginners as well as experienced programmers. Let’s start by discussing why it is a good idea to host your website on GitHub.

Reasons/Advantages to host your website on Github Page

There can be a lot of reasons and advantages to hosting your website, the most prominent are:

1. To make your profile, as many developers prefer to host their profile on Github
2. To create a portfolio and showcase your skills to potential clients especially your front-end skills
3. You want to set up your blog where you can share articles or how-to tutorials
4. You already know basic Git, and you want to enhance your learning about Git further. In that case, I will suggest you learn about GitHub gist, GitHub actions, and CI/CD tools as well

In this article, we will discuss how to set up a website for free, what tools you need to have, what will be the URL when the site is published, how many sites you create on Github. So let’s keep moving.

Let’s get started

Hosting a website on GitHub page is not rocket science; instead, it is so simple that even if you have just started programming and knows basic HTML and CSS and basic Git commands like add, commit and push you can do that. If you do not see these git commands don’t worry, the commands we ll use will be explained as well. If you want to learn Git then I will suggest you read my another article to get yourself familiar with git basics:

Learn Git and Github Step By Step

We will be discussing two variants of hosting a website on Github. You can work on either one or both of them because most of the procedure is the same in variant 2. The difference is in the domain name when your site is live. So if you are creating a personal profile, then choose variant 1, its URL will be shorter, and if you are doing any other website, its URL will be longer, then choose variant 2.

Variant 1: Hosting a personal page on GitHub with domain https://.github.io

First, we will create a demo application, that works on our desktop PC

Step 1: Setup Git, Register GitHub account, and create a repository

Go to https://git-scm.com/downloads and download Git by choosing your operating system: Windows, Mac, or Linux and install.

Then, go to https://github.com and sign up. After signing up, click on the plus sign and choose a new repository (a repository is like GitHub gives you a folder/directory where you keep your code files and folders on GitHub). When it asks you to enter a name, type the name in the format .github.io so since my username on GitHub is ows-ali, I will write ows-ali.github.io

Step 2: Clone the repository in your computer

Now my repository will be created at https:/github.com/ows-ali/ows-ali.github.io. Now, in your laptop, create a new folder and in command prompt type:

git clone https://github.com/<your\_username>/<your\_username>.github.io

Step 3: Add your website pages

You will get an empty folder created on your laptop. Go inside the folder and add your project files. It can simply be a single index.html file or more project files like I have as below (yours will be different of course)

Step 4: Push to GitHub

Now the code is on your computer/laptop until now. We want to push the code on GitHub. For that, we use three commands: add, commit, and push. Now open the command prompt again and type the following commands as it is in order.

git add .
git commit -m "my first commit"
git push origin master

Step 5: Boom! Access the published website on the internet

Now, type the repository name from step 1 in your browser, and you will see your site live.

You can also visit my hosted site at https://ows-ali.github.io

Variant 2: Hosting any static website from your GitHub account with domain https://.github.io/

If you want to host more than one website, you can do so easily and as many as you want. You can make a new repository or use an existing repository that has an index.html file.

The hosted URL will be in the format https://.github.io/. Deploying any other repository is the same as we learned in variant 1 with the difference in the final step.

Once you have pushed the code on Github go to Settings, navigate to Github Pages section, and select source as ‘master branch’ and then your repo will live as well.

That’s all it in this tutorial. Also, I have listed a few important points below, hope it helps further.

Note:

1. Your project must have an index.html file, for Github to recognize and host it.
2. It is free. You don’t have to pay for hosting and not even domain.
3. Even after your site is live, you can make as many updates as you want and they will go live. But it some times several minutes to reflect updated changes so please be patient.
4. Unfortunately, it does not support any programming language like JAVA, PHP, Node, etc
5. It does not support any databases
6. Luckily, you can host as many sites on GitHub pages as you want for free.

Hope you liked the article and it helped you in hosting a site on GitHub.

Have a good day.

---