DEV Community

Cover image for How to host your website on GitHub Pages in 5 minutes?
Khair Alanam
Khair Alanam

Posted on

How to host your website on GitHub Pages in 5 minutes?

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

There are many options to try out web hosting; Netlify, Vercel, Amazon S3 etc.

But here, in this article, we will be hosting our website on something called GitHub Pages 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

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

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

  • Go to Settings.

github repo settings page

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

github pages section

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

selecting The branch in github pages section

selecting the main branch in github pages section

showing the main branch

  • Click Save.

clicking save to publish the website

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

github pages source saved

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

reloading the page

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

commenting out code meme

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.

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

Top comments (0)