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.