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

3.2 Adding a Blog Section

Now that we have a few blog posts available on our site, we need to make them accessible. It isn't very convenient for people to come to your site to read posts if they can't find them. So now we are going to add a new page and navigation items to our menu. These will allow your readers to see your posts in chronological order.

3.2 Adding a Blog Section

Now that we've got a decent little site going, it's time to add on to it a little bit. So we have some basic static content, we have a home page, an about page, a contact page, but now it's time to start integrating our blog post into this. In the previous lesson, we went through the process of creating a simple blog post called Hello World. And in between then and now, I've added a couple of additional blog posts just so you can see what it looks like to have multiple. So I have one here for January 20th, I have one here for the 23rd. And all they have in them is a little bit of lorem ipsum text, not a whole lot going on here. Other than we do have the front matter at the top of them and they're both set to having published equal to true. So that's going to be important so that we can start to see these posts show up on our site. So what we ultimately want to do is we want to create a page, a blog page, that's going to have all of our posts, preferably paginated would be good. And then we wanna have all those displays that the user can start to dig through them and find the post that they wanna read and they can read more about it. And just have all that kind of sectioned into its own area of the site. Now, there's obviously a couple different ways that we can do this. But what I want to do is I wanna take advantage of some of the really nice features of this particular theme and Jekyll and have to do as little work as possible, but still get a big benefit. So I'm going to come back over to our site here, and I am going to actually go over to the minimal mistakes documentation. I'm going to come down under Customization. I'm going to go into the Layout section and I'm going to go about half way down the page to the Home Page Layout. Now this is going to look somewhat familiar because when we first started creating this site the main Read Me page generated a site that had a layout of Home. And that's exactly what we're looking at here. And you notice that because it has this recent post section on it. So what I'm gonna to do is I'm going to create a section of my site that is going to house all of my recent post. And we'll get pagination and all that kind of stuff with just a little bit of configuration, but basically for free. So as you can see here, if we scroll down a little bit it's going to explain how you do this. So typically what you do is you create an index.html page at the root of your project and then you add a layout of home and then basically it just works after you add in some pagination. But, I don't really want that, because if you recall right know, our site has an index file, a mark down file at the root, and I don't want to override that. I want to have that be my landing page, my home page and I want a different section of my site to be the kinda recent posts blog style section. So you can absolutely do that. If you read down a little bit further, you're gonna see that if you'd rather have it in a subfolder, then you simply create an index.HTML page in whatever location you would like. And this is going to say you can put in /blog, which is actually, absolutely what I want to do. So what we're going to do, and this is actually a very good time to mention to you, that, as you can see I'm going to put an index.html page in a subfolder. You can absolutely in GitHub Pages create sites that have a mixture of mark down files and HTML files that's absolutely fine. Now, I would recommend that you pick a flavor and stay with it, but there are those times when you're gonna want to create HTML files where you're gonna wanna create Markdown files. And that's fine, you can absolutely mix and match those things. Everything will still continue to work. All right, so let's go back into our code here. And let's create a New Folder, like it said. I wanna create a blog folder, and then with in there I want to create a New File called index.html. Now within here as you saw before, all we have to do is add in a little bit of front matter. And all we have to do is specify that this is a layout of home, and say that's absolutely it. We get the recent post functionality here basically for free. But all this is gonna do is create an area of my site that I can go to, it's not yet in the navigation. So, let's go ahead and add that in now. So, I'm gonna go into my navigation.yml file in my _data folder again and I'm just gonna copy one of these entries. And I am going to put it, I think in between the about and contact would be a good spot for this. So I'm going to call this blog. And the URL is going to blog. Now the reason for that is that is actually the location of the folder that contains the content. Now, I could say blog/index.html, but traditionally speaking, web servers, when you send requests to a sub folder of the site and you don't specify a file, like an HTML file or something like that. The web server is traditionally going to start to look for commonly named files such as index.html and see if it's there and if it's there it's going to serve that up. So I don't need to put that in there because it exists and within this blog folder. So I'm just gonna say, go to this blog folder and it will figure it out for me. So let's go ahead and save that. Now, for the most part because I only have three files in here right now, I'm typically not gonna have to worry about pagination. But I will suggest, if you are using this method to create a blog and have posts. I'd highly encourage you to include the pagination right from the get go. That way as your blog begins to expand and you have more posts, you don't have to go back and retrofit it so that everything works. So what I'm gonna do is I'm actually gonna copy this. But I have to remember, that when I put this in my config file, that because this is in a nested folder I have to adjust the paginate_path to have blog on the beginning of it. So I'll make sure that I do that. So let's go back into our code, let's go into our config here. And then we'll simply drop these lines in here. So paginate 5, means its gonna only show five blog posts at a time. And then the path is gonna be /blog, and then / page number. So this is how it's gonna handle the paging, it's gonna pass in page numbers, and then it will figure out which posts it needs to show. Let's go ahead and save that. So we've only had to make three very small changes. I've created this index file and all that has is a layout in it. I have added that to my navigation page so I can see it in my menu. And then I've also added in some pagination into my config settings. And that's really it. Now all these things are saved, so let's go back in here and we're just gonna say, add Added blog section, like that. Let's go ahead and push those changes up to GitHub. And what you will notice in situations like this, what's happening behind the scenes is that Jekyll is going to rebuild your site. It's going to go through and because it has to find all of the blog posts, it's going to cycle through your entire site. It's going to look for all of those posts and then it's going to parse the names. It's gonna figure out when they were created and all sort of those types of things. So this build process may take a few minutes longer than you might anticipate. But I promise you it's gonna work, just hold tight. And eventually when you get to your page and refresh it, you will see those blog posts. So now that I have pushed all of that, let's go ahead and go back to our site. And depending on how long it takes, you may be able to refresh and start to see blog on there. But what's interesting is eventually, the blog menu item will show up. But, as I mentioned before, as you can see, it might take a few seconds or a few minutes before it actually starts to show up. And one of the interesting things is it's kinda a prgression of a build process. So if I had refresh there and I see blog here, I might go to a different page and I might not see the blog entry yet because it's building that out for each page on the fly. So it may take a few moments for the entire site to finish building and getting to a point where everything is updated. But as I said before, your patience will be rewarded. So now that my site has finished loading when it kinda felt like an eternity but in reality it was only a couple of minutes. But we are world of instant gratification so we want things right now but unfortunately that's not how these GitHub pages typically work. So now, I have this blog section here and, if I were to click on this, you'll see that it's going to take me to my blog page. And there you go, I now get these recent posts. Pretty cool. So, now I can click on all these links, I can go back to all of my pages, and I can get all of my content. Very nice. Now, as I said before, we did add in that pagination, but it's not showing up yet because we only have three. Now, once you hit that five mark and go over that pagination level, then you'll start to see pagination down at the bottom. But for now, you really don't have to worry about it, it's just there working for you. Now there's some cool things that we can do with these posts. So we can show some additional information. And what I wanna show you really quickly is how to start to add in two of my favorite features the read time and sharing. So in order to do that what I'm gonna do is I'm gonna come in to Visual Studio code and I'm gonna go back to let's say my post here is this thing on. So what I wanna do is, I want to add in two things, the read time, which is one of those little markers that says, if you click on this link, the general read time nine minutes. It'll take you about nine minutes to read this post, or something like that. I'd like to put that on my blogs, because it gives the reader a little bit of forewarning as to how long this might be. And I usually try to keep all of my blog posts under ten minutes, as close to five if I possibly can. But if it's really good content, I want to make sure it's under ten because I feel like I have at least a shot of keeping somebody's attention for that long. So the way that we do that is we comment and we add in two parameters. I'll add in read_time and I say true. And then I also add in share true. And what share is gonna do is it's going to go into this particular post and it's gonna add and share buttons like do you wanna share this on LinkedIn, Twitter, Facebook, all that sort of stuff. So that when a user or a reader is in there reading, they get down to the bottom of the page and they can click one of those links to share this with somebody else on their favorite platform. So let's go ahead and save this. Now we're only doing this on this particular file, so let's see what that looks like. So I'm going to say add config to one post. Just like that. And then let's go ahead and push these changes. So I'm only making these changes to the Is This Thing On post. So I would only expect to see it on that post on my site, once everything gets refreshed. So once I come over here, I can refresh my page. And because this building process does take a little bit of time, it may take a few moments for you to actually see these changes in effect. Now you see that my site has been refreshed successfully and I now see that this is less than a one minute read. Which is very nice, I like to warn my users about that. So that's what that read-time gives you. And then if I go into my post, you'll see that less that one-minute read there in the post as well. And if I scroll down to the very bottom, you'll see now that I have Twitter, Facebook, Google+ and LinkedIn so I can share this particular article with any platform that I want. This is very cool, but herein lies one of the next problems. I had to go in to an individual blog post and add that in to the front matter. So I had to go in here physically add this into this particular blog post. Now, if I wanna add that into all my blog posts and I have 1,000 of them then I'm gonna have to go in and put these into the front matter of all of them ,what an awful situation. Well, fortunately for us there is a better way to do that and that's through using front matter defaults which is what I'm gonna show you in the next lesson.

Back to the top