Git & GitHub Overview

[00:00:00]
>> The next thing you should know, I'm gonna give you the most basic intro to Git and GitHub. There is an entire course on Frontend Masters for Git. But it's really critical for developers to get up and going with Git fairly early in their careers. So I'm gonna show you how to do this all with VS Code, because VS Code can handle all of Git for you.

[00:00:23]
But it's a way for you to be able to share your code. So if you look at this on complete-intro-to-web-dev, this is all of the code for that entire course website that we've been using here. It's all available here. If you wanna look at my CSS, right, this is the CSS for that entire website, right here, right?

[00:00:47]
It's a superpower that I can share all of this code with you. You can look at it, you can dissect it, you can fix things and open pull requests. It's a way for coders to collaborate with each other. Just like we have Google Docs so that multiple people can work on the same Word Document, we have GitHub, so multiple coders can all work on the same code.

[00:01:07]
So I wanna disambiguate a little bit what Git is versus GitHub. GitHub is a product which is owned by Microsoft, and it's a central repository for all of people to use with Git. You do not have to use Git with GitHub. Git is just the tool that allows you to commit new updates to your code or change things or delete things.

[00:01:28]
It's just like a local tool. Git is very old. Git was created by the same person that created Linux, Linus Torvalds. And he likes to say that Git was named after himself, right, cuz he's a Git, right? I don't know if you're familiar with, I think it's British slang where git is an idiot, right?

[00:01:48]
So Git's quite old, they invented it for Linux. It's a little difficult to use sometimes, so that's why I'm gonna show you how to do this with VS Code. So GitHub is just this product. Again, it was bought by Microsoft maybe five years ago, four years ago, something like that.

[00:02:09]
And you and I are going to take one of your projects. Let's go and maybe let's do your Word Masters 1, cuz that's probably a fun one to keep a track of. So let's open that one here, Word Masters. You and I are going to put this on GitHub.

[00:02:26]
First things first, we have to start a Git repo, what's called a knit, a Git repo. So we're gonna go to this little tab here with the three dots here, the source control 1. And there's a button here. There's just a directly published to GitHub button. Didn't know that, we're gonna do the long way.

[00:02:49]
Initialize Repository, so you're gonna click that. And all of a sudden, this becomes a Git repo, okay? So far, so good, we don't have anything stored in our Git repo, right? It'd be like an empty folder, you have a folder, but there's nothing in it. So as you can see here, these are all the various different changes I've made since last time I saved.

[00:03:13]
I've never saved, so there's no changes. So what I'm gonna do is I'm gonna say this is my initial code commit. It's some message that you're leaving for your future self. It's like this is what I did when I save this, and I'm gonna click the checkmark up here.

[00:03:34]
So let's do it a little bit different. So we're not gonna click the checkmark yet. What we're gonna do instead, we're gonna click + on all of these. And so now, these are all what are called staged commits, Or staged changes rather. So there's kinda three statuses in Git.

[00:03:58]
There's unstaged, there's staged, and there's committed. Before you can commit something, you have to stage it. And that's basically, the only reason that you'll stage things is you wanna bundle up all of your changes into one bigger commit, right, so that you can commit a whole feature at a time, right?

[00:04:15]
Let's say I added a new login flow to my website. I could add the 30 files I had to change to the stage, and then I'll hit Commit to commit all of them at once into one package, right? That's the idea behind staged commits. Okay, so now I have all of these, you can see it says, they are staged changes, right?

[00:04:36]
And I put a message up here of initial code commit or something like that. And then I'll hit Check. Okay, That made a commit. So now, if you click on these, you can view. Yeah, anyway. No, that's not what I wanted to do, I don't want us to do that.

[00:05:13]
Okay, Cool, I've now made my first commit, right? What's cool about this, let's say I do a bunch of stuff and, I don't know, let's say I do something really dumb and accidentally delete a bunch of code. And now, I'm like, I've saved it, it's gone, I'm really upset.

[00:05:31]
The nice thing about Git is it keeps your entire commit record, every single one of them. So I can say, I broke this, I wanna go back to the way it was. So you can see here, I have these changes here. There's this back arrow 1, which is discard everything.

[00:05:48]
So if I click Discard here, it's gonna be, are you sure you wanna discard this? This will take me back to where it was before. So it's like a safety thing as well, right? I have definitely deleted code before and used Git to save me. So that's positive.

[00:06:08]
All right, so the next thing that we're gonna do is we're gonna come back to GitHub. If you don't have a GitHub account here, It'll look something like this. You'll have to sign up for GitHub, which you should definitely do, all coders should have a GitHub account. It's basically the modern resume for a developer.

[00:06:30]
Then we're gonna click up here and say, create a new repository. A repository is like one project, you can think of this that way. And I'm going to create good old wordy-masters. Make it public, you can ignore probably the rest of this stuff and just click Create Repository.

[00:06:53]
Okay, and then here, Usually HTTPS is the one that people want. Go ahead and do that. Click on HTTPS and copy that. I end up using the SSH one more, but you have to set up some stuff to make that work. Let's ignore that. Just click the HTTPS one, copy that.

[00:07:15]
Come back over to your repository here, and then we need to add a remote. Or we can click Publish Branch, I think this is actually what we want. This'll actually go ahead and create. I'm signed into GitHub here, so it's doing a bunch of stuff for me. I don't wanna do that, I wanna add a remote.

[00:07:38]
So this three dots up here, click that. Click Remote and click Add Remote. Remote is somewhere to push to, right? Typically, you're gonna have one, maybe two remotes. One will be on GitHub and another one might be an upstream one. So if I have my own copy of the project, another is the company's copy, right?

[00:08:01]
You might have two, but typically, you'll just have one. But suffice to say a remote is where you're going to push to. I copied that URL up here. And you can click that. Remote name, you're almost always gonna call it origin, just by convention. The only one that you might have, if you have your copied, call that origin, if there's a company copied, you'd call it upstream.

[00:08:30]
We're gonna call this one origin. And there we go. So I have that, that's fine. And then now, we're going to say Push. It might say that this has no branch called either main or master, depending on what version of Git you have. And you're just gonna say OK, you're gonna be creating a new branch.

[00:09:04]
Okay, so now I've done that. And if I go back over here and I would just refresh the page, you can now see my Word Master's code hosted on GitHub. Now, some of you might be seeing some errors. The one that I saw earlier was one that looked like this.

[00:09:27]
So if you do that, you might have to run this first line. Just copy git config pull.rebase false. That might help. Some of you might be seeing you have to set up Git, in which case, you have to GitHub set up, username and password, set up username. So if you have that problem setting your username in Git, we'll link this in the course notes and I'll link it in my dock as well.

[00:10:01]
You'll basically just have to copy and paste this, and you might have to set your email as well, so git config user.email as well. So instead of user.name, it will be user.email, then you just set your email as well. In any case, now you have code that you can share with people.

[00:10:20]
No, I'm gonna leave this basically at that. There's a ton more that you can learn about Git. You can pull the code back down, you can fork other people's repositories, you can make varying branches on stuff. But if you don't know Git, you should definitely take a UNIX course.

[00:10:37]
That will help you become more accustomed to a pretty hard to use tool sometimes. I showed you how to do this in Visual Studio Code, but there's also a GitHub desktop client that makes it really easy. Or me personally, I end up doing everything in the command line anyway, so you can also learn to just do in the command line.

[00:10:59]
All of them are super valid, modern tools for Git are pretty good.