1 00:00:01,130 --> 00:00:02,910 In this video, we're going to put 2 00:00:02,910 --> 00:00:06,840 all our code onto GitHub, or as we usually say, 3 00:00:06,840 --> 00:00:09,263 we're pushing it to a remote branch. 4 00:00:11,130 --> 00:00:14,300 To get started, head over to github.com, 5 00:00:14,300 --> 00:00:16,210 and as soon as you're logged in, 6 00:00:16,210 --> 00:00:18,340 just click here on this plus button 7 00:00:18,340 --> 00:00:20,790 and create a new repository. 8 00:00:20,790 --> 00:00:23,460 Now once more, if the page looks a bit different 9 00:00:23,460 --> 00:00:25,500 at the point you're watching this video, 10 00:00:25,500 --> 00:00:28,913 then just search somewhere on the page for new repository. 11 00:00:30,140 --> 00:00:33,740 Okay, so first off, you need to 12 00:00:33,740 --> 00:00:35,433 give the repository a name. 13 00:00:36,520 --> 00:00:38,720 So I'm calling it natours here, 14 00:00:38,720 --> 00:00:40,160 which for me is not possible 15 00:00:40,160 --> 00:00:43,330 because I already have a natours repository, 16 00:00:43,330 --> 00:00:47,200 so I'm just calling it natours rec for recording, 17 00:00:47,200 --> 00:00:49,703 but you can just go ahead and call it natours. 18 00:00:50,830 --> 00:00:53,010 Then we can also add a description, 19 00:00:53,010 --> 00:00:54,200 which I'm not going to do, 20 00:00:54,200 --> 00:00:57,940 and then we can set it to public or private. 21 00:00:57,940 --> 00:01:00,370 I think that right now, even the free accounts 22 00:01:00,370 --> 00:01:02,623 can have private repositories. 23 00:01:03,600 --> 00:01:05,860 Private repos, as the name says, 24 00:01:05,860 --> 00:01:10,140 only you can see and you can also invite other people. 25 00:01:10,140 --> 00:01:12,540 With public repos, they are of course 26 00:01:12,540 --> 00:01:14,520 visible to everyone, and so they are 27 00:01:14,520 --> 00:01:16,283 perfect for open source code. 28 00:01:17,128 --> 00:01:19,700 In this case, I'm just leaving it private, 29 00:01:19,700 --> 00:01:22,460 then leave all these defaults, 30 00:01:22,460 --> 00:01:25,090 and here it's very important that we do not 31 00:01:25,090 --> 00:01:28,320 initialize this new repo with a readme, 32 00:01:28,320 --> 00:01:31,500 because that would then create conflict a bit later on. 33 00:01:31,500 --> 00:01:33,910 We really want this repo to be brand-new 34 00:01:33,910 --> 00:01:36,183 and completely empty here on GitHub. 35 00:01:38,680 --> 00:01:40,070 Doing this here is similar to 36 00:01:40,070 --> 00:01:43,520 what we did before locally with git init. 37 00:01:43,520 --> 00:01:45,360 The only difference is that this time 38 00:01:45,360 --> 00:01:47,290 it really is on GitHub, 39 00:01:47,290 --> 00:01:50,040 so it's a remote repository now. 40 00:01:50,040 --> 00:01:51,020 Great. 41 00:01:51,020 --> 00:01:53,380 Now the goal here is, to basically push 42 00:01:53,380 --> 00:01:58,080 all our local code into this remote repository, okay. 43 00:01:58,080 --> 00:01:59,890 In order to be able to do that, 44 00:01:59,890 --> 00:02:02,670 we need to let our local repository know 45 00:02:02,670 --> 00:02:06,290 about this remote repo that we just created here. 46 00:02:06,290 --> 00:02:10,160 Okay, so basically we have to kind of connect them. 47 00:02:10,160 --> 00:02:12,743 That's exactly what is set here. 48 00:02:12,743 --> 00:02:15,830 What we want to do is to push an existing repository 49 00:02:15,830 --> 00:02:18,710 from the command line, and so let's go ahead 50 00:02:18,710 --> 00:02:20,180 and copy this code here 51 00:02:21,740 --> 00:02:25,579 to our command line here, okay. 52 00:02:25,579 --> 00:02:28,370 What is this going to do? 53 00:02:28,370 --> 00:02:32,150 Well, it will add a remote branch. 54 00:02:32,150 --> 00:02:36,080 Remote means that it's a hosted branch, basically. 55 00:02:36,080 --> 00:02:38,700 And this remote branch, or you can also call it, 56 00:02:38,700 --> 00:02:42,750 this remote repository, is going to be called origin, 57 00:02:42,750 --> 00:02:45,970 and it is located in this url here, 58 00:02:45,970 --> 00:02:47,073 so at this location. 59 00:02:47,970 --> 00:02:51,480 So hit enter and that's it. 60 00:02:51,480 --> 00:02:54,100 Now these two repositories are basically connected. 61 00:02:54,100 --> 00:02:58,990 At this point, we are ready to do git push, 62 00:02:58,990 --> 00:03:02,630 which is the action to basically copy our local code 63 00:03:02,630 --> 00:03:06,560 onto our remote branch in our remote repository. 64 00:03:06,560 --> 00:03:08,580 Then the name of the remote branch 65 00:03:09,780 --> 00:03:11,950 which is origin, and then the name of 66 00:03:11,950 --> 00:03:16,420 the local branch, which is master, all right. 67 00:03:16,420 --> 00:03:19,160 So git push origin master. 68 00:03:19,160 --> 00:03:21,770 Hit return, and then that should 69 00:03:21,770 --> 00:03:23,750 of course take some time. 70 00:03:23,750 --> 00:03:27,660 Now first up, it also asks us for our username, 71 00:03:27,660 --> 00:03:29,610 which is just the email address, 72 00:03:29,610 --> 00:03:31,910 and probably you don't need to do this anymore 73 00:03:31,910 --> 00:03:33,870 because you already specified it, 74 00:03:33,870 --> 00:03:37,943 but I didn't before in the video, remember that, 75 00:03:39,180 --> 00:03:40,263 so let's do that now. 76 00:03:41,420 --> 00:03:44,260 By the way, because I'm using a different account 77 00:03:44,260 --> 00:03:46,760 on my computer to record this courses, 78 00:03:46,760 --> 00:03:48,870 and so I don't really use git here, 79 00:03:48,870 --> 00:03:51,740 and so that's the reason why I needed to do it. 80 00:03:51,740 --> 00:03:55,100 Now anyway, it now asks me for my password, 81 00:03:55,100 --> 00:03:57,710 and so write your password here, 82 00:03:57,710 --> 00:04:00,090 hit return as well, and so then 83 00:04:00,090 --> 00:04:03,453 it should start sending the data to your remote branch. 84 00:04:04,820 --> 00:04:06,260 It's doing that work now. 85 00:04:06,260 --> 00:04:07,880 You can see all the statistics, 86 00:04:07,880 --> 00:04:11,930 how many files there are, your upload speed, 87 00:04:11,930 --> 00:04:14,760 and how much there is already done. 88 00:04:14,760 --> 00:04:17,503 All right, so I will come back once this is finished. 89 00:04:20,370 --> 00:04:22,330 Okay, and that's it. 90 00:04:22,330 --> 00:04:25,453 So let's now check that out here on GitHub. 91 00:04:26,500 --> 00:04:29,753 Let's reload, and indeed, here we go. 92 00:04:32,410 --> 00:04:34,630 And indeed, here we have all the files 93 00:04:34,630 --> 00:04:39,210 that we just added to our commit before, all right. 94 00:04:39,210 --> 00:04:40,770 You see that all of these here 95 00:04:40,770 --> 00:04:43,568 say initial commit, and then this file, 96 00:04:43,568 --> 00:04:46,990 app.js, where we actually did some modifications, 97 00:04:46,990 --> 00:04:49,300 it then says added a comment, 98 00:04:49,300 --> 00:04:51,220 which was the commit message 99 00:04:51,220 --> 00:04:53,760 that we used for that specific commit 100 00:04:53,760 --> 00:04:56,680 where we only committed this one file. 101 00:04:56,680 --> 00:04:57,980 Remember that? 102 00:04:57,980 --> 00:05:01,330 So it actually was six minutes later. 103 00:05:01,330 --> 00:05:02,640 Great. 104 00:05:02,640 --> 00:05:03,970 Let's just take a look at that. 105 00:05:03,970 --> 00:05:06,992 How it looks like here in GitHub. 106 00:05:06,992 --> 00:05:10,230 Yeah, that's all our code. 107 00:05:10,230 --> 00:05:14,243 Nicely hosted now basically in this place, so in GitHub. 108 00:05:15,100 --> 00:05:18,900 You also see that our ignored files are not here. 109 00:05:18,900 --> 00:05:22,600 The node module and also the configuration file, 110 00:05:22,600 --> 00:05:25,160 so exactly the files that we really do not want 111 00:05:25,160 --> 00:05:28,184 in a repository, well, they are now 112 00:05:28,184 --> 00:05:30,860 not here just as expected. 113 00:05:30,860 --> 00:05:33,950 Now by the way, the opposite operation of push 114 00:05:33,950 --> 00:05:37,000 that we just did, is the pull operation. 115 00:05:37,000 --> 00:05:39,940 So imagine you're working on two different computers 116 00:05:39,940 --> 00:05:42,610 and want to start to work on one computer 117 00:05:42,610 --> 00:05:45,030 and then continue on the other one. 118 00:05:45,030 --> 00:05:47,770 To do that, you could push the code on one computer 119 00:05:47,770 --> 00:05:51,093 onto GitHub, and then on the other one, simply pull it. 120 00:05:52,290 --> 00:05:53,693 That would be very simple. 121 00:05:54,730 --> 00:05:57,060 The command would be almost the same, 122 00:05:57,060 --> 00:06:01,573 but instead git pull origin and then master, 123 00:06:03,263 --> 00:06:04,920 so the branch that you're currently working in. 124 00:06:04,920 --> 00:06:06,710 I'm not going to do that now, 125 00:06:06,710 --> 00:06:09,450 but instead I will create a readme file. 126 00:06:09,450 --> 00:06:11,560 That's a very standard file that 127 00:06:11,560 --> 00:06:13,693 every single repository should have. 128 00:06:15,210 --> 00:06:16,283 Let's do that here. 129 00:06:17,260 --> 00:06:20,790 The standard really is, so not a folder 130 00:06:20,790 --> 00:06:23,950 but a file, and so again, the standard is 131 00:06:23,950 --> 00:06:28,950 to call it readme.md which stands for markdown. 132 00:06:30,079 --> 00:06:32,138 This file here is written in markdown. 133 00:06:32,138 --> 00:06:35,540 Let's use this hash symbol here 134 00:06:35,540 --> 00:06:37,113 to add the main title. 135 00:06:38,650 --> 00:06:43,310 Let's call this natours application. 136 00:06:43,310 --> 00:06:45,640 Then just a paragraph below that 137 00:06:45,640 --> 00:06:50,037 built using modern technologies. 138 00:06:52,000 --> 00:06:54,033 That's not really correct, technologies. 139 00:06:56,845 --> 00:07:01,845 Node js, express, mongoDB, mongoose and friends let's say. 140 00:07:09,810 --> 00:07:14,730 All right, so let's save this now. 141 00:07:14,730 --> 00:07:17,270 And if we now say get status, you should see this 142 00:07:17,270 --> 00:07:21,690 as a new file, and indeed, here it is. 143 00:07:21,690 --> 00:07:24,800 Now actually, after closing and opening again, 144 00:07:24,800 --> 00:07:27,860 the VS code app, this part here of the application 145 00:07:27,860 --> 00:07:29,100 actually started to work. 146 00:07:29,100 --> 00:07:32,840 Now you see here, that the readme.md file 147 00:07:32,840 --> 00:07:34,870 shows up under the changes. 148 00:07:34,870 --> 00:07:38,590 It shows up here as U, which means untracked. 149 00:07:38,590 --> 00:07:40,950 Okay, and also as I mentioned before, 150 00:07:40,950 --> 00:07:43,703 you cn actually see that here in the file tree. 151 00:07:44,947 --> 00:07:46,870 It's green now, okay, 152 00:07:46,870 --> 00:07:49,513 and if you change, let's say another file, 153 00:07:51,500 --> 00:07:53,683 for example, chaining here to application. 154 00:07:54,680 --> 00:07:57,940 Get it a safe, then you see here this M, 155 00:07:57,940 --> 00:07:59,563 which stands for modified. 156 00:08:00,949 --> 00:08:02,657 It also shows up here. 157 00:08:02,657 --> 00:08:05,690 Here this bar then becomes blue because 158 00:08:05,690 --> 00:08:08,290 now it's modified, so this is a modification 159 00:08:08,290 --> 00:08:09,860 and not an insertion. 160 00:08:09,860 --> 00:08:12,950 Before it was green because I inserted code 161 00:08:12,950 --> 00:08:17,000 and now it's blue because I modified. 162 00:08:17,000 --> 00:08:18,963 Here I can also very easily go back. 163 00:08:20,800 --> 00:08:22,343 I want to discard the changes, 164 00:08:23,360 --> 00:08:25,090 and so you see it goes back 165 00:08:25,090 --> 00:08:28,533 to what it was before, okay. 166 00:08:29,854 --> 00:08:32,427 Anyway, let's now add this file to the staging area. 167 00:08:32,427 --> 00:08:36,300 Git add and then you can use tab 168 00:08:36,300 --> 00:08:37,883 to auto-complete as always. 169 00:08:38,920 --> 00:08:43,920 Then let's now commit it so git commit the message 170 00:08:44,240 --> 00:08:48,970 added a readme like this. 171 00:08:50,540 --> 00:08:54,800 And now, let's also push it to our remote branch, 172 00:08:54,800 --> 00:08:57,050 just so we can take a look at time in GitHub. 173 00:08:58,230 --> 00:09:02,823 That's git push origin master. 174 00:09:06,250 --> 00:09:07,873 Let's take a look at that here. 175 00:09:09,700 --> 00:09:13,633 And now, here you see that readme that we just created. 176 00:09:14,660 --> 00:09:16,700 You'll see also that the commit message 177 00:09:16,700 --> 00:09:20,083 for this one is added a readme one minute ago. 178 00:09:21,290 --> 00:09:23,500 All right, great. 179 00:09:23,500 --> 00:09:25,920 That's it, that's the absolute fundamentals 180 00:09:25,920 --> 00:09:27,710 that I wanted to show you in this lecture 181 00:09:27,710 --> 00:09:31,770 and the last one about git and also GitHub. 182 00:09:31,770 --> 00:09:34,830 All right, now another thing here about GitHub 183 00:09:34,830 --> 00:09:37,600 is that many times when starting on your project, 184 00:09:37,600 --> 00:09:40,127 we actually do it the other way around. 185 00:09:40,127 --> 00:09:42,630 I first create the repo on GitHub 186 00:09:42,630 --> 00:09:44,850 and already with a readme file, 187 00:09:44,850 --> 00:09:47,650 and then after that, I pull that repo 188 00:09:47,650 --> 00:09:50,178 onto my local computer, all right. 189 00:09:50,178 --> 00:09:52,520 That will then automatically connect 190 00:09:52,520 --> 00:09:55,710 the local repository with the remote one. 191 00:09:55,710 --> 00:09:58,263 That just makes the set-up a little bit easier. 192 00:09:59,120 --> 00:10:01,720 Many times, I do it just like this. 193 00:10:01,720 --> 00:10:03,770 But of course, the way I explained it 194 00:10:03,770 --> 00:10:07,090 in this video is also perfectly fine. 195 00:10:07,090 --> 00:10:10,060 Anyway, I hope that this has been useful for you. 196 00:10:10,060 --> 00:10:11,820 In the next video, we will start 197 00:10:11,820 --> 00:10:14,170 preparing the app for deployment 198 00:10:14,170 --> 00:10:16,610 because there's still some small changes that 199 00:10:16,610 --> 00:10:19,310 we need to do, so some modifications, 200 00:10:19,310 --> 00:10:22,493 in order to be really ready to deploy the application.