10.4 Other pages, other folders - Video Tutorials & Practice Problems

<v Speaker 1>Now that we've had a chance</v> to style our homepage a bit, it's time finally to add another page to our site. And the example we're gonna use will be the beginnings of a photo gallery. We actually won't be completing that gallery in this tutorial. That's going to be in Learn Enough JavaScript to Be Dangerous, but it will give us a good way to demonstrate how to add an extra page. So we're gonna start with doing it a simple way, but that isn't the preferred way in general. Let's take a look at the state of things. So this is our directory. And remember we have index.html here. That's this here, it's got content. And then this front matter, we could just start with a hello (keyboard typing) And we can access this page by going to remember we can do index.html like this. We can type it all in, but we don't have to we can also do gallery.html. And so that actually works but this is not the preferred way to have a URL. Is it Lee? <v Lee>It's a little ugly.</v> And we also have none of our site Chrome too. <v Speaker 1>Right, well so we haven't,</v> that's like that's the front matter issue. <v Lee>Yeah.</v> <v Speaker 1>But, just in terms of the URL</v> like URLs are part of the user interface for the site. And so exposing this HTML is really revealing unnecessarily. Like the technology that we're using. In this case it's a static page. Sometimes you'll see like a dot PHP or dot ASP or something like that. That's revealing that is using the PHP language or Microsoft active server pages or whatever. <v Lee>Yeah.</v> <v Speaker 1>But so it's a better convention to</v> to get a URL like this, where it just looks like local host 4,000 or you know, example.com/gallery. And the way we're gonna do it is we're gonna have an index page inside a directory called gallery. So let's do that. (keyboard typing) So this is a little confusing potentially cuz we've got two files now called index.html. But the context is is what lets us tell the difference between them. And this is the universal convention that the index page is the default for whatever the directory is whether it's slash or slash gallery. So take a look now. This ought to work if I refresh this. Yeah. But as Lee mentioned, we don't have any of the layout going on here. So, you can see here I'm selecting this one cuz it's one that's inside the gallery. It's empty right now. So let's add in the same default layout like this and the text we're going to put in for now is a promise for the future that this is eventually gonna be a three column page. (keyboard typing) Let's refresh that. Well alright, now we've got our layout but I don't see the text. What is going on here, Lee? <v Lee>Well the problem that we've got</v> is that the text is up underneath the header. So when we fix position the header that takes it out of the flow of the page. So the browser <v Speaker 1>Where's that in the CSS?</v> <v Lee>The header?</v> <v Speaker 1>Yeah.</v> <v Lee>The header class.</v> There it is <v Speaker 1>Right here.</v> Position fixed. <v Lee>Right so that takes it out of the flow of the page.</v> So the browser's drawing the header on top of our content. so if you were to remove that position fixed you would actually pop everything down. <v Speaker 1>Ah, there it is.</v> I see <v Lee>So that's not ideal.</v> You don't want to have every page be hidden up underneath the top. <v Speaker 1>And we can actually see from looking</v> at the page source that it's also there. <v Lee>Yeah. But the real point of doing this is</v> we have now the site Chrome on a new page you know we didn't have to do anything for this. All we did was include that front matter that says layout default up at the top and boom we've got the header and footer. <v Speaker 1>That's great, yeah</v> So this is why we want templates because here we've got the head, header, content, footer. So what's going on here is that Jekyll is seeing this here as I'm a three column page and that is now the content instead of all of this stuff here on the index page. <v Lee>Right.</v> But you can see from our new little gallery page that there's an additional problem or not problem but just something is not ideal, which is that the footer, which should be at the bottom of the screen or which you'd want at the bottom of the screen is crammed way up against the header. <v Speaker 1>Right.</v> <v Lee>And then there's just this blank space underneath,</v> which is <v Speaker 1>Yeah there's a big, clear area here.</v> <v Lee>Yeah, which is actually a whole lot of nothing.</v> It's it's actually outside of the body tag in our HTML. So what would be better is if this was at the bottom of the page, but you also wanna make it so that when you're on the homepage, which has a lot of content. If we go back to that <v Speaker 1>Right, we can actually click on this link.</v> It'll work. <v Lee>Right.</v> We don't want to make changes to this where the footer is gonna be showing up on this page and covering up the hero we want a footer that when there's content it moves down, But when there's no content it just sticks to the bottom of the browser window. <v Speaker 1>Yeah.</v> <v Lee>And so we're gonna use a pretty cool technique</v> that we discussed using on the home call out. We're gonna use flex box to push that footer all the way down to the bottom of the page. <v Speaker 1>Cool.</v> And that's the subject of an entire chapter because Flexbox can get pretty complicated right? <v Lee>It is very complicated,</v> but we can use the same technique for making this page to do any number of pages. Like if we wanted an about page it would be the exact same process. We would make a directory called about and put an index in there and add the front matter and our site would build on that page, just like this. <v Speaker 1>Cool.</v> All right let's make a commit and push this up. So we need to add everything. Remember we can't do GIT commit-am cuz it won't include these. Add everything. Here we go. (keyboard typing) And what do we wanna say here? Use the site template and style the homepage? (keyboard typing) We did other stuff too where we added a page, but it's okay. Let's take a look. Remember takes a little bit sometimes to build. So just give it a few seconds and refresh it should work. And there we go takes a couple minutes but now it is on the live web and things are looking good. Even double check /gallery doesn't look good yet but it will eventually. And the URL looks nice and everything. All right. Let's take care of this rather unattractive page in the next chapter.