Host a static website on GitHub

Shubham Agrawal
3 min readDec 28, 2022

--

Host a static website on GitHub

Recently I was working on my portfolio website and wanted to host my site to show my work to others. After searching a lot through Internet, I came across github.io pages that let developers host the website for free. So not to bore you guys with the history of my work and let's just dive into the coding.

Pre Requisite — You have your own static .html and .css files ready i.e. a simple static website is ready.

Static Website — A static web page is a web page that is delivered to the user’s web browser exactly as stored.

Step 1: Create a GitHub account or log in to your account.

Step 2: Create a new repository and enter the repository name as you want your website name to be.

So for example, if you enter “demo” as the name of your repository your website would be hosted on https://[username].github.io/[demo]

In my case, it is https://shubh261096.github.io/demo

Create a new repository

Note: Make sure to set the default option for the repository to be public. Also, select the checkbox for “Add a README file” (only for beginners or no knowledge of how to upload the files through git bash)

Step 4: Click on Add file > Upload files on the next page as shown in the figure.

Add file into your GitHub repository

Step 5: Click choose your files and upload your .html file and write your commit message as given below and finally click on Commit changes.

Add files and commit changes

Add other important files if you have like .css files or image files if you have.

Step 6: Click on the Settings tab on the main repository page.

Settings tab on repo page

Step 7: Under the Settings tab, From the left side, go to Pages and under Branch select main as given below in the figure.

Selecting branch inside pages tab

Step 8: Click Save and your website will be live after a minute of saving.

Deploy the website

Step 9: Alternatively if you can’t see the above message, just try https://[username].github.io/[reponame]

Hurray! Your site is live 😁

--

--