Learn Git In 15 Minutes

every one today we're talking about get an extremely useful tool that happens to be a tiny bit difficult to learn so we're gonna go through it as quickly as possible there's a lot to cover so let's get started I have notes here you can find the link in the description let's start with basics what is get so officially it is a distributed version control system it allows us to track changes in an application in a folder in a single file over time across different users different computers back in high school and college I had to write a bunch of long papers and I was always indecisive about how they should begin and conclude so I would duplicate them and then give them a new name like sa new intro and then change the intro and I would do that over and over and end up with like 20 versions and it kind of works when it's one file and one person but it would be impossible on a large project like this one this is thousands and thousands of files in one project it's a top-secret thing I'm working on right now it's not top secret you'll hear about it soon and there are multiple people working on it we're each working together on different pieces we're sharing those pieces we're testing new things out deciding if we want to include them or not and so we're using good to help in that process we've made thousands and thousands of separate commits over the last nine or ten months okay so the first thing we need to do is make sure you have git installed so I have notes on how to install it it's just a download whether you're on a Mac or a PC you go to get the link is in the notes that I created click on your OS and along with that you'll need to use a terminal so on a Mac or Linux machine use the default terminal app or I term or whatever you prefer if you're on Windows you can use PowerShell you can use the git bash terminal which actually comes with git the next thing you need to do just to configure git is tell it your username or a name and your email now this is not used to log in anywhere this is only used to track who made what changes here's an example of what I'm talking about this is a list of different checkpoints or commits that have been made on a project and we can see who did each thing for example here le configured Python or hooks exercise so that name and that email is just used to identify yourself now on that note let's quickly talk about github get and github are completely separate tools github does rely on git you need to understand get to use github but you can use git entirely on your own it is the main tool I'll have a separate video later on talking about github so now that you have git installed let's talk about repositories repositories are the containers for get anytime you want to use git on a project on even a single file you need to initialize a repository and the command to do that is get an it so in my terminal I have a new empty folder for this video called git video if I want to use git to track my changes in this folder I would run git init alright so I'm gonna run that now get in it and it tells me initialized empty git repository it doesn't look like anything happened but if I use LS - a to view hidden files and folders there's now a dot git folder in here this is created by git and it's where it stores all of the information about your repository so you don't need to touch it but it's there so now that we've initialized a repository the next command we should talk about is one called git status git status is something you'll do all the time it's how you check in on the status of your repo your repository if I type git status it tells me no commits yet nothing to commit start making or copying or doing something so that we can actually track your files so let's imagine I'm working on a simple project I'm going to make a new file called index.html now let's type git status and it tells me hey untracked files there's a new file here index.html so if I wanted to make a commit a checkpoint right now just after I made index.html there are two steps to committing we have to decide which files are which changes we want to add into the staging area and then from the staging area we then commit again it's a two-step process we add into the staging area it's like a little holding pen and then we say commit and the reason we do that is that on large projects you might have hundreds of changes across dozens of files and you might want to make a smaller commit only on the CSS files had changed so you add the CSS files that changed and then commit those files selectively so the first step is to add get add into the staging area so we'd say what file we want to add so we'll do git add index.html and if we type git status again you'll now see this is green but it also says changes to be committed earlier it said untracked files now it says changes to be committed so we can make our first commit right now there are a couple different ways to commit the simplest way and the only one I'm going to show you here uses the - M flag the message flag get commit - M and then a message in quotes and whatever string you pass in will be associated with that commit it's a little message that should explain what you're committing what are the contents why are you making a commit right now so in this case all I did was make an empty file so I'll go with git commit dash M creates index.html like that okay so we get a little message here let's type git status now it says nothing to commit working tree clean that means there's no changes that haven't been committed but I can now type a new command git log and get log is going to just give me a history of commits you can see here is a commit I made by me at this time and date and this was the message so let's make some more changes I'll add an app dot J s I'll also add a let's go with style.css and then I'll open them up in the editor all right so I have all three empty files I'll add in my basic skeleton here and I'm going to add some code to app J s imagine we're adding in some substantial code I'll just do an alert hello there and save I'm going to save my index file as well and let's also add in a script tag so we can include our app J s and let's add an h1 that's get demo page and save so this is what I should see in the browser hello there get demo page let's pretend that was some substantial code let's type get status now and it tells us two different things first two files that are untracked completely we've never told to get about these files and then one file that was modified index.html so what would make you sense is a commit here let's maybe group together our index.html change and the apt J s that we created let's make a commit with those two and then we'll add some styles and we'll make a commit with this style CSS so we'll do git add index.html we can chain these together like this two files and then we type get status again now it tells us this is going to be your next commit if you were to commit right now so we'll do get commit - M let's go with add app logic fine it's not a great commit message but we didn't really do much now if I type git log we have two commits first we made our index.html then we added app logic so now let's do a couple more changes to our CSS file we'll give the body a background of aquamarine and h1s background of purple I also made sure to include my stylesheet with a link tag and this is what it looks like now let's go and commit that so I'll clear my terminal and once again we see since you last committed your index changed and we're not tracking style stuff CSS so I'm going to track it with git add and I have two choices I can add them one at a time like we've seen or there's another command get add dot and this will add everything you see here all those changes into the staging area so now if I type git status you can see we have both here we created styles we modified index let's now commit and this one will be add basic styles and then let's do one more quick change in our Styles let's actually change the background color to be on the body instead of aquamarine even though that's a great color let's go with olive that looks like this now okay then I'm gonna type git status again and commit this now all of these commits imagine I'm actually making substantial changes I'm adding new features I'm trying new things out I'm not just changing one property but for the sake of time I am changing one property well get add either dot or style stuff CSS that are equivalent here and then commit and this one will just be change background color on body okay so now we have what four commits and we haven't even seen how to use these different commits what is the point it's not just to have a log of what you did we can also go back at any point and start over here or here or at the very beginning if we wanted to the way we do that is with another command called git checkout so git checkout and then a commit hash these are commit hashes right here so why don't we just go back hmm let's go back one commit to the previous color I'm gonna copy that hash and then get checkout and paste that in now we get a long message we don't really have a ton of time to come into what this all means what is detached head it sounds very violent but let's go take a look at our app code now well it's back to aquamarine and I refresh or it's like we went back in time it's a time machine we could even go back and check out the very beginning of our code like this same thing as long as I copy that hash correctly now this is what I see in my editor and empty index there's nothing to see if i refresh the page so that's kind of cool right you can go back you probably wouldn't go back to the very very beginning but it is cool that you can do that now how do we go back to where we want to be first we have to talk about the idea of branches so a branch in git is like a timeline of your application of the repository we can create branches at will which is it's a great way to experiment try new things for example if I had one app we've been working on for a year and then I had a crazy idea about how I wanted to style it I might make a new branch to do that I give it a name like new styles or a crazy idea and then on that branch I do all of my work rather than on the main branch of the app that everybody else is working on I can have my own just side timeline whenever I want so the main branch that we work on the main standard branch that is created by default is called master and you can see that if I scroll back up there's been references to master on branch master we never said we should be on master if I type git branch right now this is not going to make me a branch this is going to list the branches so we have master and the star tells us you're actually on a different branch called head detached at this commit so whenever we go back with git check out like we just did to look at some other commits an older version of our code we are taken off of the master branch so we can go back to it with the same command get check out master and this will take me back to my master branch now if I type git branch you can see master and if I type git status on branch master my code is back back from the dead we refresh the page it all looks good we can also make our own branch whenever we want and give it a name git branch if you don't provide a name it's just going to list the branches get branch and then a new name we'll make a new branch so let's do something like git branch crazy colors now if we type git branch we have this new crazy colors branch and I can check it out just like we checked out a commit get check out crazy colors now nothing will have changed in our code all we've done is move over from one time line to another but we're at the same like progress yeah we're at the same commit we've just moved over if I type git log we still have all of these earlier commits but now if we make some crazy changes which all skip and fast-forward through okay I updated my index I added in some styles this is coming from a code pen like this guy Manuel Pinto so this is my site now crazy colors I tried it on a new branch I don't know if everyone's going to like it but I like it so I'm going to commit it if I type get status right now let me clear this and try it again you can see I modified my index and my styles let's get add everything and get commit will go with add animated BG cool I type git log here's my log of my commits add animated background but remember I'm on the branch called crazy colors if I go back to master with checkout let's type git log here it doesn't say anything about my crazy colors it doesn't say that last commit that I created which was add animated background that's not here because that was on a different timeline so I didn't impact my original timeline master and I refresh or back to this so I think it's pretty cool stuff we have these different timelines we can manage and try new things I do this all the time when I'm working on a big curriculum repository with a bunch of instructors at boot camp I might want to try adding in a new exercise or completely overhauling the react slides but I don't want to impact the original react slides until I know if we want to adopt those changes in master so I work on a branch called cult changes or new idea for react slides that's a bit long I make the changes I present them to people if they like them then I merge so that is the last piece of our puzzle here how do I merge in those changes I made let's say I my team likes that animated background how do I get it to be on master it's easy there's a command called git merge and then we specify the name of a branch so my branch that I want to merge into master is called crazy colors so git merge crazy colors and take a look at that I have this little chart that tells me insertions and deletions let's type git log you can see I now have that commit I'm still on master but I now have that code and all the commits that came from my crazy colors branch and most importantly while the code is here and I refresh we get our beautiful colors so that's it for this video there's a ton more to get that we haven't talked about of course this is just a basic intro and even at that I would expect complete beginners to be a little confused or lost reference the handouts give yourself a chance to practice things and eventually it will click thanks as always for watching please consider commenting and subscribing I'll see you next week

Channel: Colt Steele

Views: 471,282

Rating: 4.9660158 out of 5

Keywords: git, code, github

Id: USjZcfj8yxE

Length: 15min 58sec (958 seconds)

Published: Thu Sep 19 2019