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
  • Run npm init -y to initiate your package.json file. This builds a package.json file.
    carbon (19)

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

    21

    This website collects cookies to deliver better user experience

    Deploy Static sites using GH-pages