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.
- Packages & Installations
- File Structure
- Deploying Step-by-Step
- Updates & Other Important Notes
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
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.
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.
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.