How To Push Code From Visual Studio Code To GitHub

Pushing code to GitHub means moving your code files from a local repository to a remote repository, i.e., GitHub. This article shows you how to push code from Visual Studio Code to GitHub.

Prerequisites

1. Git

Firstly, you need to have Git installed on your system. Git will give us the underlying technology which powers GitHub. Go to git-scm.com/downloads and choose the download for your operating system. Then, install it with default settings.

Download Git
Head over to git-scm.com/downloads and download Git.

GitHub Account

Secondly, make sure to have an account on GitHub. Go to github.com, and sign in to your account.

Github Website
Log in to your GitHub account.

How To Push Code From Visual Studio Code To GitHub?

Step 1: Create A GitHub Repository

  1. Log in to your GitHub account.
  2. Click on the + icon on the top-right to create a new repository.

    New Repository
    Click on the New Repository option from the “+” icon.
  3. Enter a repository name and click on the Create repository button.

    Repository Details
    Give a name to the repository and then click on the Create repository button.
  4. Once your repository is created, copy the web URL. This URL allows us to push code to this repository from VS Code.

    Repository URL
    Copy the Repository URL.

Step 2: Open An Existing Project With VS Code

  1. From the “Explorers” tab in the sidebar, click on the Open Folder button.

    Open Folder
    Click on the Open Folder button from the sidebar.
  2. Open the folder from your preferred directory.

    Folder Directory
    Open the folder from your preferred directory.
  3. Once the folder is opened, you’ll see all the source files.

    Project
    Source Files inside the folder.

Note: Make sure that all the code files are in one folder, as you’ll have to push your folder to GitHub.

Step 3: Commit The Code Files

  1. Click on the Initialize Repository button from the “Source Control” tab in the sidebar.

    Initialize Repository
    From the Source Control tab, select the Initialize Repository button.
  2. Now, under the Source Control panel, enter any commit message. I’m going to type “First Commit.” Then, click on the icon next to Source Control heading or press Ctrl + Enter.

    Commit Message
    Type any commit message and press Ctrl + Enter.
  3. When prompted with a pop-up as shown in the image below, choose Yes.

    Staged Changes
    Click on the Yes button.

Step 4: Push Code From Visual Studio Code To GitHub

  1. Inside the Source Control panel, click on the Overflow button with the ellipsis icon. Then, from the Pull, Push menu option, select Push to.
    Push To
    Click on the three-dot (ellipsis) icon. Select Pull, Push option from the list of options and then select Push to option.
  2. On the right corner, you will be prompted to add a remote. Click on Add Remote button.

    Add Remote
    Click on the Add Remote button.
  3. Next, on the top-center, a palette will appear. Paste the copied GitHub repository URL and press Enter.

    GitHub Repository URL
    Paste the GitHub Repository URL that we copied from GitHub.
  4. Then, type any remote name and press Enter.

    Remote Name
    Give any name to the remote.
  5. Open the Push to sub-menu option again. Then, choose your repository path and press Enter.

    Choose Remote
    Choose the option according to the GitHub URL or the remote name.
  6. A pop-up will appear to log in to GitHub. Choose which option you’ll use to sign – I’m using my browser.

    SignIn Page
    Select the Sign on with your browser button.
  7. An authorization page will pop up in the browser. Click on the GitCredentialManager button.

    Authorize Git Credential Manager
    Click on the Authorize GitCredentialManager button.
  8. Enter the GitHub password.

    Password
    Enter your password.
  9. Finally, refresh your GitHub repository URL.

    Pushed Codes
    The source files have been uploaded to the GitHub repository.

You will notice that the codes are successfully pushed to GitHub from your local repository.

Was this article helpful?

Leave a Comment