An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
Some of Our Sources
- Engadget
- Team Treehouse
- Six Revisions
- Vandelay Design
- Creative Curio
- Web Designer Depot
- Reencoded
- 24 Ways
- Specky Boy
- Android Headlines
Help Webnuz
Referal links:
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.
Prerequisite
NodeJS (Installed on your PC)
GitHub account
IDE (Visual Studio Code)
Follow the package installation instructions below
Run
npm init -yto initiate your package.json file. This builds a package.json file.
npm install gh-pages to install GH pages
Create a 'dist' folder and create all files you want to deploy inside like index.html, styles.css, main.js, and so on.
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.
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 
We create a repository on GitHub
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 masterGo back to Github and refresh you should have something like this.
Now to deploy to the gh-pages run this on your terminal.
If successful you will see a published message
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.
Go to settings and scroll down to the GitHub pages section
Click on the above link and you will be redirected to the new page dedicated to gh-page.
Click on the URL link and boom! you see your website.
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
Original Link: https://dev.to/drsimplegraffiti/deploy-static-sites-using-gh-pages-32nf
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To