Repository Setup

[00:00:00]
>> Jen Kramer: So once you've got your GitHub desktop downloaded or if it's still downloading, you can continue on with this step. So for step number three, we're gonna create something called a repository. And so, a repository is a place where your files are going to be stored, kind of like a folder or a directory, okay?

[00:00:18]
So first of all, make sure you're signed into GitHub. Okay, so your screen here should look like this, okay. The next thing you're gonna do is you're gonna add a repository, there's a bunch of ways to do that. One way to do it is down here, there's a big green button that says do repository, you can open that.

[00:00:38]
There's probably one of the things up here. Yeah, the plus sign up here will give you a new repository. They all go to the same place. Choose one of those options. And you should be at GitHub slash new, okay? Your screens gonna look a tiny bit different from mine because mine says the owner is Jennifer Web, that's me.

[00:01:00]
That's gonna have your username there instead. And so, the way you're gonna wanna configure this is just like this. We're gonna make a new repository. We're gonna call it yourusername.github.io. So in my case, mine is Jenforweb.github.io. Emma, what's your username?
>> Speaker 2: Moy.
>> Jen Kramer: Moy.github.io, Ryan, what's your username?

[00:01:25]
>> Ryan: R6256.
>> Jen Kramer: R6256.github.io, okay, that is what you wanna type in right there. So, we're gonna go ahead and do that,
>> Jen Kramer: Okay, mine is gonna give me an error because I already have this repository. But you are gonna go ahead and type this in and it's gonna not give you an error cuz you don't, okay.

[00:01:51]
You're gonna go ahead and type in a description. I've said this is Jen's website on GitHub, because that's what it is. You are welcome to write your own description. You're gonna go ahead and make this a public website.
>> Jen Kramer: The private option costs money, the public option is free.

[00:02:15]
You can uncheck initialize this repository with a read me, you can go back and add one later, don't worry about it for the right now. And then go ahead and click on create repository. So in other words, what we are doing in this step is we're creating a space on GitHub for our website to go.

[00:02:36]
Okay, we're just creating a space on GitHub where our website is going to go, just go ahead and get that configured. So once you've gone ahead and created that repository up on GitHub, we're gonna set up the repository in GitHub Desktop. So what we've done now is we've created that repository somewhere out there.

[00:02:55]
That's where the website is gonna go. Now we're gonna create a repository on the computer that's in front of you. And then shockingly, we'll connect these and make them talk to each other, okay? So, we're gonna go ahead and set up this repository in the following way. There should be, in the next screen right on GitHub, after you've gone ahead and created your repository.

[00:03:19]
You click the Create a repository button, there is the screen here. So you should be able to click on that button that says, Setup in Desktop. Just go ahead and click that button. That will go ahead and put you in GitHub Desktop. And you should see an opening configuration screen just like this.

[00:03:42]
So once you went ahead and clicked on that setup and desktop button, you'll get this screen. Click on Sign into github.com. Enter your username and password and whatever else they asked for.
>> Jen Kramer: So that's where we are in the notes, we're at step four. Follow these three screenshots, that's what you should be seeing, okay?

[00:04:15]
Okay, so once you got that done, we're gonna go on here. Now that you're in GitHub Desktop, the screen should be filled out for you on the URL tab. You're gonna choose a desktop, choose the desktop for your local path, and it will create a new folder for you on the desktop.

[00:04:36]
So in other words, it's gonna ask you for your local path. Go ahead and click on your choose button here. Navigate to your desktop of your computer, select it, and GitHub is gonna go ahead and create a new folder for you. In this case, my folder will be called Jenforwebgithub.io, does that make sense?

[00:04:59]
Go on ahead and do that. So you're basically creating a folder on your desktop using this methodology. It's kinda weird, but that's okay.
>> Jen Kramer: Or as it says down at the bottom, alternatively, you can drag and drop a local repository here to add it. That would be the other thing to do.

[00:05:18]
So step five is this, that folder that GitHub just made for you on your desktop, you need to make sure it has stuff in it that you'd like to put up online, okay. That only makes sense, right? So, you have been coding a bunch of stuff over the last few days.

[00:05:36]
You wanna put some of that stuff into that GitHub folder. Now here's where things are gonna break, okay. So you created for example, a form yesterday, that form has images, it has JavaScript and it has HTML. All of that together, all of those things, the folder for your images, the folder for your JavaScript, the folder for your CSS, and the HTML file, all of that has got to get copied into your GitHub.io folder on your desktop.

