How to host static sites on Github pages

Finally finished your first project, you're so excited you want to show it to everyone but then you remember you don't know how to host a site online? Well this tutorial covers how to get you started with hosting static pages on GitHub pages. Let get into it.

Prerequisites:

HTML
CSS
And, maybe some JavaScript

Note: This tutorial assumes you already know a bit of HTML and CSS. So i won't be addressing those in this tutorial.

To get started you'll need to have git installed, if you don't already have git installed on your computer you can get it here: https://git-scm.com/.

Next, create a folder and add an HTML and CSS files. I'll be creating a simple application with just a loading spinner animation. Copy and paste the following code in your local file:

Index.html

<!Doctype html>
   <html lang="en">
     <head>
        <title>Git And Sass practice</title>
        <link rel="stylesheet" href="./css/styles.css" />
    </head>
    <body>
        <div class="loading"></div>
    </body>
</html>

Styles.css

body {
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

h1 {
  color: white;
  font-size: 5rem;
  text-align: center;
}

.loading {
  width: 100px;
  height: 100px;
  border: 5px solid #fff;
  animation: spin 2s linear infinite;
  position: relative;
}

.loading::before {
  content: "";
  width: 100%;
  height: 100%;
  border: 5px solid #fff;
  position: absolute;
  left: -0.3rem;
  top: -0.3rem;
  animation: spinbefore 2s linear infinite;
}
.loading::after {
  content: "";
  width: 100%;
  height: 100%;
  border: 5px solid #fff;
  position: absolute;
  left: -0.3rem;
  top: -0.3rem;
  animation: spinafter 2s linear infinite;
}

@keyframes spin {
  50% {
    transform: rotate(360deg);
  }
}

@keyframes spinbefore {
  50% {
    transform: rotate(30deg);
  }
}

@keyframes spinafter {
  50% {
    transform: rotate(60deg);
  }
}

With that done, open your browser and visit the GitHub official website, follow the steps to create an account if you do not have one already, i won't be covering that in this tutorial.

If you already have an account login, once that is done it takes you to your this page.

Click on new on the left sidebar to create a new repository.

On the next page enter your repo name, click on add Readme and then click on create repository to finish creating your repo.

Voila! you just completed the first step to hosting you site. Here is what your repo looks like for a start but as you make changes and push it is bound to reflect all the files from your project.

Next, we need to connect the remote repo to your local repo, open git bash/cmd on windows and terminal on mac. I prefer to use terminal from my vs code editor that way i don't have to leave my editor.

Open terminal and run git init to initialize an empty git repo in the folder you already have open. Then open GitHub and on the new repo click on the green code button and copy the repo url.