What will be discussed:
- File navigation using the CLI (Command Line Interface)
- Steps on how to push (upload) your project in Github
- How to check if deployment was successful
What will not be discussed:
- The purpose of each git command
- How to change authentication credentials
- How to resolve deployment errors
Helpful Links to improve your FCB Portfolio:
- w3schools.com (Guide to HTML attributes)
- hackerthemes.com (Bootstrap 4 cheatsheet)
- coolors.co (Color palette generator)
- Dribbble.com (For mock-ups/inspirations)
File navigation using the CLI (Command Line Interface)
Open Git Bash (Windows) / Terminal (Linux / Mac)
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.34.13 PM.png)
Go inside the Documents folder using the cd Documents command
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.34.47 PM-1024x187.png)
Inside the Documents folder, run the ls command to check if your project folder is inside
your current working directory.
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.35.21 PM-1024x312.png)
Go inside your project folder. The name of my project folder is fcbportfolio. I will go inside
the folder by executing the command, cd fcbportfolio. Check your project folder name and
execute the same command but change the fcbportfolio to your project’s folder name.
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.35.55 PM-1024x467.png)
Steps on how to push (upload) your project in Github
Inside the fcbportfolio folder, run the git init command. This will initialize Git to our project
folder.
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.37.04 PM-1024x193.png)
Next, run the git status command. It will return all the files and folders with untracked
changes
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.37.32 PM-1024x421.png)
Next, let’s tell git to track these changes by executing the command git add -A. Running the
git status command again will show that the files and folders are now in green. This
means that git recognizes the changes in the said files/folders. If there are still files in red,
execute the git add -A command again.
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.39.39 PM-1024x461.png)
Running the git commit -m “v1.0 fcb portfolio” command to finalize the changes and
creates a new version of your project. Running the git status command again will show
that Git was able to track all the changes inside the current folder.
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.40.44 PM-1024x345.png)
Do not close your Terminal. Go to Github(https://www.github.com) and Login using your registered email.
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.41.30 PM-1024x512.png)
Once logged in, click on the New Repository button or the Start a Project button
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.43.43 PM-1024x357.png)
Name your project/repository as fcbportfolio. Leave the Permission to Public and click on
Create Repository.
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.45.35 PM-1024x952.png)
Copy the HTTPS URL of your new project
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.47.36 PM-1024x441.png)
Go back to the Terminal and run the command git remote add github <paste the HTTPS URL from your Github repository>
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.49.12 PM-1024x205.png)
Upload the changes by executing the git push github master command
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.49.41 PM-1024x355.png)
As of Aug 13, 2021, Github changed its authentication when using git.
To be able to supplement this, we have to create a personal access token to use instead of
a password:
Go back to your Github profile and go to your settings:
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.52.06 PM-1024x481.png)
Then, in your settings, in the left pane, scroll down and select developer settings:
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.52.33 PM-1024x517.png)
Then, in the developer settings, on the left pane, select Personal Access Tokens
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.52.59 PM-1024x294.png)
Then, generate a new personal access token
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.53.26 PM-1024x292.png)
Then, add the note and expiration date for your personal access token:
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.53.48 PM-1024x477.png)
Add the following scopes for your personal access token:
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.54.14 PM-1024x822.png)
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.54.31 PM-1024x712.png)
Then, generate your token:
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.55.01 PM-1024x405.png)
Once generated, you may now use your personal access token instead of your password when pushing updates into github:
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.55.26 PM-1024x374.png)
How to check if deployment was successful
Go back to your fcbportfolio repository in Github and refresh the page. You should see the newly uploaded files and folders.
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.56.43 PM-1024x511.png)
Go to your project’s Settings -> Pages
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.57.13 PM-1024x747.png)
Click on Source and change it from None to the master branch
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.57.44 PM-1024x964.png)
Click on Save. The URL of your live website will appear below the Github Pages header. Enjoy!
![](https://blog.zuitt.co/wp-content/uploads/2024/07/Screenshot-2024-07-11-at-2.58.22 PM-1024x558.png)
This is the Zuitt Guide on How to Deploy the Free Coding Bootcamp Portfolio. This blog post is intended for Zuitt’s FCB: Basic Web Development Workshop participants only.
If you’ve stumbled upon this blog post and aren’t a bootcamper, you can begin your bootcamp journey with Zuitt by clicking this link: