5.3 Sample site setup - Video Tutorials & Practice Problems

<v Michael>Now that we've gotten an overview of CSS</v> and given a broader context about where it came from and the role it plays in the modern web, let's take a look at a concrete example. We're gonna start with the sample site that we'll be developing throughout the rest of this tutorial. We'll begin by making a directory for our sample application. Let's take a look at this here. Use the make directory command with the -p flag. This is something that was covered in 'Learn Enough HTML to Be Dangerous' and 'Learn Enough Git to Be Dangerous'. So these steps, if they don't look familiar, are the kind of thing that you can review in those tutorials. So we'll start with the, make your -p. What this does is it creates any intermediate directories as necessary. In particular I'm gonna use a repositories or repos directory. If you don't have this then this command will automatically create it. <v Lee>Also, you can pronounce that as repos.</v> <v Michael>Yeah. People just say repos.</v> In fact, you probably should say repos. (Michael and Lee chuckling) I don't know why I say repos. <v Lee>Just wanted to throw that in there, Michael.</v> <v Michael>I'm just, I'm a little idiosyncratic.</v> Yeah. I should re-standardize on that. Because it's repositories, but people do say repos. <v Lee>Repos.</v> <v Michael>And I ought to as well.</v> Okay, so make your -p repos/ and then we're going to use a directory name with the, basically the full address of the site we're going to make. So it's going to be like this. Let me show you the end of it. It's gonna live at GitHub pages, which by default, is at github.io. And then there's a username at the beginning of it. So in the case of of Lee's username, what's your username again, Lee? <v Lee>It's Anjin, which I took</v> from the classic James Clavell novel, 'Shōgun'. Don't ask why. I just, in college, I read it and liked the book. And, you know, it was early on in the internet when it was nice to have a short username. So I started using it in a bunch of places and to play Counterstrike online and just kind of stuck with it. And I signed up for GitHub and there it is. <v Michael>Right.</v> So this is what Lee would do. He would do anjin.github.io. My GitHub username is mhartl. And this is the kind of thing where you'll just have to customize it based on your GitHub username. And what this is, is basically the root directory for your GitHub pages. And the reason we're doing it like this, even though you can serve GitHub pages out of a sub directory, is in order to get all of the file inclusion to work later on in this tutorial. In real life, if you wanted to do this kind of website, you would probably want to use a custom domain which would let you use a subdirectory. So something like example.com. And that's a separate tutorial but for the purposes of this tutorial, we're gonna use this default GitHub pages URL. So it's kind of unusual actually to have this, the dots in a directory but this is what it looks like. And then I wanna cd into it. See where I am. Okay, so the first step in making a website is to make an index HTML page. Something that's covered in 'Learn Enough HTML to Be Dangerous'. And my favorite way to do this is with a touch command. And then you can open this in your favorite text editor. I'll use Sublime. And then open it up. Right, so it's blank but default touch just creates an empty index file. And in order to get started here, we're going to just have you copy and paste an initial HTML file. So we're assuming at this point that you basically know HTML. And this is not the kind of thing that you wanna type in. It's too much of a pain. So just copy this. Paste it in. And I'll make it a little smaller. Save it and then let's take a look at it. There are various ways to open HTML files and my favorite in OS 10 or I guess it's Mac OS now. My favorite in Mac OS, is to just use the open command. In this case, it'll use Safari which is the default browser on this system. You can also do something like this. If you open dot, this'll open the directory. And if you double click on it, oops, like this. There we go. It does the same thing. Figuring out how to do that sort of thing is a a classic hallmark of technical sophistication. Just being able to figure out how to open a HTML file on your system. There is one other example though I wanna show you that's a little tricky if you're using the Cloud IDE. This is the sort of thing you ought to be able to figure out but just for those who are using the Cloud IDE, it might take you a bit to get all the details. So, I just wanna make it a little easier. So we can open this up here, the text editor, and I'm just gonna paste in the same thing. So if you're using Cloud IDE, you wanna run right here, and that starts up this web browser. And then you can click on this here. And then say open and there it is. <v Lee>So it might not look like much right now</v> but we'll be taking this initial page, which is pretty ugly and adding to it and manipulating it and changing it, to get to something that actually looks pretty nice. <v Michael>Because this tutorial emphasizes</v> good development of practices, in particular deploying as early as possible and also making sure to track our changes, we're gonna put this project under version controls, git, right away. So let's do that. These are the sort of steps that should be familiar to you if you followed 'Learn Enough Git to Be Dangerous' and 'Learn Enough HTML to Be Dangerous', but it's always good to review. So we're gonna initialize the repository. Getting it. Add all the files. In this case, there's just one file, but this way you don't have to think about it. And then we'll make our commit message. And now to put this on the remote repository and serve it up as GitHub pages, we need to create a repo at GitHub. Let's do that New repository. And the name is just your username.github.io. And then we can put it in a description. I'll just say a sample website. And you can make it private if you want, if you have an account that allows private repos but this is the sort of thing that's perfectly fine to make it public. It's a website. So pretty much everything is already going to be publicly available anyway. So let's create it. And now I'll do this. I'll do git remote add, this here. And I am gonna push it up. We, we normally would. So that's this here. Let's just do it. Copy it and paste it. So this is, pushes dash upstream. Origin master. Origin is GitHub in this case, and then master is the branch. But since we're going to be serving this from GitHub pages, we're actually going to be working on the default branch for pages, which is called GH pages. So let's check out a new branch. Git checkout -b gh-pages. and then push that up as well. Just for completeness, let's double check that that worked. Go to, the URL is username.github. And there it is. You'll note actually, I didn't need to include index at HTML. It's served up by default, but should work anyway. There we go. So you can see it's the same. <v Lee>Our beautiful test page.</v> <v Michael>Yeah, this is wonderful test page.</v> It's a good way to start though.