Using Git & GitHub in VSCode: Stage, Commit, and Push

in this video we're going to cover using git and GitHub in vs code specifically we're going to look at why we use git and GitHub and what the differences between them are then we're going to initialize a git repository publish it to GitHub and after that we're going to look at the most important git commands such as ADD commit and push and pull so why do we actually use git git allows us to track the changes that we make to our code in order for us to be able to revert back to older versions if there's ever a problem in addition when we work with teams and many people collaborate on one large code base git helps us manage the changes that are made it's important to know that git and GitHub are not the same thing but many people get them confused so on the one side we have git which is a version control system that allows us to track changes that we make to code and on the other side we have GitHub which as the name already suggests is a hub for git repositories so in other words a space where we can store our git repositories to get started with Git the first thing we can do is we can check whether we have git installed properly so we need to go on view then open up a new terminal and in the terminal we're going to make sure that we have Powershell open and we're going to write git followed by two hyphens and version and that is going to give us the version number of git that is currently installed and if we want to know where git is installed we can write where dot exe and followed by git and that is going to give us the path to the executable file of git now if this has not worked for you then I'm going to be leaving a link down in the description below to an article I wrote where I go through how to install it step by step but now let's move on to initializing a git repository so over here you can see that I have a folder which is called git and it is entirely empty now we're going to add this folder into vs code by going on open folder and then going on to the folder that I just had open which is this git folder right here so I'm going to click on ADD and you'll see that I have in my Untitled workspaces a new folder called git now if I go ahead and click on Source control I have two options the first option is to initialize a repository basically we're setting up the repository to be used with Git Version Control and the second option I have is to not only initialize the repository but also publish it to GitHub we're going to keep things simple and start off by initializing the repository when I click that you will see that this drop down from the top opens up and we can select the folder that I showed you a moment ago let's go ahead and do that and after a second of loading you'll see that the user interface has changed because now we have Source control over here with the option to publish the branch to GitHub in addition to that I want to point out that if you go back to the Explorer so onto the two paper type icons over here then you can click on the get folder and you'll see that over here it's still empty but if we open it up in the file explorer then you will see that there is a folder inside which is hidden and it is called git and that is exactly what has changed after we have initialized the folder to work with Version Control specifically with GitHub so now that we have initialized the folder with Version Control let's go ahead and make use of it we're going to right click on the folder and click on new file and then we can create a new file called test.pi so an empty python file on the left hand side you can already see that the source control has sparked up because we have this little one which now tells us that we have one pending change specifically the fact that we have created one file means that we have one new change and we can go ahead and revert this change and delete the file Again by clicking on this small discard changes icon let's go ahead and just do that and over here virtual studio is giving me a warning telling me that's irreversible and so on but let's go ahead and simply delete the file and if we go back to our Explorer you can see that now there is no more file in the git folder because we have not committed this change into the git Repository and by committing I simply mean saved permanently so we haven't done that let's go ahead and do that now so I'm going to right click on the get folder again and then go ahead and click on new file and we're going to call it test dot Pi again and I'm going to write one line of code in here something like print and then in Brackets I'm going to write the word hello and world now I'm going to save it by clicking Ctrl and S and then in the source control you can see that we have one pending change and it is the change that I made just a moment ago which you can see on the right hand side because we have this red highlighted line which is empty and the green highlighted line showing me the change that I just made now we need to commit this change to save it permanently so we always need to add a message to all the commits that we make so that we can remember what they were made for so let's simply write something along the lines of new file created and once we write that we can go ahead and press on Commit now this change that I've made has been permanently saved the next thing that I want to do is to publish this Branch to some remote location which is going to be GitHub in order to publish the file that we created to GitHub we can go ahead and click on publish Branch now virtual Studio gives us a message telling us that the extension GitHub wants to sign in using GitHub and we need to allow that and after that you'll get this window pop up with GitHub in the browser window and over here we now need to authorize that virtual Studio code connects with our GitHub account so I am assuming that you have a GitHub account and if you don't you can set one up it's quite simple so I'm going to press on authorize virtual Visual Studio code next I get the small window in the browser that says open Visual Studio code which we can go ahead and press now we get another small window asking allow an extension to open this URI and we want to click on open so now once we have done that you will see that we are successfully connected with our GitHub account and to check this you can always go to the left hand side and click on accounts and you should see that the very topmost entry should be a GitHub account and that is the case with me over here you can see that my GitHub account code with Max has an entry so that tells us that we're signed in correctly and at the very top of the window you will also see that we have this drop down and it tells us that we can now publish this folder that we've created to GitHub so let's go ahead and publish this repository as a private repository to GitHub and once we do that it takes just a moment of time and we get one more login screen that we need to navigate through by entering our username and password and then clicking on log in in the bottom right hand corner we can now also see that this process of publishing our project to GitHub was successful because it says that it successfully published the project and we can open it on GitHub so let's click on the button open on GitHub and then you will see that when GitHub is loaded we have the folder git and within it we have the test.pi file so let's go ahead and click on the test.pi file and now I'm going to drag this window to the right hand side and I'm going to open the editor with my test.pi file saved onto my computer on the left hand side so in the test.pi file we are now going to make a change at the moment you can see it says print hello world and we're going to now change the hello to a buy and click save when we do that you can see in the Version Control we have one pending change and we can give this change a message which is simply going to be something like change changed hello to buy and then we can go ahead and press on Commit now since we have deployed this project to GitHub we still need to make sure that after committing this change and saving it permanently in the to our local file we also need to make sure that it's changed within the remote file at GitHub so we need to sync these changes and that means we're going to push the changes that we've made from our local copy to the remote copy in the cloud at GitHub so we're going to press on OK in this window and after one moment you should see that after the loading sign is finished we can go ahead and click on the link and refresh it and once I refresh the GitHub window you can see that now it says print buy world so it reflects the change that I just made let us now briefly assume that we are collaborating on a project with someone else and someone else makes a change to this file on GitHub so we can go ahead and edit this file and let's say the change that this person made was he added a comment above the print statement saying this is a print statement and then we're going to go ahead and commit these changes in GitHub and we always need to add a commit message we're simply going to leave it with the default message update test and commit the changes so now we have made changes remotely on GitHub that aren't reflected locally on our version in vs code so to get these changes that have been made remotely onto our GitHub we simply need to click on this small synchronized changes icon in the bottom left hand corner so when I click that you will see this action will pull and push commits from and to origin we're simply going to click on OK and once we do that we can see that the changes that have been made remotely on GitHub are now also reflected locally in our vs code so you can see the comment this is a print statement has been added to our editor the next concept that I want you to understand is the concept of staging staging basically allows us to choose from all the changes that we make the ones which we want to commit and save permanently and after we have permanently saved the changes by committing them we can then go ahead and push them to the remote location which is usually GitHub to demonstrate the concept of staging let's go back to our git folder and create a new file which is called Test 2 dot pi now after adding this new file I'm going to make a second change which is in the test.pi file I'm going to add another print statement which says buy world again so I'm simply going to copy and paste this line so now if I go to the Version Control you can see that there are a total of two changes that we have which we can commit if we wanted to but we don't want that let's go ahead and add one of the changes which we made which is create the new file test too and let's go ahead and add it to the staging area so we click on the small plus icon and then you can see that this new ribbon has been created which says stage changes it's above the changes and over here you can see that the test2.pi is staged and the test.pi file where I added the second print statement is not changed now I'm going to add a message which is simply going to be anything I'm just going to call it test and then I'm going to commit this change now what you will see is that we have made this change and saved it permanently now the next thing we need to do is to push this change to the remote so we can go ahead and click on push in the bottom left hand corner by clicking on these two circular arrows and then you will see that this action will pull and push commits and we're going to click on Ok We're going to wait for just a moment and after it has loaded I'm going to open up GitHub again and you will see that the folder which we created a moment ago has been added to the git file you can see over here it says Test 2 which is exactly the folder that I just created however the second change that I made earlier which was add the second print statement by a world has not been added to the remote location because we have not staged the change before committing so if I go to the test.pi file you'll see that it is still the old version that doesn't have the second print statement alright so we're going to leave it here for this video in the next one we're going to go deeper into the concept of branches if this video helped you out then make sure to leave it a like a comment and subscribe to the channel and we'll see each other in the next video

Channel: Max on Tech

Views: 12,682

Keywords: VSCode, GitHub, Git, Version Control, GitHub Basics

Id: z5jZ9lrSpqk

Length: 14min 51sec (891 seconds)

Published: Fri Aug 04 2023