Deploying to GitHub Pages

[00:00:00]
>> Jen Kramer: All right, so I'm gonna go to Github.
>> Jen Kramer: And if this is new to you, click the Sign Up button and go sign up for it. If you already have a Github account, then you can click on Sign In and log in to it.
>> Jen Kramer: All right, so you're here inside of GitHub.

[00:00:26]
You've created your account, you've logged in. The next thing that you need to do is create a repository. So we're gonna go to github.com/new. So I'm gonna go to github.com/new or click the big green New button right here.
>> Jen Kramer: And at that point you are going to, in the repository name field, enter your username, whatever the username is that you created.github.io.

[00:00:55]
So I'm Jennifer web on GitHub. So I'm gonna say Jenniferweb.github.io. So I would do something like Jen4web.github.io. And it says that that already exists on this account because it already does. It won't say that for you [LAUGH] all right? So try creating that repository name with your own username as the first part of it.

[00:01:20]
All right, and then down here at the bottom, you feel free to do any of the things that you wanna do. And then you're going to create the repository, okay? So you should wind up with a screen that looks like this.
>> Jen Kramer: And I think that's all we have to do at that point.

[00:01:42]
Now we're gonna download Github Desktop. This is at desktop.github.io. There should be a button here to Download Now, if you've never done this before, if you have, you're like me.
>> Jen Kramer: Then you can open it up.
>> Jen Kramer: Okay, then we're gonna go to set up the repository in GitHub Desktop.

[00:02:10]
So on the screen we were just on, there is a button right here that says, Set up in Desktop. So we are gonna click that button right here.
>> Jen Kramer: And we're gonna open it up in Github Desktop. And it should do these things for you.
>> Jen Kramer: So it's going to say, this is the repo name.

[00:02:32]
This is what's on GitHub itself. That's the thing we just created. And then it's gonna ask, where does this live on your computer. And so this is on my desktop that there should be a folder called gen4weblive.github.io. Great, we're gonna say clone. And this is what it's gonna look like here, okay?

[00:02:53]
And I will point out that on your desktop.
>> Jen Kramer: You now have a folder here called jen4web. In my case, jen4web-live.github.io, it's right here, and there's nothing in it, okay? And if you've never used this product before, there may be some of these additional configuration steps that you're gonna have to go through to do the thing that I just did.

[00:03:19]
This is the screenshot of the thing that I just did, okay. So then you wanna make sure that your GitHub folder has all of the things in it that you want to post online. So what we're going to do is we're going to look at jen4web, dash, live.github.io, has nothing in it, and I have a folder here called website that has all this stuff in it, right?

[00:03:45]
This is the stuff I wanna post online. So I'm just gonna put it into that folder, okay? So that's the stuff that I wanna post online, and we can get rid of the website folder, bye.
>> Jen Kramer: Okay, and as it says here, make sure that one file, probably your home page is called index.HTML.

[00:04:11]
I really emphasize that your HTML files should be called index.HTML. I emphasize it again here. All right, and then if we look at our GitHub Desktop, you'll notice that something changed. Here's all of the things, so here's our styles and our images and our index. All of that is all listed here.

[00:04:34]
>> Jen Kramer: Which is exactly what we wanna see. As it says, you can make a commit note for each file in the lower left hand corner. A commit note is very useful thing. As you are sending your changes up to GitHub, you can make notes about what exactly changed between this file and the ones, perhaps things that you've sent up to GitHub before.

[00:04:55]
That's what a commit note is. In this case, this is the first time I'm setting anything up. So I'm just gonna call this initial commit, because it's pretty, pretty basic. But we could say more about it. Perhaps you've been committing through each chapter of this course, you could say just the about part, just the projects part after I assembled it, after I installed the light dark switch.

[00:05:21]
And then we're gonna click on commit six files to me.
>> Speaker 2: As a side note, if anybody is new to Git or wants to learn more about Git, Zachary Renko has a Git in-depth course on our platform.
>> Jen Kramer: Amazing.
>> Speaker 2: We also have a course from the Primogen that goes a little deeper.

[00:05:37]
>> Jen Kramer: Yes, because there's like so much to know about this and we're doing the simplest version that I know how right now. But if you really wanna dig into this and how it works, there are other courses on the front end master's platform for this. All right, so once we've committed it, then we are going to publish and the publish button is up here.

[00:05:58]
You can either click up here in the upper right corner, or you can click right here where it says Publish Branch, bye, bye. And off it goes.
>> Jen Kramer: Okay, so we did that. We clicked commit to master, and we click the Publish branch button. Then we should be able to go into our browser window.

[00:06:21]
And I think we're missing a step here. But let us take a look here at the window that I have at GitHub, it's Jeni4web-live.github.io. If I refresh this page, so you should have files here, and if you do, then you are good to go. Now, if you called your repository jen4web, that's my username.github.io, what will happen is this will automatically turn into a place for GitHub Pages to work.

[00:06:52]
And all I need to do now is enter a new tab and I can type in jen4web.github.io and my default index web page should pull up here. This one says still working because I used this for another project. [LAUGH] it actually isn't showing right here. And I didn't use this for the steps that I just showed you anyway.

[00:07:15]
So that is how that would work if you've used your username.github.io. And if you did not use username.github.io, here are the extra steps you're going to need to take right now in order to get this to work and get up to Github pages. So we are going to go to Settings.

[00:07:36]
And we are going to change the name of this repository to just jen4web-live. So just make that edit and then say rename, and then it should rename. So there we go, there's my repo, it's called jen4web-live. And that is the first thing that we need to do. The other thing we need to do also in settings.

[00:08:02]
If we go to pages, we are going to need to now deploy this to GitHub Pages. And here under Branch, we're going to change this to main and then we're going to say Save.
>> Jen Kramer: All right, so that sets it up as GitHub pages. So after you give us a few minutes, now, as I said, up to fifteen minutes, looking at your repo page here, I'm in settings, and we're just hitting the refresh button.

[00:08:38]
You will see at the top of the page that it'll come up and say your site is live, and it will give you the website address for where your site is live. All you have to do now is click on visit the site, and you should see the amazing, fabulous website that you just built right here.

[00:08:58]
And of course, it should be responsive. You should be able to make it small. Look at that, so cool. And your light and dark switch should still work. And everything else you've all now copied it all over from CodePen. You put it into VSCode and you have deployed all of your work now into GitHub and made a display on GitHub pages.

[00:09:22]
And that's pretty much it. That's how it's all done. Congratulations, yayy.
>> [APPLAUSE]