This is part 2 of the setting up Visual Studio Code to work with GitHub. If you need to go back to the last step just click here.
Before we can clone the repo we created on GitHub then we will need to get the URL. To do this if you head back to GitHub and navigate back to your repo. Next click on the blue Code button and copy the URL to your clipboard. It will start https://github.com/ and is unique to your repo.
Setting up your repo
So lets fire up Visual Studio Code (you can either find it on the start menu or load up a terminal and just enter “code .“.
Our first step is to clone the new repo we created. First you will need to toggle the control pallet. If you are on Windows you can simply press F1. You can also find it from the View menu. The command pallet allows you to enter various commands to carry out actions in Visual Studio Code. Once you have the console open then if you start typing in Git: Clone once it comes up you can select it.
Next paste your copied URL into the textbox and press enter. You will then be asked to select a folder to clone into. Once you have chosen a directory then the repository with clone. Once the clone is complete you will be prompted to open the repo (a dialogue will show at the bottom right).
You will now be open in your repo’s main directory. Looking to the left you will notice your READEME.md file should be present. Go ahead on click on it and then you should see what has been automatically generated. You have now cloned your repo and can get to work, let’s try making a change now.
Let’s make a change
Let’s create a simple text file, it is nice and simple in Visual Studio Code, just right click in EXPLORER and select New File… give your file a name with a .txt extension. Pop some text in “Hello world!” maybe? and make sure you save the file.
Next we will want to get the file pushed to the remote repo and Visual Studio Code makes it nice and simple. Firstly click on the source control icon, this will then show you the list of changes you have locally.
Enter a message/comment inside the textbox at the top. When committing changes it is always important to add a note to remind yourself and let others know what you have been working on. You should keep it short and concise. The trick with source control is to commit your changes often and in small chunks.
Next we will need to stage the changes. Staging is when you will decide what changes you would like to commit prior to committing them. It also means that your commit will be tested before you um… commit to it 😉.
You can either click the plus icon next to each file, or if you know you want all of them then you can just click the plus which will who up when you mouse over Changes.
You will now notice the file(s) appear under Stages Changes.
Now we are ready to commit the changes, just click on the blue commit button and off they go?
And off it goes…
Well that’s partly true, they are now committed but they haven’t made it to GitHub yet. The very final step is to sync your changes with your remote repository. You can simply click on the Sync Changes button and they will be pushed up. Once they have gone you have now successfully pushed your first changes up to GitHub. Hopefully that weren’t too painful.
If you now head back to GitHub and navigate to your repo then you will be able to see the file you added has been uploaded.
Leave a Reply