Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for How to Push to Github from VScode - For Windows
Ukagha Nzubechukwu
Ukagha Nzubechukwu

Posted on • Edited on

     

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 betweenGit andGithub.
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

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  "your_email@email.com"
Enter fullscreen modeExit fullscreen mode

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

git config -l
Enter fullscreen modeExit fullscreen mode

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 "your_email@email.com"
Enter fullscreen modeExit fullscreen mode
  • PressEnter 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 apassphrase, type in your chosen passphrase and then pressEnter.

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 theEnter 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 fullscreen modeExit fullscreen mode
  • Enter the passphrase you created in the last sub-section.

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

Identity-location

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

SSH-KEY

Adding the new SSH Key

  • Navigate to theAdd new SSH Key page on your GitHub account and paste your new SSH key in thekey 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.

project-illustration

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

Toggle-terminal

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

create_repo

Return to your VScode terminal and enter the following commands:

git init
git-init

git add .

git-add

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

Image description

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-remote-origin

git branch -M main

git-branch

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.

Git-credential-manager-pop-up

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

git-push

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

deployed-project

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

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Passionate about everything Javascript, Node.js, Typescript, Open Source, DS, and, System Design.
  • Education
    University of Benin
  • Joined

Trending onDEV CommunityHot

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp