Getting Started with CSS, v2

GitHub Pages Overview

Jen Kramer
AnnieCannons
Getting Started with CSS, v2

Lesson Description

The "GitHub Pages Overview" Lesson is part of the full, Getting Started with CSS, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Jen walks through how to use GitHub and GitHub Pages to take the website live. She also covers setting up a GitHub account, creating a repository, and configuring GitHub Desktop.

Preview
Close

Transcript from the "GitHub Pages Overview" Lesson

[00:00:00]
>> Jen Kramer: So, let's talk about the next step. Once you have all of your website on the computer that's there in front of you, there are aproximately 5 million different ways to get this up and online. And some ways are better than others. So, many of you who are watching this are already website professionals You probably already have all of the things installed on the command line in order to send this on up to GitHub.

[00:00:28]
And if you have all of that installed, you should ignore me and just do that. There's a bunch of other ways that you can get this stuff online. For example, you can use the NetLify service. They have a whole way of taking files from your computer and getting it up on their service and displaying on their website.

[00:00:47]
If you prefer that way of doing things, you should do that. And by the way, there are more ways than that. So all those ways, whatever you like, go ahead and follow that. If this is brand new to you though, You've never done this kind of work before.

[00:01:02]
I am going to walk you through how to do this using GitHub, which is an industry-standard place that stores your programming and your work. And we're going to then put it up on GitHub Pages, and we're gonna do this using the GitHub Desktop application. None of this is pretty standard for a professional web developer, but it works great for all the rest of us.

[00:01:28]
Okay, so you do not have to follow my instructions on this part. This is probably one of the easier ways to get something up online if you do not have a workflow that you already use to get your info Information up on a website. All right, so at this point, then, if we take a look at my website here, for the course, we have done the first part of this, which is we've moved this all from CodePen to VS code.

[00:02:00]
And then the next things that we're going to do, I'm going to walk you through these steps first, just to give you the overview of how this is done. So if you don't have an account on GitHub yet, you can go sign up for one. They're free, so you'll sign up for the GitHub account.

[00:02:17]
And while you're there in GitHub. You're gonna make what's called a repository. This is basically a location where you store code, and this one is going to have a name, something like your username dot github dot io, I am aware that I think GitHub has changed some of these rules a little bit.

[00:02:35]
You can make any repository into the one that displays on GitHub Pages. But I think this name still works, because you know what it is. This is what's going to display on GitHub pages. So we're going to walk through exactly how to do that. You're going to download Github desktop.

[00:02:53]
Github desktop is again, a free product. You just install it on your computer. We'll configure. Github desktop to point to that repository that you just created on GitHub, I'll walk you through all of these screens. So we set all of that up,we'll point it to our local path,and then we are going to make the magic happen.

[00:03:19]
Which will transfer the files that are on the computer in front of you into your GitHub repo,
>> Jen Kramer: And publish it, and then you'll look in your browser window. Very important, it's gonna take a few minutes from when you upload things to GitHub to have them display in GitHub page.

[00:03:39]
always a bit of a lag. It can be up to, like, 15 minutes. So this is very commonly, one of the points where students panic. They've put things up on GitHub. It doesn't show up on GitHub Pages, and everybody freaks out because it's not displaying the way that they think.

[00:03:56]
You just have to wait, just chill, give it 15 minutes. Go have a walk, get a drink of water, you're going to be fine. And then take a look, and you'll see what happens. And then I've got a couple of tips for what you might do after that in terms of making additional changes to the site.

[00:04:14]
Okay, so that's the broad overview of about what we're about to walk through.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now