Deploying a static HTML and CSS site using Github Pages

Kavin Desi Valli
·Mar 7, 2022·

2 min read

Deploying a static HTML and CSS site using Github Pages

Photo by Roman Synkevych on Unsplash

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Table of contents

  • Register at Github
  • Create a Github Repository
  • Upload files
  • Enable Github Pages
  • Links

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. Create Repository Create repository input repo name

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:

Upload files to Github

Enable Github Pages

Last step is to enable Github Pages like so:

  1. Click on Settings Enable Github Pages
  2. Click on Pages Screenshot 2022-03-07 at 19.12.05.png
  3. Click on Branch and choose master

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

  4. Click on the button on the right of Branch and choose / (root)
  5. Click on Save

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

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

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

 
Share this