Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
FREELessons:14Length:1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Page-Specific Configuration

In the previous lesson, you learned how to set up global configuration properties in the _config.yml file. In this lesson, I'll show you how to add pages to your site and introduce you to the concept of "Front Matter". This will allow you to add data to your posts and pages, and it will become very important as you create content for your site.

2.5 Page-Specific Configuration

So the next thing that I wanna do is I wanna start to customize the homepage that you see right here. So this is kind of our index page that we worked a little bit within the previous lesson. And I wanna show you how to actually add some actual content to this as well as to start to dip into the world of front matter. So let's go back into our code. And what I wanna do now is I'm gonna drop a little bit of lorem ipsum text in here just to give us a little bit more content. This is just a bunch of gibberish, so don't worry about it. And so what I really want to start to look at a little bit more Is the configurations that you can do now at the page level. So basically what you're seeing here is a page, this is the index page. And what I can do now, at the top of the file or the front of the file I can define a block that has three hyphens in it. And when I do this, this is called front matter. And what I can do in here is I can provide page specific configurations to tell the theme and to tell Jekyll what I wanna do with this. So what are some things that you can do? Well, there's some very common characteristics that you can do with front matter when it comes to individual pages. So I can start with title. And maybe we'll just say the title of this page is home, something like that. That's pretty simple. Then, I can do a couple other things here. I can set a description. I can set a specific description for this page, which is another SCO optimization. So I can say, welcome to the homepage, click around a little bit! Something like that. That oughta be fine. Then I can do another very important thing that you're gonna find with your Jekyll sites, especially if you're using them as blogs. And we'll get into that in an upcoming lesson. But one thing you're going to want to get in a habit of doing is specifying what's known as a permalink. Now permalinks are really a way for you to kind of pretty up what your URLs look like for your particular page. So what's going to happen when you see how you create blog posts in a little while. Is that what Jekyll wants to do, is it's gonna take the file name of your blog post and it's going to kinda slugify it if you will, it's gonna remove some of the non-URL compatible characters. And use of underscores, and hyphens, and things like that. But you're gonna see that things are going to get really, really ugly, really fast. So what you can do then to override that, is specify a permalink to say what the relative URL path is going to look like on the end or your URL. Now because this is the homepage, what you're typically gonna do, is specify a forward slash. Which basically says, this is the homepage. When I go to creatived.github.com/jekel-site ,which is the root of my kind of URL structure for my site, it's gonna take me directly to this page. And that's why this permalink here is very important. And, of course, I have some linting going on here with some of my mark down, as well as some spell checking going on in here. So just kind of disregard all the red squigglies. Okay, so now we've done a couple things. We've specified a title, we've specified a description, and a permalink. So let's go ahead and save these changes. We'll go in here and we'll say modified homepage and then let's go ahead and push that up to GitHub. So we'll head over to GitHub. We'll see these changes manifesting on our site. As you can see now, I've got this block of front matter up here at the top, the title, the description, and the permalink as well as my content here. So, if I come back to my site, if everything has been refreshed properly, I'm now going to see a little bit more. Now, I'm still getting some interesting things here and I'm not getting my content showing up. And there's another reason for that and I'm gonna show you that here, in just a moment. But, as you can see, now I'm getting my page specific information on this page. So I can see now my title is Home, and if I were to go into my page source you're gonna see welcome to the homepage, click around a little bit for my descriptions. So as you can see I can set a lot of these properties at the root of my site in that config file. But I can also override a lot of the defaults in these specific pages. And that's one thing that you're gonna wanna get into the habit of doing as well. Is to specify as much as you possibly can at the highest level. And then only when you need to tweak things, go down into the page specific front matters and really start to tweak things there. Because otherwise, if you have to who always do them in all of your pages that can get very repetitive. You can forget to do things and it's very error prone that way. Okay, so the other thing that I want to change right now is kind of the general layout of this page. Now if you head over to the Quick-Start Guide again. And come into the Customization section and select Layouts. You're gonna see that not only can you specify different skins with this theme, but you can also have different page layouts. So if you scroll down a little bit you're going to see there are about seven of them here. These are all going to provide slightly different look and feels to each of the pages that you apply them to. If you actually scroll down far enough, you’ll see what they look like. So, we have the single layout, you’ll see that you can have a table of contents. You can do all sorts of different things here in the archive layout. The one that I typically like to use when I am getting started with my Homepage, at least when I'm using this particular theme is I like to specify the layout of Splash. It kind of creates this splash page. There's a lot of configuration that you can do at the header level, and you can start to see some content show up. So let's go ahead and take a look at that. So let's go back into our files, I'm gonna go back into my index, I'm gonna come underneath my permalink in here. And I'm gonna say, layout is going to be Splash. So that's all I'm gonna change. So let's save that, and we'll say, change index to Splash, just like that. So then, we'll go ahead and commit that. Lets push that change and then once it's over there go ahead and refresh just to make sure it stuck. And I do see that home disappeared, you don't see that on the base page here as well as the recent posts has disappeared as well. And we're given just kind of a basic homepage, with a little bit different of a layout. And so this in kind of how I like to see my home pages. There's one other change that I want to show you when it comes to Splash pages that you can take advantage of. And that is when it comes to the header. So what I'm gonna do is I'll go back into my code here, and I'm gonna go back into my front matter. And let's go ahead and drop in a little bit of configuration here. So as you can see, I can have nested configurations. So I'm gonna specify a header, and then within that header I can have an overlay color. And this is gonna give you like a base color so you can kind of see that header in there. You can also specify an image. So, if I had an image like a large, wide kind of Splash image that I wanted to associate with this page, I could say overlay_image. And then I could specify the path to wherever that image is. I don't really have one right now. But you would just simply give it the relative path where it is, which is typically gonna be in something like assets/images/ maybe header.jpeg or something like that. So you could specify the relative path to where that header image is and then it will display that on there as well, so that's kind of nice. It gives it a nice kind of look and feel. One other nice thing that I can do here is I can specify some texts that would show up in that header as well by specifying an except. So I can say this is some fancy header text, like that. So that would be pretty cool. And you can also specify a caption for your header. So I can say caption, this is where I would give the image creator credit, or something like that. So if I was getting this image for my header from somewhere and I wanted to attribute that to a person then I can go ahead and put that in there as well. So let's go ahead and save these last couple changes with the excerpt. Make sure I spell that right. Save the excerpt, the header, the overlay color, as well as the caption. So once I've saved all those things, I can go ahead and commit those changes. Update index header. So then let's go ahead and push that up to master. And then when it goes in there, let's go ahead and come back to our site where we'll give it a couple of moments. And once everything is refreshed, you'll be able to see the changes that I've made. So there you have it. If you were following along with me at home, then you may have noticed that might have taken a few moments to actually kick in. And that's kind of the game you play when you're using GitHub pages. But as you can see now I have specified the overlay color for my header. So I get this kind of dark brownish or grayish, so that it kind of pops a little bit. And if you specified that overlay image, it would should up in this same area, there. So, now I can see my page, here, I can see my page title, as well as that excerpt. So here, this is some fancy header text, and then here's the caption. So I can say if this was an image that my brother-in-law took, that I could go ahead and attribute it to him and maybe provide a link to his site or something like that. You know those nice things that you do when you're trying to help out your other fellow friends on the internet. So there you have it, now we're starting to take a little bit of shape simply by adding some configuration and some content to our index page. So now that we've done that we can take a couple minutes to create some additional pages. And then start to pay a little bit more attention about what we can do to create some navigation for our site.

Back to the top