[00:06:06]
Go ahead and copy it wherever you've kept it to this point. Copy it, paste it into the GitHub.io folder, okay? If you don't get all the things, you forget the images, you forget the JavaScript, you forget the CSS, guess what will happen? [SOUND] All right, it'll look weird, cuz it lost all its formatting.

[00:06:28]
It'll look weird, cuz the images aren't there. The form doesn't submit anywhere, because you don't have the JavaScript, okay? Make sure you have all the things, and you copy them all into that GitHub.io folder. So we're gonna go ahead and take a break, while you go about doing that.

[00:06:45]
Deciding what it is you wanna go ahead and post on stuff on GitHub. Just go ahead and make copies of the stuff. Leave it wherever it is right now and working. Make a copy into that GitHub folder. So, that's step five. You've gone ahead and you've gotten everything into your GitHub.io folder, whatever it is that you wanna put up online first, okay?

[00:07:07]
And so now what you're gonna do here in GitHub.io, I went ahead and took some of my form files from yesterday. And you'll notice that down here at the bottom of these files, there is this sort of area down here which has it says, summary and description. These are notes for what's called a commit that you're about to make.

[00:07:28]
So, what you're going to be doing is copying these files on up into GitHub itself out there on the Internet. And because GitHub is primarily used for tracking code and tracking the changes to code over time. It's nice to make a note about what you have done and why you decided to send these up to the server again.

[00:07:52]
So usually in this case, cuz this is the first time this stuff is going up, usually it's called something like initial commit, something like that. You can of course be more specific than that, there's a box here for description. You can write it all in, GitHub training at front of masters boot camp.

[00:08:14]
This is my forum from day four, blah, blah, blah, blah, whatever it is you wanna say. So once you're done though, once you're done going ahead and writing that note,
>> Jen Kramer: Then you're gonna click on commit to master and publish branch, two clicks, two clicks, two clicks. Very, very important, two clicks.

[00:08:44]
It should be one but it's not, if you only do one click, it won't work, ask me how I know. Okay, so commit to master and then publish branch. So let's go ahead and do that now. Once you have your note in place, you'll click on that commit and sync master button.

[00:09:10]
>> Jen Kramer: And then it might give you this, this little drop down here that says published repository. If not, there's a button up here in the upper right hand corner that says publish, going ahead and publish from that. Okay, critical to go ahead and do both. Okay, try again.

[00:09:30]
Mind blew up, I have no idea why, hopefully yours work, did yours work?
>> Speaker 4: [INAUDIBLE]
>> Jen Kramer: Yes, it looks like everything just went away, you see over there on the side, it looks like all your files disappeared. They didn't, they should have been copied up to wherever it is that you've sent them.

[00:09:55]
And so it will look like you have nothing left over here on this side, it will look like you have nothing left over here.
>> Jen Kramer: I have no idea why mine broke. If anybody has any ideas, that would be great to know, but, yeah, okay.
>> Jen Kramer: Okay, so now, once you've done that then you can go ahead and take a look at your browser window.

[00:10:24]
So we're gonna go to, in my case, Jenforwebgithub.io, all right? And if we just go there that much, you may or may not see anything at all. I actually have a file called index.html. Which just had still working on it, really cuz this is me testing stuff, okay?

[00:10:48]
If you sent up an html page called blitz says, forms.html, it would be jenforweb.github.io/form or forms.html, whatever the name of that file was. I'm getting a 404 because I had an error sending up my stuff. Emma, I'm sure yours work, what's your address here.
>> Emma: So mine is, emmay.github.io, and then I put mine in a folder called abduction.

[00:11:23]
>> Jen Kramer: Okay, slash abduction. All right, uh-huh.
>> Emma: And then that's it.
>> Jen Kramer: Okay, so this is Emma's page, and it works. So you can see her address here is emmay.github.io, and she put everything into a folder called abduction. So that abduction folder has got the CSS folder, it's got the JavaScript folder, it's got our HTML in it.

[00:11:49]
It's got all of her images in it. And she called her web page here, she called it index.html. And so, it will show up just like that with just the folder name after GitHub.io. You can of course also put in index.html. The web server is configured such that it looks for a file called index.HTML.

[00:12:12]
If it finds one, it'll display it for you without you having to type that in.
>> Emma: Do you like the font that I found, [INAUDIBLE]
>> Jen Kramer: I love the font that you found, that's very appropriate. Your font looks fabulous.