Deploy Static sites using GH-pages
Tags: webdev, beginners, github, javascript
Published: 2021-06-28 11:23:15

 ## GH pages to host static sites💻.
Today, I will be showing you how to host your front-end application or static websites using GitHub pages readily available on your GitHub account. Yeah, I know there are tonnes of platforms offering free hosting like Vercel, Netlify, and the likes. Adding gh-pages to your hosting arsenal won't be a bad idea.
![deedee](https://media.giphy.com/media/dJD0xpWqYDkic/giphy.gif)

## Prerequisite
🔗 NodeJS (Installed on your PC)
🔗 GitHub account
🔗 IDE (Visual Studio Code)


👨🏽‍🏫Follow the package installation instructions below
1. Run `npm init -y` to initiate your package.json file. This builds a package.json file.
![carbon (19)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pp0uwef050pm5l9qe3ig.png)
 
1. npm install gh-pages to install GH pages
![carbon (20)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4gciro7v3ltvevsnls7.png)

Create a 'dist' folder 📒 and create all files you want to deploy inside like index.html, styles.css, main.js, and so on.
![dist folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdut2vvzbba8q6g28vql.JPG)

For demonstration, I will write **Hello World!** in my HTML biolerplate.
 ```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub pages</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>
```
Next, we need to edit out package.json file.
Inside your *package.json* add a key-value pair as below.
![carbon (25)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d311gh8r488k3si0shz2.png)
 
↪️ _drsimplegraffiti_ is my GitHub account username, you need to change yours to your GitHub username.
↪️ _ghtuts_ is the name of my repository that I want to deploy to GitHub. Change it to whatever you want to call yours
↪️ _"Deploy": "gh-pages -d dist_ is the script that enables us to deploy the gh-pages repository. (Highlighted in green)

Next is to create a repository on GitHub
Before we create a repo, we need to create a .gitignore file to prevent our node_modules folders that housed our dependencies from being pushed to our repo. We do this *important* step because node_module files are super large 🤦🏾‍♂️
![gitignore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7nxy2i51jlmcs02y4j7.JPG)
 
📌 We create a repository on GitHub
![new repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkchekkqeoolu3w0zol7.JPG)
 
📌 Run the following git commands. You know the drill 😁
```
‌🎯 git init (initial a git repo by creating a .git hidden file)
🎯 git add. (adds files to the staging area)
🎯 git commit -m "initial commit" 
🎯 git remote add origin <URL of repo created on GitHub>
    ```
In my case: git remote add origin 
    https://github.com/drsimplegraffiti/ghtuts.git
    ```
🎯 git push -u origin master
```
Go back to Github and refresh you should have something like this.
![gh](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nypzmklmk7o1vcjixkcj.JPG)
 

📌 Now to deploy to the gh-pages run this on your terminal.
![carbon (26)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z4h3znot0jja95mwjr3m.png)
 
If successful you will see a `published` message
![published](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7lzv4mliwfo0tlskokxz.JPG)
 
Go back to your repo on GitHub and reload 🌐.
Check the branches and find the gh-pages that housed the static files we dumped in the *dist* folder earlier.
![gh page branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cguexi14iqmxdp58xyht.JPG)

Go to settings and scroll down to the GitHub  pages section
![click 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mogqyl7p34b4hbnglose.JPG)
Click on the above link and you will be redirected to the new page dedicated to gh-page.
![click 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bel1l7nn5juxyhlwly2r.JPG)
 
Click on the URL link and boom! you see your website.
![hello world](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fod5pn011nbs57kya7su.JPG)

GH-pages can also be used to deploy React ⚛️ apps. I will write a post on it soon.🕒

I hope this post is helpful. Thanks for reading

![telly tubbies](https://media.giphy.com/media/mVJ5xyiYkC3Vm/giphy.gif)