How to Push to Github from VScode - For Windows

Introduction

GitHub is a cloud hosting platform for software development and version control. GitHub facilitates collaborative programming by making repositories accessible online.

To begin, it's important to distinguish between Git and Github.
Git is a powerful version control system that allows developers to track and save changes in their codebase locally. Git allows for offline work and provides a backup in case of server failure.
With Git, developers can push their changes to a remote repository, such as GitHub, enabling them to collaborate and work together seamlessly.
Git provides features like commit history, diffing, and reverting changes, which make it easy to manage and maintain code over time.

On the other hand, GitHub is an cloud-based Git repository that allows users to store, manage, track, and collaborate on software projects.
GitHub makes it easier for individuals and teams to use Git for version control. GitHub offers a range of features and tools to support software development.

This article will guide you on how to set up your coding environment to push your code from VScode to GitHub. You will use the GitHub SSH keys to establish a connection, making the process more secure. This article provides a comprehensive guide that is easy to follow.

Goals

• Setting up the SSH keys
• Pushing to Github

Prerequisites

• Git Bash - Standalone Installer
• Github account
• Visual Studio Code

Getting started

Open Git bash and configure the credentials to match your Github account details.

Run the following commands one after the other:

git config  --global  user.name  "username" 
git config  --global  user.email  "[e-mail]" 

To confirm that you have entered the correct details, run this command:

git config -l 

Getting the SSH Keys

SSH stands for Secure Shell. The SSH protocol allows you to connect and authenticate to remote servers and services securely. By using SSH keys, you can easily connect to your GitHub account without providing your credentials each time you visit. GitHub SSH enables you to securely access and write data to specific repositories.

Moving on, to obtain the SSH keys, you will need a Key Fingerprint first. Follow these simple steps to generate one:

• Open Git bash
• Run the command below:

 ssh-keygen -t ed25519 -C "[e-mail]"

• Press Enter when asked: "Enter a file in which to save the key". It will store the key in the default location. Although you can specify a file if you wish to.
• When prompted to enter a passphrase, type in your chosen passphrase and then press Enter.

Don't worry if your inputs are not visible. It's a security feature to prevent shoulder surfing. Carefully enter a passphrase and store it safely for future use.

• To proceed, re-enter your passphrase and click the Enter button to complete the process.

At this point, you should have a Key fingerprint.

Generating the SSH Key

• Run the following commands one after the other:

 eval "$(ssh-agent -s)"
 ssh-add ~/.ssh/id_ed25519

• Enter the passphrase you created in the last sub-section.

• Navigate to the location where the identity was added on your PC.

• Drag and drop the id_ed25519.pub file into your VScode to reveal the SSH Key.

Adding the new SSH Key

• Navigate to the Add new SSH Key page on your GitHub account and paste your new SSH key in the key field.

Pushing to Github

After successfully setting up SSH, follow these simple steps to push a mock project to Github.

Below is a visual illustration of the mock project.
It is bland html file and a js file that logs ('I just pushed to GitHub') to the console.

• First, open your terminal and select bash as your default profile by clicking on the dropdown icon.

• Return to your Github account, and navigate to the create repository section.
• Enter a repository name of your choice
• You can skip the description
• Ignore the other checkboxes and click create repository

Return to your VScode terminal and enter the following commands:

git init

git add .

git commit -m [Enter your message of choice here]

git remote add origin https://github.com/backendbro/mock_project.git

Copy the line above from your repository dashboard, as yours will be different

git branch -M main

git push -u origin main

Select the "Sign in with your browser" option when prompted by the Git Credential Manager. Then, wait patiently for a browser window to open so you can complete the process.

Once the authentication and authorization process was completed, the mock project was pushed to GitHub.

Voila! We successfully pushed our project from VScode to GitHub.

Conclusion

You have successfully set up your SSH Keys, and pushed a mock project to GitHub from VScode. Now, pushing your projects to GitHub will be a breeze as you have been authenticated and authorized.
I hope that with this newfound knowledge, you can showcase your incredible project to the world.
Happy coding!

Resources

• Mock Project
• Github
• VScode