Backup Your Code Using Github.com

Locked lesson.

Upgrade

About this lesson

Learn to push code to Github.com as a Backup to Git version control.

Exercise files

Download this lesson’s exercise file.

Backup Your Code Using Github.com.docx
60.1 KB

Quick reference

Backup Your Code Using Github.com

Github.com allows us to save our version controlled code on a third party website for safe keeping.

When to use

Any time you make significant changes to your code, you should save it using version control and git. Since git sits on your local development environment, it's a good idea to push your code to a third party for safe keeping in case your local environment ever crashes. We'll use github for that.

Instructions

Sign up for a free account at GitHub.com

Next, copy your local ssh key by issuing this command in the terminal:

  • cat /c/Users/flatplanet/.ssh/id_rsa.pub  (replace flatplanet with the directory where you created your SSH keys earlier)

Copy and paste the whole block of text from the terminal, then log into your github.com account and click the "setting" icon in the top right corner of the screen. Next, click the "SSH and GPG keys" link on the left side of the screen. Finally, click the "New SSH Key" button at the top of the screen.

Name your key anything you like, then paste the ssh key into the text box provided. Click the "Add SSH Key" button to save your key.

Next; we need to create a new repository. Click the "Your Profile" link at the top right of the screen. Next, click the "Repositories" link at the top of the screen, then the "New" button.

Name the repository anything you like (pinteresting), and click "Public" then click the "Create Repository" button.

Github.com will provide you with two commands to enter into your git bash terminal, that should look like this:

  • git remote add origin git@github.com:username/ProjectName.git
  • git push -u origin master

From then on, whenever you want to push code to github.com use these three commands from the terminal:

  • git add .
  • git commit -am 'commit message'
  • git push

Hints & tips

  • Github.com is completely free.
  • Once you connect to github.com once, you can push code from then on with the "git push" command.
  • You don't need to log into github.com every time you write code.
