How to push code from VS Code to GitHub
Tags: github, vscode, git
Published: 2024-05-24 14:25:26

 ![How to push code from VS Code to GitHub](https://www.techielass.com/content/images/2024/04/How-to-push-code-from-VS-Code-to-GitHub.png)

Are you ready to take your coding journey to the next level by sharing your projects on GitHub? Whether you're just starting out or already familiar with coding, understanding how to push your [<u>Visual Studio Code</u>](https://www.techielass.com/tag/vs-code/) (VS Code) project to [<u>GitHub</u>](https://www.techielass.com/tag/github/) is a fundamental skill for any developer. In this beginner-friendly tutorial, we'll walk you through the process step by step.

## Prerequisites

Before we dive in, ensure that you have Visual Studio Code and [<u>Git</u>](https://www.techielass.com/installing-git/) installed on your machine. Additionally, you'll need to have a GitHub account set up. If you haven't already done so, head over to [<u>GitHub.com</u>](http://github.com/?ref=techielass.com) and create an account—it's free and only takes a few moments.

## Step 1: Prepare Your Project

Open up your VS Code editor and ensure that your project is ready to go. For this tutorial, I am going to be using a small project that has an HTML file, CSS file and readme file in it.  This is what I want to commit to a GitHub repository.  

![How to push code from VS Code to GitHub](https://lh7-us.googleusercontent.com/OcQxU1PK3vz7JaWD2f1aV_Ft_E0LNzSbiwVUFVw8g-sc0TBrbrOdy_i5bxgSsETXmeOEMH6hQfNGkFpNFEcOYWnj-3X74cPau-3eeyyGIWNKMFo9o_DP6_vPeyuWXM42nv1a3ctARxh879NvxGyoVrM)
_VS Code editor_

## Step 2: Initialise Your Repository

Navigate to the source control view in Visual Studio Code. You can do this by clicking on the icon on the left-hand side or by pressing Ctrl + Shift + G. 

![How to push code from VS Code to GitHub](https://lh7-us.googleusercontent.com/24vvVSN6ck9AKpigx3FVNFhlFsVVJqhVtKoEwI_bH2iKV0rPIYi6z16l9HEJkw_a-I0KoIQ0nzIyL8_2xGvWMwAGOdO1FbF5-B8aH-i11IrV5A5ashID4InQa6jVHsQfhauKXgbHOkMhobs-I4PysJs)
_Initialise Git Repository in VS Code_

When prompted, click on the "Initialise repository" button. This action creates a new Git repository in the current folder, allowing you to start tracking code changes.

![How to push code from VS Code to GitHub](https://lh7-us.googleusercontent.com/Ot20ByJlHe1c96ibi_b1Gx85m1GIL9Jir3_2RCv2bB-Jnm2OLWua2EEOhqoS7yVoMZHhVZDLwhtGnai601LGqMbRp1rzFwdzKafuis2xgzfHKzuowbmAaSqmgsD74eW3y8kZnOWLr2Kb77bF1uCMiMk)
_Initialise Git Repository in VS Code_

## Step 3: Commit Your Changes

The source control view will now list any changes you've made to your project. Select all the files you want to include in this commit and enter a descriptive commit message. Then, hit commit to save your changes.

![How to push code from VS Code to GitHub](https://lh7-us.googleusercontent.com/CyQxX8gDY0ogHOQWSIdGICU4hoq5FIkQyavWYD10xi8PXSYTBCi70IR0WBjwrBUMC9hHUrzdiy_kEm0kQBIs0GgjMPP5JmQo9Gbx9rHO1zCQN9QPkNbG0m-Am8Kf8-nEjMtOQnFQZ4U-dej5wKLcMoQ)
_Commit source code in VS Code_

## Step 4: Push to GitHub

Head over to GitHub.com in your browser and create a new repository. 

![How to push code from VS Code to GitHub](https://lh7-us.googleusercontent.com/KM39da3fYEamIBk_YjgvSCnG2_UkdQatGas-4OE8pT0RY2FtMbwlgm4GOegFwGN3FC3997mVZaHBiEXkguq8HrF_xaEzQO5v1cb_e-OTSjbB4IDZ9G4lYB-cW2dFfh4uXxOxbl9vqT-xRK3gn624hPI)
_Create GitHub repository_

Follow the wizard to set up your repository. 

![How to push code from VS Code to GitHub](https://lh7-us.googleusercontent.com/QaUiDM8rL5nRt1zE5mCDLwKV2-2xGxRENzP3H_RpPMUDXMWjb-6p6CrQ6U5yrwclMTUAEbnBghf1KdiCdHrmtGU6QxXw-Z76znfYQpq0ChNTrOUoCD88E7uwu5W_W5bO5z9MvO6Z-TN6QtLOVO4GWVo)
_Create GitHub repository_

Once created, copy the repository's URL from the quick setup section.

![How to push code from VS Code to GitHub](https://lh7-us.googleusercontent.com/CN-HTQgDSbK9WBdzFnzF8ipRGaTvtqiZX6tyg97x9DPXN5fNja3k1017VyiCZ0XnmPPhegXe7mHLvbedluLbIc2n1Kgf4nvffFjoqtvkXW5ozvSH4GaB5LitzHBAssMO5vCQiLVAF3g1iAY9xa33jeM)
_Copy GitHub url_

Switch back to your VS Code editor. Click on the ellipsis (...) in the source control view, select Pull/Push from the drop-down menu, and choose Push to. 

![How to push code from VS Code to GitHub](https://lh7-us.googleusercontent.com/dRpCJQdHKP_ddTKrOQkpRIhKv0Im9bVq3edwMmrTZ39IG0zzcE3NdrcjZwtyoHn-IgsFlrK-w9NoD6qX1I612qNLd7HzT3jt74eHCDKFlwmg2EB5UPvALXzsaoIEtXu-wfTNTrLTjh_NSowvXhBnLCs)
_Push code from VS Code to GitHub_

You will be prompted that the repository has no remotes to push to, click on the "add remote" button. 

![How to push code from VS Code to GitHub](https://lh7-us.googleusercontent.com/fkCaFvEznW1w99UD99qlQs4ksWw1GU_84KX6O4V8ytawwC3UgZPhGT8UQW80x82M0B0YaIzAuW2WplUq4IU--Nsd0rkqV2EJbYp8USsYMQkSGVmg9jt8_MhV3sUFvWaF-e3m57NZsZ-gwDFkqZpt380)
_Push code from VS Code to GitHub_

Paste the URL you copied from GitHub and give it a name. 

![How to push code from VS Code to GitHub](https://lh7-us.googleusercontent.com/yso1qUheSfxlinMvHQwHDAeqGimOj582Uo9ErHEf4K44KGp15I5pwCsLkKmXRFbwG1inZGqF3htp-Of9o3_k2i0IHBJhkR1KsDEBpoy9_zkKi-4vThqJIAEnz_GKizPsKW8vvJJ4p_UFMHIGZAk6Xbk)
_Push code from VS Code to GitHub_

VS Code will now display a button allowing you to push your code into GitHub. Click on the "Publish Branch" button to complete the process.

![How to push code from VS Code to GitHub](https://lh7-us.googleusercontent.com/dRlKKvLbNO_9JNT2AcCyhbB1whE_a1jI65Y2X9VD41GtnNLhe0KQ11VHaixARCt8cbHM5lAgANCA8gfQWTUHDlohOhlHSu-dQtumW9rpn2AN2SadGAGSXMIBXs0AWfyaWrbRYx0CEeQklseM6DwCmaQ)
_Push code from VS Code to GitHub_

## Step 5: Verify on GitHub

Your code is now pushed to GitHub! You can head over to your GitHub repository in the browser and refresh the page to see your code there.

![How to push code from VS Code to GitHub](https://lh7-us.googleusercontent.com/KITaB2OqchV3X1lw_lt0ELQ1LGz3P_-rOFkmWM9_o_tHyOGSNGcRBPTQvwe6bRFQCRJeMZdhnXjbS5QEzzfEnHLb1kgsXBS0-moNuR0Uj_NcXXdKjMguhBGfIUZqH_aCClonGr3Py4rMdHVpW60Kv9o)
_View code in GitHub_

Congratulations! You've successfully pushed your Visual Studio Code project to GitHub. From here, you can continue making changes to your code, committing them, and syncing them to GitHub. Remember, mastering this process is essential for collaborating with others and managing your code effectively. Happy coding!