How to host your website on GitHub Pages in 5 minutes?
Tags: github, webdev, beginners, tutorial
Published: 2022-10-07 09:35:25

_Reading time: 2 minutes_

Now, you have finally made your website using HTML, CSS and JavaScript, but now you need to host it on some platform for free. So, where will you want to host the website of yours?


![meme on servers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1x87mrxfbq3ms4t0art0.png)


There are many options to try out web hosting; [Netlify](https://www.netlify.com/), [Vercel](https://vercel.com/), [Amazon S3](https://aws.amazon.com/s3/) etc.

But here, in this article, we will be hosting our website on something called [GitHub Pages](https://pages.github.com/) in just 5 minutes.

### What is GitHub Pages?

GitHub Pages is a static site hosting service by GitHub which takes the necessary files from your git repository (HTML, CSS and JavaScript files), builds them, and publishes the website for you.

You can use a custom domain along with the GitHub Pages to host your website without that "github.io" sub-domain.



![github pages website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovbvyrkrwa0w8u1yx5lu.PNG)


### How to GitHub Pages?

So, let's start!

I have made a sample website that just shows "Hello World" and a button which when clicked will generate some sentences.

This is how it looks like:


![website showing hello world](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xn6sbpou7gz47gy2hxln.PNG)


All the files will be present in a GitHub repository which I have linked to, at the end of this article.


Now, onto the steps:


* Push all your files to a GitHub repository.


![github repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gbo8mgksfnsszldfx9j.PNG)


* Go to Settings.


![github repo settings page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yg04c6s03xe6sawxsook.PNG)


* Scroll down until you see **Pages** tab on the left and click on it.


![github pages section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z8zcsy6t1n78yzrfzucr.PNG)


* Under the **Branch** sub-heading, click on the tab that shows `None` and then select `main`.



![selecting The branch in github pages section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pawrlhxzzf1bnubt7zpo.PNG)


![selecting the main branch in github pages section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtvwx14rwv6iqbqtsaob.PNG)


![showing the main branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9xdkwp82qqox0dp55j3.PNG)


* Click **Save**.



![clicking save to publish the website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8l106s3ye2ihtrrmbwwv.PNG)


* The GitHub Pages source is saved and now, you can wait for sometime until your website is published.



![github pages source saved](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21qz2q5kzkfe0rsfr66q.PNG)


* Try reloading the current page 2-3 times until you get the below page.


![reloading the page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iy6plyn15nhxzhepffcb.PNG)


* Your website is ready! Now you can click `Visit Site` to see your website!




![commenting out code meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/acsy3e2fi6g5hel8ruot.jpg)


Congratulations! You have hosted your website on GitHub Pages in 5 minutes!

I hope you have learnt something new and as always, Happy Learning!


If you would like to follow me, you can follow me on [LinkedIn](https://www.linkedin.com/in/khair-alanam-b27b69221/).

Here's the GitHub repository: https://github.com/khairalanam/Hello-World