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)
Go inside the Documents folder using the cd Documents command
Inside the Documents folder, run the ls command to check if your project folder is inside
your current working directory.
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.
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.
Next, run the git status command. It will return all the files and folders with untracked
changes
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.
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.
Do not close your Terminal. Go to Github(https://www.github.com) and Login using your registered email.
Once logged in, click on the New Repository button or the Start a Project button
Name your project/repository as fcbportfolio. Leave the Permission to Public and click on
Create Repository.
Copy the HTTPS URL of your new project
Go back to the Terminal and run the command git remote add github <paste the HTTPS URL from your Github repository>
Upload the changes by executing the git push github master command
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:
Then, in your settings, in the left pane, scroll down and select developer settings:
Then, in the developer settings, on the left pane, select Personal Access Tokens
Then, generate a new personal access token
Then, add the note and expiration date for your personal access token:
Add the following scopes for your personal access token:
Then, generate your token:
Once generated, you may now use your personal access token instead of your password when pushing updates into github:
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.
Go to your project’s Settings -> Pages
Click on Source and change it from None to the master branch
Click on Save. The URL of your live website will appear below the Github Pages header. Enjoy!
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:
