1 00:00:08,060 --> 00:00:12,330 So, let's say you've come up with a pretty nice site. 2 00:00:12,330 --> 00:00:13,935 I've got one right here. 3 00:00:13,935 --> 00:00:16,950 I'm going to click on my index.html file, 4 00:00:16,950 --> 00:00:19,005 and I've got some images in it. 5 00:00:19,005 --> 00:00:21,630 I have a special file called CSS that 6 00:00:21,630 --> 00:00:24,255 you might not be familiar with yet, but that's okay. 7 00:00:24,255 --> 00:00:26,295 But let's just see what my site looks like. 8 00:00:26,295 --> 00:00:27,705 Here we go, up. 9 00:00:27,705 --> 00:00:32,100 Here is just a little page I made about me with a little bit of formatting. 10 00:00:32,100 --> 00:00:35,040 But if you check and you kind of look in the upper corner, 11 00:00:35,040 --> 00:00:38,205 you can see that this site is not live. 12 00:00:38,205 --> 00:00:41,655 The fact that it says, file colon, 13 00:00:41,655 --> 00:00:46,280 so forward, I can't share it with other people live. 14 00:00:46,280 --> 00:00:48,590 I can email them my code, 15 00:00:48,590 --> 00:00:50,270 I could say to somebody," Oh look, 16 00:00:50,270 --> 00:00:52,730 I made a web page," and then I could send them 17 00:00:52,730 --> 00:00:56,120 this file and all the images and everything like that, 18 00:00:56,120 --> 00:00:57,685 but that's kind of a pain. 19 00:00:57,685 --> 00:01:02,825 So, let's try to make this site go live on my GitHub Pages account. 20 00:01:02,825 --> 00:01:04,580 So, go back here, 21 00:01:04,580 --> 00:01:08,570 to my GitHub account which if you haven't created yet, that's okay. 22 00:01:08,570 --> 00:01:10,100 I've got another video, 23 00:01:10,100 --> 00:01:13,460 Go create your account and come back here and meet up with us. 24 00:01:13,460 --> 00:01:14,930 But other than that, 25 00:01:14,930 --> 00:01:17,690 I'm going to make my first live account. 26 00:01:17,690 --> 00:01:23,815 Once again, I'm going to go up and do a plus for a new repository. 27 00:01:23,815 --> 00:01:27,450 Basically, consider a new folder full of code. 28 00:01:27,490 --> 00:01:33,695 Last time I needed to be very careful with my repository name, not this time. 29 00:01:33,695 --> 00:01:35,930 I'm just going to call this one, 30 00:01:35,930 --> 00:01:44,665 let's say sample, I try very hard to keep it to all lowercase. 31 00:01:44,665 --> 00:01:47,680 You can include the little like dash, 32 00:01:47,680 --> 00:01:49,570 but no special characters. 33 00:01:49,570 --> 00:01:51,580 So, I'm just going to leave it as sample. 34 00:01:51,580 --> 00:01:58,615 Very important, I'm going to click on," Initialize this repository with a Read Me, 35 00:01:58,615 --> 00:02:00,850 and I click on that, 36 00:02:00,850 --> 00:02:04,340 and I'm going to click on "Create repository." 37 00:02:04,340 --> 00:02:09,610 So, GitHub right now is creating a new site for me to upload my code. 38 00:02:09,610 --> 00:02:12,310 Now, people who use GitHub for, 39 00:02:12,310 --> 00:02:14,250 I'm going to say like real, 40 00:02:14,250 --> 00:02:16,360 are actually doing a lot of things from 41 00:02:16,360 --> 00:02:19,630 command lines and they have to memorize a lot of stuff. 42 00:02:19,630 --> 00:02:21,130 We're not doing that. 43 00:02:21,130 --> 00:02:24,995 We're just using GitHub Pages to host our code. 44 00:02:24,995 --> 00:02:28,900 So, let's click on "Upload files." 45 00:02:28,900 --> 00:02:31,485 Now, here's a tricky part, 46 00:02:31,485 --> 00:02:34,830 if I were to click on "Choose your files," 47 00:02:34,830 --> 00:02:38,930 I could do that and I could go through and pick, 48 00:02:38,930 --> 00:02:41,860 well, I need this file and that one, 49 00:02:41,860 --> 00:02:44,840 but it won't let me upload entire folders. 50 00:02:44,840 --> 00:02:48,755 See if I click on CSS and I click on open, it's like, "Oh, 51 00:02:48,755 --> 00:02:50,210 is this the file you want?", 52 00:02:50,210 --> 00:02:53,915 I don't want this, I want everything, not just files. 53 00:02:53,915 --> 00:02:55,420 So, I click on "Add". 54 00:02:55,420 --> 00:02:57,525 What I'm going to do is go over here, 55 00:02:57,525 --> 00:03:01,600 and I'm just going to go back up, one, 56 00:03:02,880 --> 00:03:08,780 and I'm just going to drag this whole folder over all at once, 57 00:03:08,780 --> 00:03:13,630 and this is going to let me upload as many files as I want. 58 00:03:13,630 --> 00:03:18,205 The next mistake I make all the time is that I forget to go 59 00:03:18,205 --> 00:03:23,930 all the way down to the bottom and say," Commit changes". 60 00:03:24,740 --> 00:03:31,795 So, this is the first step out of two steps of making your site go live. 61 00:03:31,795 --> 00:03:35,185 The first step is just to upload your files. 62 00:03:35,185 --> 00:03:38,300 Again, this may take a few minutes to complete. 63 00:03:38,300 --> 00:03:40,500 So, while that's going on, 64 00:03:40,500 --> 00:03:44,250 I'm going to go up, up there and then I'm going up. 65 00:03:44,250 --> 00:03:46,370 So, what I'm going to click on now is, 66 00:03:46,370 --> 00:03:51,265 I'm going to go up and click on "Settings." All right. 67 00:03:51,265 --> 00:03:54,830 Now, what I need to do is I need to say, "Hey, 68 00:03:54,830 --> 00:03:56,930 if somebody wants to see my site, 69 00:03:56,930 --> 00:03:59,030 I don't want them to see my code. 70 00:03:59,030 --> 00:04:01,220 I want them to see my actual page." 71 00:04:01,220 --> 00:04:03,290 So, I'm going to go back down here, 72 00:04:03,290 --> 00:04:06,210 and I'm going to scroll down, 73 00:04:06,460 --> 00:04:10,090 scroll down on this mouse, 74 00:04:10,090 --> 00:04:15,770 and what I'm looking for is a site that says, "GitHub pages." 75 00:04:15,770 --> 00:04:24,055 Go to none and choose master branch and save. All right. 76 00:04:24,055 --> 00:04:26,930 You never really know if it worked or not. 77 00:04:26,930 --> 00:04:28,985 So, I'm going to go back down again, 78 00:04:28,985 --> 00:04:31,225 click over here and go back down, 79 00:04:31,225 --> 00:04:34,425 and if I go down to GitHub pages, it will now tell me, 80 00:04:34,425 --> 00:04:38,910 "Hey, your code is now right here". 81 00:04:38,910 --> 00:04:42,435 So, I'm going to click on this, 82 00:04:42,435 --> 00:04:44,990 and it's not uncommon for to say, hey, 83 00:04:44,990 --> 00:04:47,840 you don't have anything yet or something like that. 84 00:04:47,840 --> 00:04:49,700 So, what I'm going to do is, 85 00:04:49,700 --> 00:04:51,815 I'm going to go back to my code and say, "Okay". 86 00:04:51,815 --> 00:04:54,110 What was the name of that folder I dragged up? 87 00:04:54,110 --> 00:04:56,340 Oh it was sampler, 88 00:04:57,680 --> 00:05:00,390 and what was the name of my file? 89 00:05:00,390 --> 00:05:04,815 Hopefully, it was index.html and it is, great. 90 00:05:04,815 --> 00:05:07,570 I'm going to go right here, 91 00:05:08,630 --> 00:05:11,115 and now when I click, 92 00:05:11,115 --> 00:05:12,675 I got a 404 error. 93 00:05:12,675 --> 00:05:14,210 Don't worry, that's going to happen a lot. 94 00:05:14,210 --> 00:05:15,335 First thing to check is, 95 00:05:15,335 --> 00:05:16,670 did you put in a typo? 96 00:05:16,670 --> 00:05:19,655 Yes I did, I wrote sample instead of sampler. 97 00:05:19,655 --> 00:05:22,380 So, let's put that r in there. 98 00:05:22,460 --> 00:05:26,935 Now, I'm going to hit enter and there's my site. All right. 99 00:05:26,935 --> 00:05:28,095 So, what you can do, 100 00:05:28,095 --> 00:05:32,180 the two steps for creating this GitHub account is to upload 101 00:05:32,180 --> 00:05:38,015 your file and then change that kind of link for GitHub Pages to turn it on. 102 00:05:38,015 --> 00:05:39,410 Once you do that, 103 00:05:39,410 --> 00:05:41,555 you can upload as many things as you want. 104 00:05:41,555 --> 00:05:44,345 I am going to do one more thing with you real quick though. 105 00:05:44,345 --> 00:05:47,280 I'm going to go back to my GitHub account 106 00:05:47,630 --> 00:05:52,290 and I'm going to do this one more time but slightly different. 107 00:05:52,290 --> 00:05:57,100 I want to go to github.com. 108 00:05:57,660 --> 00:06:01,105 I'm going to make one more repository. 109 00:06:01,105 --> 00:06:03,520 I'm going to call this one, 110 00:06:03,780 --> 00:06:09,475 sample two, and this time, 111 00:06:09,475 --> 00:06:13,385 I'm going to forget and I'm not going to click on this Read Me. 112 00:06:13,385 --> 00:06:16,390 We'll click on the repository. 113 00:06:17,090 --> 00:06:23,035 Oh! Well, now there's no place for me to click on that upload files, 114 00:06:23,035 --> 00:06:25,345 and you feel kind of stuck. 115 00:06:25,345 --> 00:06:30,945 If you forget, just scroll right up to the ReadMe link on the page, 116 00:06:30,945 --> 00:06:35,255 and you click on it and I'm actually creates the ReadMe. 117 00:06:35,255 --> 00:06:37,860 It going to go down. 118 00:06:38,750 --> 00:06:42,005 Just so you know, commit new file is 119 00:06:42,005 --> 00:06:45,260 the equivalent of save files for what we do in our desktop. 120 00:06:45,260 --> 00:06:47,585 So now, I can upload files. 121 00:06:47,585 --> 00:06:49,280 I'm going to do it one more time to show you 122 00:06:49,280 --> 00:06:52,805 another probably easier way. I'm going to go back here. 123 00:06:52,805 --> 00:06:55,910 Before I dragged the entire sampler folder, 124 00:06:55,910 --> 00:07:01,760 this time I'm just going to grab here. 125 00:07:01,760 --> 00:07:03,840 They're all uploading. 126 00:07:05,260 --> 00:07:09,549 I'm going to click on "Commit Changes." 127 00:07:09,800 --> 00:07:12,105 While this is happening, 128 00:07:12,105 --> 00:07:14,595 I want you to think," What was that second step? 129 00:07:14,595 --> 00:07:17,420 What was that next step she said I had to do?" 130 00:07:17,420 --> 00:07:21,460 That step is to go into settings and add the GitHub Pages. 131 00:07:21,460 --> 00:07:23,380 So, let's go up to settings. 132 00:07:23,380 --> 00:07:26,380 Up, it's going to, right here. 133 00:07:26,930 --> 00:07:37,395 Scroll down at Master branch and save, 134 00:07:37,395 --> 00:07:40,400 and then since I want to be a little lazy, 135 00:07:40,400 --> 00:07:42,140 I'm just going to scroll down here again, 136 00:07:42,140 --> 00:07:45,365 and be like" Oh great, here's the link to my site". 137 00:07:45,365 --> 00:07:50,220 I'm going to click on it. Again, when you get the 404 error, 138 00:07:50,220 --> 00:07:52,940 there's usually two reasons: either you spelled 139 00:07:52,940 --> 00:07:55,920 something wrong which isn't the case here because we clicked on it, 140 00:07:55,920 --> 00:07:57,395 we didn't type anything in. 141 00:07:57,395 --> 00:08:00,590 Or you need to give GitHub a few more minutes to 142 00:08:00,590 --> 00:08:04,020 upload everything or the third one is sometimes, 143 00:08:04,020 --> 00:08:07,160 I'm not exactly sure why, but sometimes, 144 00:08:07,160 --> 00:08:11,135 GitHub seems almost forget to look for index.html file. 145 00:08:11,135 --> 00:08:14,380 So, I'll hit "Enter," and there we go. 146 00:08:14,380 --> 00:08:18,200 So, GitHub Pages is a great free way for you to host 147 00:08:18,200 --> 00:08:20,120 your code and share it with 148 00:08:20,120 --> 00:08:24,600 everyone who you think will be impressed with your incredible work.