How To Use Git & Github with VS Code for Beginners - Create Repositories & SSH Key Setup

[Music] hey guys it's Kodak I will come back today's tutorial I'm gonna cover get github and how to use it with Visual Studio source code and I'm gonna show you how to link things up through SSH key so this is gonna be a very good tutorial for beginners so yeah let's jump right into it alright guys so the first thing I'm gonna cover is to download get and you have to go to get - s CM com so just google that up go here and download it for your operating system I'm using a Mac right now I'm using a MacBook Pro so download that I'll already have this installed but we need this get version control right here alright so the next thing that you want to do after you install get is - we need we want to use terminal but I'm gonna use terminal within my Visual Studio code here I have Visual Studio code open and if I go into view and terminal C this is why I love vs code it has everything built in and after I do all this we're gonna use visual code studio codes who do some coding upload or code up to github but we first want to set up get in the environment and the keys I need to set up SSH keys so that I can recognize our github account so gonna step through that right now and here's another shortcut when you're in Visual Studio code when the terminal isn't open like that you can always press ctrl + B tilde button and c-terminal pops up okay so after you've installed get you just want to set up your user and your email very quickly in the config file and then we're gonna step through the next steps so you want to run this right here git config - - global you want to make this global overall and then username and you know coder and time so you'll want to run that to setup your username and we want to set this up because git is going to use this information every time we we do a push to our repository it's going to show our name and who made that that those changes or update and then the same thing you need to set up your email on this so git config - - global and user dot email and putting quotes just like that and if you want to check to see if you entered in your email correctly just do git config user - email and you see it shows me my the email that I entered in so those are the only two things we need to enter in and now let's move on to the next step alright so the next couple of commands that I'm gonna run here I'll have it in my description down below but I'll also upload it to get help for you to look at the commands but I'm gonna have to run some of these commands to generate a SSH key and right here I have SSH - keygen then it says space - t - RSA - B and I have this 4096 - uppercase C then I put in my email that I'm gonna use here and this email should be the email that you're using for your github account so right after I do all this I'm gonna step through how to set up the github account but this is the email that I'm using for my github account so I can link them together now press enter and see it generated a key value for me a public and private key value and it's asking me where to save this file now if you've never created a SSH key before you can just press Enter right here and it's going to create it as this file right here this is an existing file already it's a default file it's called ID underscore or as a but I'm actually going to save this file as another name and to do that you'll have to type in the full path so that I can save it correctly so you see this whole path here let's just copy this and paste it in here so I want to save it to users Kotick I this SSH folder because this is where it needs to reside in this dot SSH folder and now I'm going to call it ID or as a underscore colder tie and I already created this fall but here I'll create the number two key so you can see how it looks like and then press ENTER on that and then it's gonna ask for a passphrase so you don't have to enter in one if you don't want to but if you do you just type anything you want I'm just gonna leave it empty it's going to ask again all right so now the next command I'm gonna run is this eval command right here it's gonna run this SSH agent because I need this thing running for the next command to execute and one thing with this is when you do a copy and paste sometimes it pastes in the wrong double quotes so make sure you fix that and now I'm gonna run this command and once again all of these commands are gonna be in the description and all my github so you can just copy and paste so we're gonna run that and now it's gonna say that this agent is now running so we needed that and then the next command we need to add our key so we're gonna say SSH - add - uppercase K and then we're going to the folder where our key is so this is where my key is and this is the private key is not the public key is the private key here that I'm copying so I'm gonna run this it's gonna add the key for us alright so the next command what I want to do is I need to copy or public key here see this dot Pub key I need to copy that into our clipboard so I can use that key and paste it into our github account so that it can recognize or SSH keys and this is the very last command so after I run this is gonna copy it into a clipboard and you can see that it copied it if I paste it here see the key is all in there alright so to recap what we did is we generated a private key and a public key we added that private key to our keychain that's on our macbook here it's the ssh agent and then all i did was copy to our clipboard the public key and I'm taking that public heat and sharing it with our github account so that they can communicate then anytime I created a project I can just upload it to our github I can tree projects modify and do all that stuff very easily without entering a username and password so that's what I'm trying to do here so now we're gonna go to github so this is my github account and go down to settings here you're gonna go into this settings right there and then we're gonna go to ssh and GPG keys so press on that right there and right here we want to create a new SSH key all right we're gonna associate this with our account and since I'm using a MacBook Pro I'm gonna just label it that so that I know that this key is working on my MacBook Pro and we're gonna paste in the key add the key all right there we go now I don't have to use any username passwords when I'm using github and get and I'm gonna create a new repository right here alright so the next thing I'm gonna do is create a repository and I'm gonna create a pages repository you don't know why it get hub pages is it allows you to host pages that can be run in HTML and CSS and all it will display that full web page so it's like creating a portfolio page for yourself and that's what I'm gonna do I'm gonna create a portfolio page and then I'm going to link it to github and we're gonna work on it and I'll show you how to do git and github using that so in here when it's asking for a repository name I'm gonna put code or tie dot github I owe now when you're creating a pages github page you have to call it by the name of your your github on channel here your your page name so whatever your github name you put right there and then the rest it has to say dot github dial in order for the pages to work so do that I'm gonna put code acai github i/o and you know this will say personal portfolio page and then I'm gonna have it initialize for me a readme file and let's create this after he creates that what you want to do is go to this clone or download and click on it and you see now it says cloned with SSH and I'm gonna copy that part right here you just click this and it copies it to your clipboard I you can switch back to the HTTPS but this HTTPS part you have to login using a username and password and I'm showing you a very much easier way to do project and link them together and using SSH because I would never have to entering in username password I don't have to do the configurations for that I just have to copy this and it's always gonna link up and upload it to my github for me very easily very secure to using SSH so I copy that link now let's go back to our github inside github I'm going to hold down command shift P to open up the palette and if you don't want to do commands you know just go to view and command palette it's the same thing and what I'm looking for is right here git clone if you don't have this type git and you'll see I have a lot of different things and you want this clone one click that paste it in here is the new git repository that I just created and press return on it now I'm going to save it into my projects folder this is my main folder Kotick I folder where I have all my projects you see I have my Python projects this is my other repository that I have now I'm just gonna select this location it's gonna clone it and then after it clones you see right here is just ask if you want to open it up so we're gonna open it up and here it is here is the repository that I just clubbed with the readme file see how it says oh I called it person alright so let's fix this now instead I called it person word we wanted to say personal portfolio right site let's say I made changes like that I'll save it now if you go down here see it has this is the get control that works with github now any changes that I make since I cloned it it's using git right now as my source control and it sees that him I modified this file and it puts the M right here and for modified and it's telling me hey these are the changes that you made so here are my files again right up here and it's tell me it's modified I so what I'm done creating pages here I'll create a index page right and I'll put in some HTML this is why I love vs co2 I could just take type HTML and it just gives me very good shortcuts to just pre fill the pages so I just called this portfolio hopefully site right and let's do it h1 tag portfolio very simple right now and all right so I saved that file these two files are now modified I go back to this github thing right here right and it showed me here you go you have a modified file right here and you have a untracked file so I want to add this to my github right now so I'm gonna press + on that oops and then I'll add the index as well now these two files are staged right now so what do we know about git git you always have to stage your files and then you commit them and then you upload them so after I staged this I have to enter in a comment because I have to commit it so I'll just put in here like first upload and when I press this check box here is going to commit these both on both of these files that I just staged so that now they are committed and then let's say I'm not ready to upload to get up yet I'm still working in this let's say I just want to add some more stuff one two three stuff like that I save it and then you'll see bike right out here again it it's asking me hey you made some more changes I have to stage it again they have to commit it again added more tests then I commit that and then once I'm done I go down here and I can upload this now to my github this is where it's at origin master so I'll say ok and it's uploading it and there we go it's done it finished and there you go it uploaded it to my github using SSH so you see how simple that was to modify a page and upload it directly to our github page and like I said you can access this github io here if I go open up a new browser see if I paste in this exact URL there you go it can run this page is running the HTML page for me so that I can make this into my portfolio page right now so when I first started with git and github I was very confused on like I thought it was the same thing as github and a lot of people make this mistake so I wanted to clear that up for all of the beginners because I know I was kind of confused with this when I first started out and so I cleared up right now git is just a source control that works on your your system your PC or your Mac and then github is where you host repository and with all those version controls right here you'll see right down here where it says master if I click on that you see I can create a new branch I can branch off of this master and then with a new branch I can edit files and it won't affect the master it'll be on my branch file and then if I ever want to get back to the master file your master file let's say you never want to mess with that it's your main one that's it's like a working version and then if you have other people contributing to the project they can work off of branches on that and then if they screw up they can always just throw away that branch get the master back and work on that so so what I'll do right now is I'll create a new branch I'll go down here where it says master and um let's say I have a new employee and his name Joe and I wanted to create a new branch for him to work off of my master branch so I'll say new branch right here and we'll give it a name Joe branch now this branch let's say he goes into index here and he makes them edits puts Joe portfolio right saves that so since I created a branch using Visual Studio code here using git it's only on this machine I need an origin for it I'm in the Joe branch right now now that I created changes here let's say I go back to master here you'll see when I could switch back to master and I go to index here you see the changes that where I put Joe in is not there because this is the master now so I'll go back to Joe go to the Joe branch so now that we created this Joe branch it doesn't know where to push it to you know if I click on this cloud down here is asking me where do you want to put this into what github so here's the origin I want to put it to our same site right here so now if I go back to my github here and I refresh here's Joe branch with the updates that I did so let's click into here and see right here here's here are the changes I made for this branch so you see how powerful this is by using git and github get to make changes on our local machine here and when we're ready we can push this to wherever we want I can go back to working on the master or I can work on the job Rancher so in the end let's say that I have the separate project that Joe is working on and he wants to merge it with my master file so we can and I've done all the testing and I see that everything is working I can do a pull request on it and then we can merge this into my master it's right here I'll click on this compare and pull request put some comments here approved create pull request and now I can merge this pull request confirm the merge and I go to index here you see it merged it because I approved it and now the master is a working full version with the Joel branch merged to it and Joe can keep on working on his grams to do other changes and we can just keep merging that if I want and other people can contribute create another branch and contribute using the Master File alright guys finally I'm gonna end this by showing you how to do some git commands because I think it's very important to understand get the command and how it works because I know that vs code makes it very simple to just click add changes commit it upload it and do all that but once you get used to these commands is going to be a breeze and you're gonna learn things a lot better so let me just give you a couple of commands to run on get so down in my terminal here you'll see that I am in my project folder and I have a modified HTML file right here I added some changes in here I added beach strap and a couple of things a little navigation and just change things up so I modified that and so we're gonna run this command right here called get status and these are just a couple of the commands that I feel like or the the most important commands that you should know but there are many git commands so when I run get status here it shows me the same thing modified see that file has been modified let's say I go back in here and I modify this another number here and I saved that now if I do a get status again you see it shows me everything has been modified so that's pretty important to know and then let's say if I don't want to interactively click on these to add commit and I push up to my master file I can do all that in command so I'll show you right now I'm gonna do a git add period get add period will add everything that's been it's don't you staged everything that's been modified so if I do that right now and then if I do a git status you see it's green and it's saying it's modified but you staged it so remember we have to stage it and then we got to commit it so we're gonna say git commit dash M because we want to leave a comment we have to leave a comment every time we commit something so I'll just say this is the working version so you'll notice right here see it it committed it it's gone from more or get thing right here so that's all vs code is really doing is just running these commands for you to make it really simple when you're clicking on it oh and maybe I should show you this first right here I'll say git remote dash V and when you do this it's showing you your remote where it's linked to right now when I push this is going here which is my master file so now I'm gonna run the fun command git push origin master so this is gonna push all of our changes to github onto our master branch let's just refresh this page and you'll see right here it updated index and here's all of the new code that I added in now there's a lot more on more command line close to this get that I didn't cover but those are like the basics and once again you know it's very important to learn it um the the commands cuz you'll understand it a lot more you'll understand how it works how it does things and I'll add all of the codes and everything into my github account I'll have a page called git or github tutorials and I'll show you all of the commands including the SSH commands and everything that I covered in this tutorial so that's gonna be it for this one I hope I didn't have this going on for too long but thanks again for some of you guys that subscribed before when I was doing Python tutorials and sorry about that I took a little bit of break I had some technical issues but I have things up and running now and what I think I'm gonna do is I'm I'm gonna start getting into bootstrap I'll show you how to do some of that I'm gonna show a lot of new stuff that I think programmers should learn today which is like bootstrap html5 css3 I'll cover node and I'll do react Express a couple of those are very exciting they're very new stuff that everyone's getting to right now and then I'll also get back into Python as I go along so I hope you guys like this video and I hope you hit that subscribe and like button so that I can get my subscriber counts up and I'll see you guys next time thanks a lot [Music]

Channel: Codr Kai

Views: 9,707

Keywords: github setup, github tutorial, git tutorial, git and github tutorial, git and github crash course, how to use git and github, how to setup git and github, how to use git, github and visual source code, vs code and github, github ssh key setup, github beginner, git beginner

Id: aMi4GXZVxSk

Length: 22min 46sec (1366 seconds)

Published: Tue Nov 26 2019