DEV Community

Cover image for How to Host your Static Web pages on GitHub-Pages for Free

Posted on

How to Host your Static Web pages on GitHub-Pages for Free

Hello everyone! I am Nirupamvas and today I am going to tell you about how you can use GitHub-Pages to host your static web pages. So lets get started.

Before we dig in you need to know little bit about GitHub and GitHub-Pages

  1. GitHub :
    GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere. People from different parts of the world upload here projects and contribute to opensource and many opensource projects are in GitHub.

  2. GitHub-Pages :
    GitHub Pages is GitHub's answer to project pages, and it allows you to serve any static website straight from your repository. Since GitHub pages support custom domains, you can host a static website on GitHub pages free of charge, with deploys straight from Git.

1) Create a Git-Hub account:

Go to Git-Hub website and fill the details and create an account.
Alt Text

After creating you will redirected to your dashboard or just sign in with your credentials.

2) Create a Repository

Click on create repository
Alt Text

Give the repository name, description. If you want others to see your repositories check public or else check private, if you want to describe or need to say how to work with it then include Readme.
Alt Text
Click on create Repository

3) Uploading Files

For uploading files there are 2 ways one is using Git-CLI and other one is using native method. I will be using native method that's so simple.
Alt Text

Click on the upload file section then you will able to see the following screen.
Alt Text

Here you can drag and drop your files or click on upload and select files.
Alt Text
After uploading all of your files click on commit changes.

4) Publishing your webpage

Now click on Settings tab as show below.
Alt Text

Now scroll down until you see a section called GitHub Pages
Alt Text

Now select branch as main and click on save.

Now after saving it will be reloaded now scroll down and you will be able to see a link.
Alt Text

Click on the generated link and your good to go!!
Alt Text

That's it Guys, Hope you like it, if you so hit that like button any queries leave a comment below.!

Top comments (0)