Login to download
  • 00:04 In this video, we want to set up a GitHub account.
  • 00:07 And GitHub is used to store our Git code.
  • 00:11 It's a way to backup our code so that it's not just sitting on our computer because
  • 00:15 computers break, computers burn, computers lose data,
  • 00:19 your house might burn down, your computer might be lost, it might get stolen,
  • 00:24 who knows it's just a good idea to keep a copy of your code someplace else.
  • 00:28 And GitHub is the website that everybody uses.
  • 00:30 It's completely free and so that's cool.
  • 00:32 Now, I recommend you go over to github.com set up an account.
  • 00:36 This is my account right here, github.com/flatplanet.
  • 00:39 I don't think the world is flat.
  • 00:40 I just kind of find it funny that some people do.
  • 00:42 So that's my username often.
  • 00:45 So in this video, we're going to continue to set this all up so
  • 00:48 that we can push our code.
  • 00:49 Now, the first thing we need to do is create an SSH key.
  • 00:52 An SSH key is a secure key that allows us to connect to GitHub from our little
  • 00:57 get bash terminal.
  • 00:59 Restart your terminal.
  • 01:00 And it's important that you restart it because we need
  • 01:03 to create our SSH key in the sort of default directory.
  • 01:07 And this is my default directory, Users/flatplanet.
  • 01:11 Whatever your computer is called,
  • 01:12 whatever your logged in account is, you'll see that there instead of flatplanet.
  • 01:17 But this is where we need to be, that's why when we restart the git bash terminal,
  • 01:20 it default opens up to this directory.
  • 01:22 So the first thing we want to do is make a new directory to hold our SSH key.
  • 01:27 So we type in mkdir, stands for make directory.
  • 01:30 And then .ssh, and the dot means this directory will be hidden.
  • 01:35 So now we need move into that directory, change director .ssh.
  • 01:39 And you can see we're inside that directory.
  • 01:44 Now we need to generate our ssh key.
  • 01:47 So we type in ssh-keygen.exe.
  • 01:53 Now it says where do we want to save this.
  • 01:55 We want to save it in this folder so we could just hit Enter.
  • 01:57 Now it's asking for a password.
  • 01:59 You absolutely do not have to enter a password right here.
  • 02:02 I recommend that you don't, so just hit Enter.
  • 02:04 And do it again here.
  • 02:06 And our key has been generated.
  • 02:08 So if we clear the screen, if we type "ls" to list the stuff in this directory,
  • 02:13 we see these two files, Id_rsa and id_rsa_pub.
  • 02:16 It's this .pub one that we want.
  • 02:18 We need to copy that over to GitHub.
  • 02:21 Type in cat, stands for catalog and then id_rsa.pub.
  • 02:27 And this is our SSH key.
  • 02:29 That's all this gobbledygook.
  • 02:30 So just highlight it here and right click and click Copy.
  • 02:34 And then head back over to your GitHub account.
  • 02:36 And up here at the top, click this little caret and go down to Settings.
  • 02:41 And then down here click SSH and GPG keys.
  • 02:44 And then we just want to click this new SSH key button.
  • 02:48 And then just right click and paste it in.
  • 02:49 And you can name this anything you want or you could just leave it blank, and
  • 02:53 then click this Add SSH key.
  • 02:54 Now it's probably going to ask you for your password.
  • 02:57 Type that in and we're good to go.
  • 03:01 So now head back over to our Git terminal.
  • 03:04 And we need to change back into the folder that has all of our HTML stuff.
  • 03:08 So type cd change directory.
  • 03:11 And we save this in c/basic-html.
  • 03:18 So we can see we're in our master branch, so that's good.
  • 03:23 Next head back over to GitHub, and come up here and
  • 03:27 click on your repositories or you can click on your profile.
  • 03:32 And then from there, click on this repositories link up here.
  • 03:36 They both go to the same place.
  • 03:37 Now we want to create a new repository.
  • 03:40 And let's just call this HTML course, I don't know, it doesn't really matter.
  • 03:46 And then it could be either Public or Private.
  • 03:48 And I recommend you leave it Public because especially if you're trying
  • 03:51 to get a job, potential employers like to look at your GitHub account and
  • 03:55 see your code, the things you know, the things you've done in the past.
  • 03:59 I recommend you keep it Public.
  • 04:00 If you want to keep it Private, if you're doing some super secret startup or
  • 04:03 something, you could do that too.
  • 04:04 Both of these are free.
  • 04:06 I'm just going to leave this public and then click this Create repository button.
  • 04:10 Now, we're almost done.
  • 04:12 We have to scroll down here, and we need to push our existing Git repository that
  • 04:17 we set up in the last video up to GitHub.
  • 04:19 And to do that we paste in these two commands, so
  • 04:22 highlight this and right click and then click Copy.
  • 04:26 And then head over here and make sure you're in the c/basic.html directory.
  • 04:31 Right click and click Paste.
  • 04:34 And then hit Enter.
  • 04:36 And then next, grab this last one, git push -u origin master, Copy.
  • 04:43 Right click, Paste.
  • 04:45 And do we want to add our thing?
  • 04:47 Click Yes.
  • 04:49 And now it's pushing this stuff up to our GitHub account.
  • 04:52 And we can confirm that, we can head back over here and
  • 04:57 click on your Profile, then click on Repositories.
  • 05:02 And you see sure enough here's our html course.
  • 05:04 If we click on it, all of our files will be listed here.
  • 05:07 Here's our index page, we click on that, you can see here's our page.
  • 05:10 So we've now pushed all of our code up to GitHub.
  • 05:13 Now any time in the future we want to push our code, we go through the same process.
  • 05:18 Remember from the last video, we type in git add.
  • 05:21 Well, actually first, let's head over to our code and
  • 05:25 let's change it just a little bit.
  • 05:27 Add a bunch of exclamation points.
  • 05:28 So save it and then head back over here and type in git add period.
  • 05:33 And then git commit -am.
  • 05:36 Remember we want a little message so
  • 05:40 I added a bunch of those, all right?
  • 05:44 Now, from now on to push our code up to GitHub,
  • 05:47 all we have to do is type in git push.
  • 05:50 And you can see it's pushing it up and now it's done.
  • 05:52 Now, we can head back over here and go back, and hit Reload.
  • 05:57 And if we click on our HTML course again, now we see look this commit message right
  • 06:02 here is changed to added a bunch of exclamation points.
  • 06:05 That's why that message is important because visually we can just look
  • 06:08 at this and say, yeah, that's what I did there.
  • 06:10 And if we click on this shows a whole bunch exclamation points.
  • 06:13 And that's very cool.
  • 06:15 So that's pretty much it for intermediate HTML stuff.
  • 06:17 In the next video we'll move forward and
  • 06:20 start looking at the Bootstrap CSS Framework.

Lesson notes are only available for subscribers.

Gift this course