How to Host a Website for Free Using GitHub Pages
Web hosting plans come in a variety of options and price points. There are more expensive plans that have the capacity for hosting the biggest websites in the world, but what if you just need a simple hosting solution for a simple website?
For a static website or small web apps, there are free hosting plans that can get you up and running online in a moment. They require a bit more setup than a paid host, but it’s a worthy trade-off for free.
GitHub Pages is one such option, and in this article we’ll show you how to host a simple website using GitHub Pages for free.
What Is GitHub Pages?
GitHub Pages is a service created by GitHub that allows you to publish a website or web application by storing it in a free GitHub repository.
You can host one full website and unlimited “project sites” which can be thought of as “pages” on a website. Website code is stored in a designated GitHub repository, which GitHub will then publish to be viewed on any computer or tablet.
The process is quite simple, but there is a little bit to cover. Let’s jump into how to accomplish this.
GitHub is a popular version control service for computer programmers that uses Git to store and control code. Code is stored in repositories, which are just containers on a cloud server that let you access your code from all of your computers.
You can create new repositories using GitHub’s website or through the command line when you have Git installed. Repositories are given names, can be public or private, and can store code in any language. Once you create your repository, with Git you can pull your code from the server to make changes then upload back to GitHub.
Setting Up Your Website On GitHub Pages
The process of hosting a website using GitHub Pages can be simplified into three steps:
- Create a GitHub account
- Create a new repository with a few rules
- Edit your code and upload to GitHub to take your website live
Let’s go over a little more detail on how to get your static website published live on GitHub Pages. You’re going to need some HTML knowledge, so now is a good time to brush up on some HTML basics.
Creating Your GitHub Account
Head to GitHub’s website to sign up on this LINK.
You will need to choose a username and sign up with your email address and a password. The username will be important to get your website up and running. Once you sign up, log in to the homepage to start your website.
Creating Your GitHub Repository
From the GitHub home page, you will see a “repositories” section on the far left. Here will be a list of all your repositories, as well a “New” button which will allow you to create a new repository.
Click on “New” and you will be taken to a new screen to enter the repository information.
First, you will need to enter the repository name.
Once you enter the username, you can enter an optional description to add some detail to your repository (i.e. “My sports website”).
Choose either “public” or “private” to control whether other users can see your repository. Public means anyone can see or contribute to your code , private means only you can see and modify.
Lastly, you can create a README file for your repository, which is just meant to hold documentation for projects. It’s totally optional.
Now that you’ve got this filled in click “Create repository” to finish!
After clicking on “Create repository” , you will go to this below screen.
You have more than one option to upload your code to github. We will choose the direct upload section to upload your code to github. For this let’s make a demo HTML, CSS code to host it live.
Editing And Uploading Your Website
I have these two files which I will upload and host live on the server. You can copy this code or make your code which you want to host live.
Code available at:- LINK
Now click on the “Upload an existing file” and upload these two files on github.
After upload , at bottom you have to save these files by giving a commit name and optional description.
Setting Your website Live
After clicking on “Commit changes”, you have reached to root directory of your repository where your code has been uploaded. Now head over to the settings tab.
`And then Scroll down to Github Pages Section.
Click on “None” and select main branch. Then click on ”Choose a theme” and select anyone of the provided option and click on “Select Theme”.
Now you are all set. Yes, I am not kidding. Can you see something on the page?
Viewing Your GitHub Pages Website
Click on that link and you will get your website.
The format of website URL is: https://[USERNAME].github.io/[repository-name]. Thus you can make your repository name accordingly to make it attractive or relative to the website.
You will see your website published live! It can be view in any browser on any computer, tablet, or phone. It’s a fully functioning website.
If you learned something from here, please consider giving this article a ‘clap’ as a token of your appreciation.