Check out a free preview of the full Full Stack for Front-End Engineers, v3 course

The "Version Control & Git" Lesson is part of the full, Full Stack for Front-End Engineers, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Jem discusses version control using git and walks through connecting to GitHub the Git exercise. Helpful commands in case you get stuck are also provided in this segment.


Transcript from the "Version Control & Git" Lesson

>> Version control, I assume most people here have worked with some sort of version control. Yeah, probably git is probably the big one, but there's also Subversion, mercurial. Fun fact, remember the other day, in the last section we talked about hashing, guess what git uses?
>> Hashes.
>> Hashes, yeah, SHA-1, hashes are everywhere.

The more you understand that, the more you're like, okay, now I understand how things work. Even more fun facts, and I told you I'm a nerd, so this is really fun, guess who invented git?
>> Linus Torvalds?
>> Yes, Linus Torvalds, the same person who invented Linux. Wow, what a world, what an engineer, that's impressive, two major piece of technology that we rely on every single day.

Yeah, fascinating, really fascinating. So, for the exercise, when we left off, it was to create a git repository on GitHub. On your server, create an SSH key called gh_key. And then you need to add that SSH key to GitHub, add a remote repo to your server. Make sure you're using that key, and then you push your local repository to GitHub.

The reason why we're doing that is so that we don't have to do all of our coding on the server anymore. We can now do it on our local machine via GitHub, and we just push it up and pull it back down. So I'm gonna walk through this, because, actually I tried to run through all the exercises myself multiple times.

And I actually ran into some issues, and it stumped me, and I made such a silly error. So I wanna walk through and make sure you're not making silly errors as well. So I won't do every single step, because I already created the GitHub account, etc, that's pretty straightforward.

But I will do the GitHub key and make sure it's being used, cuz that part's a little bit tricky. So I'm gonna switch back to my server here, clear. And I'm just gonna double check, cuz I like to make sure things are where I left them. All right, so I'm in my var/www/app, I've already done a git-init, so I'm in my git repo.

Now the next thing we wanna do is we need to create a new SSH key, anybody remember how to do that?
>> [LAUGH]
>> ssh-keygen.
>> ssh-keygen, that's right. So ssh-keygen, And I don't wanna do it here, because if I do it here, it's gonna drop it in this folder, and it might also copy it over.

So this is a mistake I made last night too, so I'm just gonna Ctrl+C out of here, clear the window, and I'm just gonna cd home. I'm a stickler for these things, it makes life easier. So now I'm gonna ssh-keygen in my .ssh directory in my home, keygen.

And I will call that gh_key, I've already made one, so it will collide, so I won't make one here. But this is how to make the key for your GitHub account. Okay, so if I do an ls, I see there's a private key and a public key. Everybody here so far?

All right, at this point, you've probably like, I've made so many SSH keys, it's so much fun doing it. But it doesn't hurt to be a little bit more thorough. So next, we add that SSH key to GitHub. And if you follow the instructions on the slides, GitHub has a whole nice, beautiful documentation.

They're very good about documentation, but I'll just show you. So GitHub, get myself here. And the repo was just the name of my website, And I'm gonna go here to Settings. You don't actually have to go to the repo, it's your general settings and we're gonna go down to SSH and GBG keys.

Let me see here, I added a key, you can call it whatever you want. But what do we copy to GitHub? Somebody remind me, your?
>> Public-
>> Public key, that's right, that's right. Okay, so you copy your public key, just like DigitalOcean. So the next thing we do is we add a remote repo.

So to do that, let's jump back to my application directory /var/www. We say git remote add origin, and I don't remember the exact command. So I'm just gonna follow the instructions, never a bad idea. So git remote add origin. Then at this point you go to your repo that you created, and you just put copy.

And then you paste in the git. You've probably done this at some point in your career already, we've all worked with GitHub or GitLab or something like that. Nothing groundbreaking here, I won't add another origin cuz then I have to delete it and it'll be a thing. So now we get to the part where I made a mistake when I was playing with this last night, we need to ensure the new key is used.

So to do that, we need to vi and we need to vi, And we need to create a configuration file in ssh. So the mistake I made last night was I sudoed it instead of just running it as my normal user. And it was failing, and it was public key, public key failed.

