9.4 The layout file - Video Tutorials & Practice Problems

<v Instructor>We'll start</v> by making a very rudimentary page layout in Jekyll. This is not anything close to the final form but it will get us started with building the site dynamically from different pieces. In this case, it'll be just one piece. So let's make that more concrete by actually doing the example. The convention in Jekyll is to use a directory called _layouts. Gonna make it like this, and then we're gonna put our layouts in this directory. We're gonna start with just making a default layout based on our current index. So I'm gonna copy this here. Copy it into the layouts directory and we'll name it, default.html. We open this up, we can see what it looks like. We've got layouts here, with default, and then the site. It's a little confusing sometimes to see things with the same name, but everything in _site is being generated by the server here. So it's usually safe to ignore this directory, just in terms of looking at its contents. All right, so now we're gonna a little magic. This is what Jekyll is great at. (chuckles) So let's open up default. So notice that it's the same, right? We just copied it. And so now what we're going to do is replace everything in this file. Everything in index.html that was default. (chuckles) Here we go. Replace everything with some front matter. We mentioned this in the last section. So this is what the front matter looks like and it's in a format called YAML, and we're just gonna say that we're gonna use the default layout. <v Lee>Yeah, just to make a note.</v> We're editing index, not default. <v Instructor>Right.</v> You can see I accidentally highlighted the stuff here, but then moved over here. So this front matter is set apart from the rest of the file using these triple dashes. <v ->Oh, important note.</v> <v ->Yeah?</v> <v Lee>The first ones have to be on line one.</v> <v ->Oh, they do so that they-</v> <v ->Yeah.</v> <v Instructor>You can't do this?</v> Oops. You can't do that? <v ->I think that breaks it.</v> <v Instructor>Okay, well you know, we can test that.</v> <v ->Yeah, we can test it.</v> <v ->Check it out.</v> <v ->I remember correctly that-</v> <v ->Okay, so when-</v> <v ->that causes problems.</v> <v ->Yes.</v> All right, so what this is gonna do here is it's gonna cause Jekyll to build the index file using default as a layout. Now, we'll see in the future parts of this tutorial that will make the layout to be sort of more abstract. We'll be able to, you know, have repeated elements like the header and footer and that sort of thing. But right now, it's just a proof of concept. So we're just gonna pull in the full index.html. So let's take a look at it. So remember it's running at localhost:4000 and there it goes. So we can actually show that that's doing something. Like just get rid of this. It should be empty. Yeah, so this is empty now. We do this here and it pulls it in, and now we can test that thing that Lee mentioned. I would guess they fixed it, but let's take a look. What do you think? Taking bets? <v ->Oh...</v> <v ->Oh, you were right!</v> <v ->Yeah.</v> <v ->It breaks it.</v> So it's important to have it like that. (Lee laughing) <v ->What about spaces?</v> Do spaces break it, yes. <v Lee>Pretty sure that breaks it too. (chuckles)</v> Yeah, so it- <v ->So it has to be</v> just like this. <v ->One of those fiddly things.</v> <v Instructor>Nice.</v> <v Lee>It's worth noting here</v> that you need to have that index.html that we're referencing because when you're going to a website, the file that the browser is looking for in the directory of the website is always called index.html. <v Instructor>Right, you'll notice,</v> we don't actually type it here. We could though, I think. <v ->Exactly.</v> <v Instructor>Does this work?</v> <v ->Yeah.</v> <v ->Yeah.</v> Right, so we don't actually want to though, in general. It's a little prettier to do this. That. So one of the cool things about this, like you can really start to see that this is gonna be a real site because it's localhost:4000. But this could be a custom domain, right? It could be example.com. So this is a a big step toward actually having a real website. <v Lee>Exactly.</v> So now, if we look at this. What's happening is all of our content that's on default.html. There's nothing dynamic in there yet. Nothing is getting- <v ->Right.</v> <v ->Built by Jekyll.</v> Nothing is. No magic is happening yet. It's just getting piped through and just thrown directly into index.html. You can imagine it as just being inserted after the second set of three dashes. <v ->Right.</v> <v ->So it's almost like someone</v> just copied and pasted all of default.html down below that. <v Instructor>Right.</v> We mentioned briefly before that when creating a new Jekyll site, there's a special command called jekyll new and that generates a full site skeleton. But because we've already done all this work on our index page, we're going to use it as the base for this site. And it's also more instructive for people who are just learning it, because we're gonna build up the different parts piece by piece. So at the end of this, you'll be in a position to understand the output of jekyll new and use it to build teacher sites. <v Lee>Another note here is that we're actually</v> gonna be taking default.html and taking it apart. So it's gonna become less complicated over time and a much simpler file. That's also not normally how you'd start a project. Normally this layout file would probably be the least complicated part of it because as we showed you in the final sample, that we took a look at in the last section, this file ends up being very short. It just has little spots of magic in there that tell Jekyll to build other stuff onto the page. So we're taking something complicated and making it less complicated, and normally you'd take a blank slate of a layout and add a few things and then go work on those other layouts and page templates. <v Instructor>Right, so this is the kind of approach</v> that you would take if you already had a site that you've worked on, like this one here. And it's a really good way of getting into the system but once you've learned the basics, you'll be able to apply it and kind of go the other direction. Start with simple templates and build up in complexity. <v Lee>Exactly.</v> <v Instructor>We'll make that more concrete</v> as we go throughout the rest of this chapter and the next.