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.6 Creating Additional Pages and Navigation

Having a single page on your site is great, but it isn't very exciting. Fortunately, with GitHub pages, you can add as many pages as you want. And if you add more pages, at some point you are going to need to add some navigation to your site so your visitors can find their way around. Let's get to work!

2.6 Creating Additional Pages and Navigation

The next thing that I wanna pay attention to when it comes to building out these GitHub pages and Jekyll sites is having multiple pages. And then starting to be able to create some sort of logical navigation structure. And it's actually quite simple. And as you might imagined, it's basically just taking some content and then doing a little bit of configuration. But there's two things that we're gonna work on here. The first thing is working with pages. So, obviously, we wanna have multiple pages. I could absolutely go into my source code and I could just start dropping a bunch more mark down files in here and I could make that work. But that becomes a little bit sloppy. And I want to be able to organize my site logically so I can find things when I need to. So what I'm gonna do is I'm gonna head back over to my documentation. And I'm gonna come down to the content section here and I'm going to go into Working with Pages. And this is gonna lay out some best practices when it comes to doing this within this Jekyll theme. So as you can see here, it says start by placing the pages, either MD or HTML files, into an _pages directory. Okay, well, we can do that. So what we're going to do is we're going to come back over to our code here and we're going to start by creating a new folder. And this folder is going to be _pages. And then within here, I'm gonna put all my subpages on my site. I'm gonna leave my index at the root because that makes sense. But then I can create a couple additional pages here. So I'm gonna create two here, I'm gonna call this the about.md and I'm also going to maybe have a contact page. So I will say contact.md, just like that, okay. So what I'm gonna do now is I'm gonna cheat a little bit and i'm gonna copy some of this work here, some of this front matter. And am gonna drop it in here a little bit. And I think for the most part this will work, but I’m just gonna have to make a couple minor updates. And we’re gonna start by updating the title here. So this is going to be About. And I’m gonna say, welcome to the about page. Welcome to the about page, just like that. Now the permalink, I’m gonna have to change this now because I can only have a single permalink for each page that I want to have. So I can't have two pages that have the same permalink. So I'm gonna simply say that this is gonna be about, like that. And I'm not gonna have this be the splash layout, I'm gonna change this over to single, I think that ought to work. Now just to but a little bit of content in here, we're just going to say that this is about me, and then I could put some sort of text. Hello there, this is Derek, welcome to my site, something like that. Okay, so let's go ahead and save that. And then we'll come back over to our contact now and we'll paste that kind of similar block in there, and make the same type of updates here. This is going to be contact, and I'll say something like, please contact me, and the permalink here, once again, is going to be contact. And then we'll change the layout to be single again. And then we'll just put in here, please contact me using the form below or something like that. So you could obviously create a form and put it in here and something like, put the form here. Something like that, just to give it a little bit of content. So let's go ahead and save these pages. So I've created my about page, I've saved that. I've created my contact page. I've saved that and they're in this _pages, but there's one more step we have to pay attention to. Step two is to include these pages so Jekyll can see them and process the pages _pages. So by default it's gonna look in the root and look for the mark down or html files found in the root. But because we're trying to coordinate these things, we need to include this new directory. So, let's go ahead and copy that. And we're gonna come back over to our configuration file here, and we're just gonna drop that in there. So, we want to include this _page's directory, okay? That seems simple enough. And then, assign permalink overrides, which we've already done. Okay sounds good, so what we're gonna do is we're going to make sure that we save this. So we'll say that we added contact and about pages, like that. We'll go ahead and push these up to GitHub. Now the interesting thing here is now these pages will exist. They do have permalinks, and they do ultimately have destinations and they've got content. And they've got some mark up in there, and whatever you've put in there. And if I wanted to navigate directly to them, I could. So if we come over to our site, and I went in here. As you can see, nothing really changes on the Home. But if I were to go to one of those permalinks, about, for example, you would see my about page. And if I went over to contact, you would see my contact page. But how are you gonna get to these things, unless you really know that they're there? And that's where the navigation side comes in. So if you were to go back over to the documentation, you can go underneath Customization and check out Navigation. And it's actually quite simple. What we're gonna need to do is create another directory called _data. This is kinda one of those special directories that Jekyll knows about that you really don't get by default. And that's how a lot of things happen with Jekyll. Where there's these kind of like magical folders and files that live within there. And they don't come by default, but you can add them and those effectively override any of the defaults that come either with Jekyll or with your theme. So what we need to do is we need to specify an _data navigation.yml file, all right, we could do that. So let's come back into our files. We're gonna create another folder. This is gonna be _data. And then within here we're gonna create a single file called navigation.yml, like that, and let's go back over here very quickly. And we're just gonna copy the first block here so you can see what this looks like. So, let's copy that and we'll paste this in here. So, what we're saying here is we have one main section for our navigation. And then we can create a couple of entries, or as many entries as we need in here, to define what our navigation structure looks like within our site. So, we can specify a title and a URL for all the pages that we want to show in our navigation. So, maybe we wanted to start with a home. We want to have a home link. And we're going to specify under URL the permalinks that we defined for all of our individual pages. So, the URL here will just be the slash for our index page, because that's what the permalink here is. Now, we can specify a couple more for our other pages and we're going to have an about. Remember, this is going to point to about and then we'll have a contact, which is going to point to contact, just like that. Let's go ahead and save this, so now we have this new navigation file in the special_data folder. So we'll say here, add site navigation, just like that. Go ahead and push our changes. So hopefully, you're beginning to notice that when it comes to working with GitHub pages using Jekyll, depending on the theme it is somewhat theme specific. But Using Jekyll to create very rich, content driven sites is actually quite simple, you really don't have to know any code. The most you really would have to know is a little bit of mark down to be able to create the content on your pages. And then know how to work get in and out of some of the configuration settings for Jekyll And it's really just that easy. So let's go back over to our site and come in here and let's go ahead and refresh. And if everything works successfully you're gonna see that we now have these three buttons over here. And i can start to go around my site. I can go to my home, I can go to my About page, I can go to Contact and I can do all of those things. And one of the other nice things about this is that now I also get responsive themes. So this theme by default is responsive. So I can go ahead and start to drag this and you're gonna see the site change. And if I go in far enough, you're gonna see I now get this hamburger menu. And it's going to kind of collapse enough of the navigational buttons here to make sense and to make room for the rest of the content. And then I can click on this and I can see whatever links that there was not room for at this particular resolution or at this particular screen size. And I can't start to move around and you'll see that it will shrink nicely. And if we open it back up, I will now have all of the navigational links where they're supposed to be. All right, so we're really moving along pretty nicely at this point. Now I have my navigation. I can create some pages in here. And now it's time to start to talk a little bit about posts. Now typically when you're creating GitHub pages and you're using Jekyll, one of it's strong points is actually creating blog posts. And then in the next lesson, I'm gonna show you how to start doing that and start to get some nice blog functionality, very quickly and easily.

Back to the top