I was like, did I spell something wrong? And it took me an embarrassing long amount of time. And I'm like, I don't need to sudo it, it's just a regular file owned by myself. So your config file in .ssh/config should look something like, actually, it should look exactly like this.

You put your host,, your hostname,, the identity file is your home directory /.ssh, and your GitHub key.
>> Is it possible to see how to connect ssh keys to two different GitHub accounts from the same machine?
>> You can use the same ssh key as much as you want, totally up to your comfort level when it comes to security.

But yeah, you're welcome to do that, or you can create new ones, totally up to you. Okay, so hopefully your .ssh config file looks something like this. So I'm gonna quit out of here. So, The good way of testing it out is you can say git push origin main.

And I didn't get any error, so that means I hooked it up correctly. Now if you do get errors, that means either your key file isn't set correctly or you mistyped something. There's a lot of ways you can go wrong, but that's okay, we expect to make mistakes.

The way we can test it out is, I have all these things here. The way we can test it out is we can say ssh- test, and we'll say v, and we'll say And it's gonna make a test connection, and it's gonna tell you everything that's going wrong, if something is going wrong.

This saved my butt last night cuz I was scratching my head, I'm like, why isn't this working? And I was like, let me just run the test command and just show me what ssh is doing. So if you're stuck and something's not working right, double check that your ssh key is being used, that the permissions are set correctly, Because it'll throw a warning on all these things

>> So the test run is ssh-Tv, then
>> Yes, and because I got stuck, I made a whole slide you can refer back to in big bold letters called In case you get stuck. There's one for testing your ssh connection, if you're like, why does it keep saying permission denied publickey.

SSH isn't telling me anything. Use this to test your connection, whether it's to your DigitalOcean droplet or GitHub. And remember yesterday, we ran into that trying to edit a read-only file because I didn't open it with sudo, and I'd already edited it. There's nothing I can do. And I was like, there's a command to get around this, but I can't remember because it's kind of long.

Here's that command to you, how to save a read-only file in vim. Yeah, I am not a vim expert, so that's why I didn't remember this off the top of my head. But that command is fun because you're writing and then you're saying I wanna sudo a file, tee is going to open a new process.

Well, tee is actually going to just read from standard input and then write to standard output, and the % is just the filename itself. So essentially we're opening a new shell and we're saying overwrite the existing file using the sudo command. Yeah, most people will probably make a shortcut for this in their VMRC file, but we're not going too deep into vim today.

But this is pretty useful because at some point in your career or today or you already have, you will open a file and you make all these changes, and you're like, great. And then you can't save, and you're stuck. Remember this slide. And then I threw in pkill, we haven't really run into this issue yet, but if you have a process that just won't die, pkill that process.

So pkill node will kill node for you. Sometimes you can't Ctrl+C out of things, so you just have to open another shell and you kill all the other processes. That one I actually probably use more in my day-to-day engineering. When I see something I created eating up a lot of memory, and it's just like running and running and running, and I can't kill it cuz I don't know where it came from, I can just kill the entire process.

And then view permissions as numbers, not super useful, but it's probably a little bit more intuitive. When we chmod, we're always doing 600 or 644, something like that, but translating those into the read, write, execute, which we'll talk more later today on, is kind of confusing. Yes, question.

>> So if the last error message we get on the test run is authenticity of host, github cannot be established, will that means that we copied the public key wrong somehow?
>> Authenticity of host, well, that should be right, it usually throws up the authenticity warning because you've never connected and you'd say yes, yeah.

And I think we covered that in our previous section where that whole known host file which gives you that list of places you've connected to before. And ssh is gonna be like, hey, you've never connected to this machine, are you sure you're doing the right thing? Again, ssh is really trying to make sure you don't do anything poorly or shoot yourself in the foot.

So, if everything's working correctly, you should be able to pull and push from your remote origin on GitHub, and now you can clone that repo on your local machine. So the coding we need to do today, we can do on our local machine, we can just push it up, then pull it down from our server.

So much easier, that's why we're not going super deep into vi. We needed to edit some files but let's use the conveniences of modern tooling on our machines.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now