How to host static sites on Github pages
Published: 2023-11-13 23:42:02

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: 
1. HTML
2. CSS
3. 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dsvro25tcho0nnq5fxks.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bp013rp6d2wmzkvvfhy2.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctsxzguqokwjrfn4i458.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kn7nlzvjqqeueextftlu.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ewipgyfkuwdbbyrqsv8.png)

Now to connect the local repo to the remote repo you can either run 

**git clone** to create a local close of your repo

or 

**git remote add origin [the-repo-url-you-copied]**

and then run to pull and merge all files in the remote repo with those in the local one.

**git pull origin main**

Now, run **git add .** to add all files in the to the staging area

and then run **git commit -m "your-commit-message"**

and then run **git push origin main** to push all changes to your remote repo.

Then, open GitHub and go to the settings tab, click on the pages tab on the left sidebar

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqevoktcn029n3g6ro8u.png)

In the pages tab select deploy from a branch, a little further down select the branch to deploy from and click save

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2izxz7dhxaf2nra5jih.png)

And like that your site is live after a few minutes reload page and click visit site.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0y94hz2lw07e9bwlrb4.png)

Thank you for reading. 

Live version of my local example: https://danielomehe.github.io/sass-compile/