Deploying a static HTML and CSS site using Github Pages

The next step after creating a website, is deploying it to make it available to the whole world. If your site is static, and doesn't use any backend then it is pretty straightforward to deploy your app. In this article, I'm gonna talk about how to deploy a static HTML and CSS site using Github Pages.

Register at Github

First of all create an account at Github. Github is a Git repository hosting service which is owned by Microsoft. It provides a great feature called Github Pages and can be used to deploy static sites.

Create a Github Repository

After registering, click on the button which says New on the top left of the page.

Upload files

If you know git, you're welcome to push your files to Github. Else, no worries, you can use Github's file upload feature like so:

Enable Github Pages

Last step is to enable Github Pages like so:

1. Click on Settings
2. Click on Pages
3. Click on Branch and choose master

This might be main depending on the default branch you're working on

1. Click on the button on the right of Branch and choose / (root)
2. Click on Save

Then wait for some time and then refresh. Wait till you see a banner which says something like this:

And there it is! You've deployed your site using Github Pages. For example, you can view the sample deployment here.

Links

You can find the sample github repository in the example here:

https://github.com/kavinvalli/gh-pages-tutorial