GitHub-pages-deploy

What is this repository(repo)?

• This is a quick start guide to deploy a website through GitHub Pages using npm commands.
• There are different ways to deploy, but this is the way that has worked for me mutiple times over.

Table of Contents

1. Packages & Installations
2. File Structure
3. Deploying Step-by-Step
4. Updates & Other Important Notes

---

1. Packages & Installations

List & Links:

• Visual Studio Code (or your preferred text editor.)
• Node.js
• npm (command below, run once Node.js is installed)

npm install -g npm

---

2. File Structure

The file structure is very important when deploying a site to GitHub Pages. Follow the exact structure above in this repo or play the video below to learn how to set up the folders & files.

---

3. Deploying Step-by-Step

Once everything needed is installed, and your file structure is correct, run these commands:

(Make sure you do them in the order given below.)

npm init -y
npm i gh-pages

• After the above commands are ran, two .json files will be created.
  
• Open the one with the name "package.json."
  
• Then, in the scripts, change:
  "test": "echo \"Error: no test specified\" && exit 1"
  to
  "deploy": "gh-pages -d dist"

The next step is to run these git commands:
(A note to change the "username" & "reponame" to match your own in the origin link.)

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/"username"/"reponame"/
git push -u origin main

We can now go live by using the deploy script in the .json file using the following command:

npm run deploy

• Your website should now be live through GitHub Pages! (if not then see below)
• If you want to update changes to your website, make those changes and then run npm run deploy.

---

4. Updates & Other Important Notes

This is where I will explain how to updated gh-pages site once it is deployed. In addition, I will cover any possible problems and solutions that may arise through this process.

• Why do my images/videos/etc look like now once I have deployed the site?

---

Repo by Thomas Cavalcante, May, 2022.