DEV Community

Cover image for Deploy Static sites using GH-pages
Abayomi Ogunnusi
Abayomi Ogunnusi

Posted on • Updated on

Deploy Static sites using GH-pages

## 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

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)

  2. npm install gh-pages to install GH pages
    carbon (20)

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

For demonstration, I will write Hello World! in my HTML biolerplate.

<!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>
Enter fullscreen mode Exit fullscreen mode

Next, we need to edit out package.json file.
Inside your package.json add a key-value pair as below.
carbon (25)

β†ͺ️ 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

πŸ“Œ We create a repository on GitHub
new repo

πŸ“Œ 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
Enter fullscreen mode Exit fullscreen mode

Go back to Github and refresh you should have something like this.
gh

πŸ“Œ Now to deploy to the gh-pages run this on your terminal.
carbon (26)

If successful you will see a published message
published

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

Go to settings and scroll down to the GitHub pages section
click 1
Click on the above link and you will be redirected to the new page dedicated to gh-page.
click 2

Click on the URL link and boom! you see your website.
hello world

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

Top comments (5)

Collapse
 
wickathou profile image
Javier Hernandez

Brief and great! Thank you!

Collapse
 
drsimplegraffiti profile image
Abayomi Ogunnusi

Glad you found it useful @wickathou

Collapse
 
waylonwalker profile image
Waylon Walker

GitHub pages is a solid host. I recently saw it had one of the fastest ttfb's on ismyhostfastyet.com/

Collapse
 
drsimplegraffiti profile image
Abayomi Ogunnusi

@waylonwalker Thanks for the insight

Collapse
 
oscarriosalvar2 profile image
Oscar Rios Alvarado

dude i just want to tell you that i love you, you need to know it