CodeNewbie Community 🌱

Cover image for Coding my portfolio: Creating a repo & pushing the files to GitHub
McKenna Bramble
McKenna Bramble

Posted on

Coding my portfolio: Creating a repo & pushing the files to GitHub

✨ Hello! ✨

In this series, I am documenting the process of building my portfolio website. Thank you for reading!

🐙 Git & GitHub

After setting up website files, it is SUPER important to put it under version control. Version control is the process of tracking changes to your project code. Most of the folks reading this will probably already have some familiarity with Git and Github, but if you do not, these are both tools used in version control. Git is a version control system that you download in order to track changes to your files locally. I use Git Bash, which is an application specifically for Microsoft Windows. Git Bash downloads Git as well as a terminal (Bash) in which you can enter commands that tell your computer what to do with your files. Below is a screenshot of my Git Bash terminal:

A screenshot of an empty Git Bash terminal

Once you put your files under version control (which I'll go over in a second), you can then push those files and any changes to them to a GitHub repository. GitHub is a website that hosts the files that you put under version control using Git. A repository ("repo" for short) is a folder on GitHub that holds all of your code. GitHub allows you to access the complete version history of your project, work collaboratively, and much more. It makes your code accessible to the world 🌏!

📁 Putting files under version control using Git Bash

Here are the steps I took to put my portfolio files under version control.

1. 📂 Open your project folder in Git Bash

I opened Git Bash and used the cd command to navigate to my project folder:

a screenshot of a git bash terminal

If you don't want to type out the file path, you can also just open your file explorer, right-click on the project folder, and select "Git Bash here." This is usually what I do because who has time. Keep in mind, this is specifically for Windows users.

a screenshot of right-clicking on a project folder and selecting "Git Bash here" from the options

2. 🗂️ Put your files under version control

I used the following commands to put my project files under version control:
git init turns the folder that your are inside of into a new Git repo.
git status (optional) will then show you all of the untracked files within your new repo.
git add -A adds ALL of your untracked files to the staging area. When you add files to the staging area, you are telling Git that you want to include any changes to those files in the next commit.
git status (optional) will now show you that your files are ready to be committed.
git commit -m "Initial commit" commits those changes to the staging area along with the message "Initial commit."

a screenshot of the Git Bash terminal

a screenshot of the Git Bash terminal

a screenshot of the Git Bash terminal

a screenshot of the Git Bash terminal

🌐 Pushing a repo to GitHub

Now all of my project files are under version control. However, this is only locally. The following steps go over how to create a repo in GitHub and push your local files to the GitHub repo.

1. 📂 Create a new repository in GitHub

First, log onto your GitHub profile, click on the "Repositories" tab, and then click on the green "New" button.

a screenshot of the "repositories" tab on github

Add a name for the repo; I usually just name it the same as my project folder name.

a screenshot of the "Create a new repository" section

Then, scroll down and click the green "Create repository" button. There is no need to change any of the settings.

After hitting the "Create repository," a "Quick setup" page will load. Make sure the SSH button at the top of the page is selected, then copy the commands under the "...or push an existing repository from the command line" section.

Image description

2. 🗂️ Paste commands into Git Bash to create the GitHub repo!

Once you have copied the commands, navigate to your project folder in Git Bash and paste the commands into the terminal.

Image description

Go back to GitHub, hit refresh, and you will see your new remote repo!

🔗 Links for additional reading

The Difference Between Git, GitHub, and Git Bash by Saivon S

What is Git? A Beginner's Guide to Git Version Control by Anna Skoulikari

🥳 Up Next

Now that my portfolio files are set up locally and remotely, I will be getting into the coding portion of building my portfolio. I am going to first focus on coding the navigation for the mobile and tablet version. I will be building a hamburger menu, which will be the next blog's focus.

Thank you for reading!

Oldest comments (0)