9.3 Layouts, includes and pages (oh my!) - Video Tutorials & Practice Problems

<v Presenter>One of the most powerful features</v> of Jekyll is its ability to factor different parts of a website into reasonable pieces, which helps us adhere to the DRY principle. There are several ways that Jekyll does this. One is to use a system of conventional folders and names for files, so can take a look at this. This is an example of a more complete Jekyll project. And you can see here in the the side that there are these directories. So we have _site, which we just talked about. There are also things like _includes, _layouts, _posts. So these are conventional names that give Jekyll the necessary information to build the site. So in this case, the _site is the one that's built. So by using these conventional directory names and filenames, in this case, are there any filenames that we use that are actually conventional? <v Lee>Actually, none of the filenames have</v> to be conventional with the exception of, you do need an index. <v Presenter>You do need an index, and also these.</v> So we'll talk about blog posts, so there's a convention for naming blog posts. So there are all these conventions that, if you follow them, then things just automatically work really well. And this is influenced by the Ruby on Rails innovation of having convention over configuration. Another important aspect of Jekyll is its use of a mini language called Liquid, which we mentioned briefly before. So this line, for example, here in the footer is a little piece of Liquid. Liquid was originally developed by Tobi Lutke, who we mentioned briefly before. He was the founder of Shopify, also a former member of the Ruby on Rails Core team. So there're basically two kinds of files, broadly speaking, in a Jekyll project. There are static files that are treated just like regular HTML. And that's what we saw over here, where we have just an index file, and that's built into the site, and then dynamic files. And those are files that make use of Jekyll's site-building capabilities. So this is not the kind of thing that you actually have appear on a webpage. This is a little bit of Jekyll magic. <v Lee>Exactly, users don't see that.</v> <v Presenter>Yeah, users will not see this.</v> This is, in this case, going to pull in the nav links. We'll be talking about this later in this tutorial. And this is the kind of syntax that Jekyll supports, in this case, via the Liquid language. Now, when putting this tutorial together, we identified four main types of objects and files that the Jekyll site-building engine can use. So let's go over those now. There are four that we list in the tutorial. And so Lee, you're the one who really kind of distilled these down, and there's also, like, a big caveat, which is that the terminology seems to be a little bit fluid, so to speak. <v Lee>Yeah, even in the Jekyll documentation,</v> sometimes they call things different names, depending on when it's used, even though they're the same thing. But fundamentally, the idea is that you have one group of things that are called layouts or layout templates. And those stay in a directory, or sometimes they stay in a directory called layouts. But these are the fundamental, basic building blocks that are at the bottom of the site. Like, these contain the site structure. So other stuff gets built onto these pages. Then you have includes, which are-- <v Presenter>These.</v> <v Lee>These are partial sections of a site,</v> and these tend to be things that are repeated over and over again, so-- <v Presenter>Or like a navigation or a header.</v> <v Lee>Exactly, these are perfect for headers or navigation</v> or, you know, just any sort of repeating element that's on a page. Then you have pages and page templates. And this is where things get a little complicated because these get referred to by a bunch of different names, but these are like individual pages. So like, a blog post, you'd build that on a blog page. (Lee chuckles) <v Presenter>Like this here?</v> <v Lee>Right, exactly.</v> And so this is a template that gets built onto a layout. And then it has other stuff built into this template, but it's all a little fuzzy. What really differentiates these things, and you can see it up at the top of this file, is the front matter. So this page template has layout default, and that means that this is getting built into something else. And if we look at layout default, there's no front matter, and this has the base HTML opening and closing tags. So you can see, like, this is the original thing that other stuff gets put into. <v Presenter>Okay.</v> <v Lee>But you can also build layouts into layouts.</v> So if you actually look at post layout, which, we'll be talking about all of these things later in the tutorial, but you can see this is a layout. But it gets built into another layout. And then it also includes page templates and post information. So the terminology gets a little crazy. The thing to take away here is that you have these four things. We didn't discuss posts, but they're a totally different object. We'll get to that in a second. These first three, layouts, includes, and pages, are the HTML foundation for your site. Like, these contain all your HTML tags and the structure for your site. The last one, posts, is a very different type of object, in that this is a content object. So this is where you'd actually put the text of, like, a blog post. <v Presenter>Mm-hm.</v> <v Lee>And there's a conventional way to name it</v> that includes a date and a name. And that becomes part of the URL that you would find the content at. And then posts also have a front matter, but they often have an extended front matter, because you use the front matter here to give extra information about your post. You can have things like the title, you know, dates edited, you don't have to use the date that's on the filename, a bunch of other information, like, about the author. You can even do stuff like categories and a bunch of crazy stuff that you can put in here. And then, every time that this piece of content gets built into those other templates and layouts, that content can be used, and you can put it on the page. So it's a really powerful tool that we'll be taking a look at later to add all this information that you actually see on this page, the title, you know, the post author, Twitter links. And then make that dynamic on each page so that each blog post has the correct information. <v Presenter>Cool, so this is the kind of thing</v> where we're just giving you an overview. Don't worry about any of the details. We'll be covering everything we've just talked about in much greater depth throughout the rest of this tutorial. <v Lee>Yeah, this is actually the end product</v> of the whole tutorial, so there's a lot of stuff in here that we haven't got to yet. (laughs) <v Presenter>It's also worth noting that Jekyll has a lot</v> of online documentation. It's a good application of technical sophistication to take a look at it and use it to extend your knowledge. But we'll give you the necessary foundation to give you the point where you can read that documentation and make sense of it. <v Lee>Right, and then the next thing</v> to look at is probably starting at the very base and taking a look at a layout file and adapting what we've done with index into a layout file. <v Presenter>Great. Let's do that.</v>