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.1 Creating Your First Blog Post

If there was a sweet spot for Jekyll, it would be blogs. Jekyll is almost built with that type of website in mind. In this lesson, I'll show you how to create blog posts as well as some of the important content that you are going to need to include in the Front Matter of these pages.

3.1 Creating Your First Blog Post

So our site is coming along pretty well, but to this point we've really just got some basic pages, a little bit of information. There's really not a whole lot to really draw our readers in until we've started to create some blog posts and that's what we wanna get into right now. Which is really one of those sweet spots of Jekyll and GitHub pages, so how do we do this? Well, like anything else that we've done so far, we're gonna go back over to our documentation. And we're gonna come down in here, and we're gonna take a look at Working with Posts. Now within here, you're gonna see a couple things right off the bat. The first thing is all posts should be stored in the _posts directory, well we don't have one of those, so what do we have to do? We have to make one, so we're gonna come back into our code, and we're simply going to create a new folder, _posts, okay, that was pretty simple. The next thing that we have to pay attention to is the naming convention, now this is very important for a number of reasons. But one of the most important reasons is to make sure that the files are uniquely named. So we're assuming here that you're gonna only name each file uniquely based on the date that you want this particular post either created or published, that's up to you. But you're gonna need to follow this convention, the year, month, day, -title. So what this is going to do is it's going to allow you to create this file, and it's going to also assist Jekyll with understanding when this post was created. So that it can start to define the chronological order of these posts. So when you see things like recent posts, Jekyll is gonna be able to do that for you which is pretty cool. Then you're also gonna see that it's gonna follow the format per the usual. And what this is gonna do is it's gonna link over into writing posts in Jekyll, and it's gonna tell you basically the same things we've already done, there's a posts folder, then you create post files and here is the file structure of the name. You should be using hyphens in between the words, that's pretty basic stuff, and then you can see some of the sample content and things that you can put in here, a typical post, things like that. Now another interesting thing too, is if you take a look at the front matter that is defined in Jekyll as you see right here. If you come down a little bit, you're gonna see some of these global variables that you can assign. You can assign layout, the permalink, which we'll take a look at in a little bit, as well as this published flag. So, you can write this post and kind of keep it in draft status if you wanted to and make sure that it's not published, until you're absolutely ready to publish it and make it available on your site. So, just a couple of things to pay attention to, as you go along. So what we wanna do now, is we want to create a sample post and try to see if we can't take a look at that and see what that looks like. So let's come back into our source code, let's go into our post directory, and let's create a new file. So, let's create this using the appropriate structure, so this is going to be 2018-01-15-Hello-World. Maybe this is just your inaugural blog post and you wanna just call it something simple, then that will be just fine. So let's go ahead and create our front matter here, now we are going to specify a title. This is just gonna be hello world like that, then we are also going to specify a layout. This is gonna have a layout of single, like we've done before that's fine, and then we wanna also specify a permalink. And because like I said before if we don't do that, what Jekyll is going to do is, it's going to create a really SEO unfavorable URL link structure. And it's gonna be broken down just like this date shows up so it's gonna be in a folder called 2018-01-15-Hello-World, and that's pretty darn ugly. And we really don't want that, that's not very SEO optimized, so what you can do is you can specify a permalink for this particular post. And I would just do something like this, hello-world, something like that, that should be good. Okay, so now that we've done that we can go ahead and start to right our posts, hello World! Welcome to my amazing blog, get ready for some great content, something like that. Now, you have your first post ready to go, now remember, there is that configuration setting that if we want this to be published or not. And by default because this is really a very short post, I wanna make sure it's published right away, so I'm gonna go ahead and say published is going to be true. So let's go ahead and save so, all we've done now is create this very simple post in our underscoring post directory following the prescribed. We have our front matter, we have our content, we are all good to go, so let's go ahead and come into our source code. And we'll simple say, created first post, something like that, okay? Once we have that in there, let's go ahead and push like we continue to do, and once again we're gonna be in this kinda weird limbo area, where we have pushed some content. We know the page is out there, but there's really not an easy way to get to that page, because it's not showing up in our directory structure here. Now, sure, or in our navigation structure, now, I could If I really wanted that post to show up here on my navigation, I could go into that nagivation.yaml file and create an entry for that. But that doesn't really make sense, so in the next lesson, I'm gonna show you some other tricks that you can kind of take advantage of to be able to do that. But right now, if I were to simply come into my site and I would go to hello-world, because that's the permalink that I specified, it will take you to my post. And I get some pretty cool stuff by default, I see that I have my title here of the blog post, I have Hello World, I have my content here. And I also get this little updated guy here, so you can see when this particular post Was updated, or if you didn't update it, maybe it was when it was created so that's kind of cool. So there are some really interesting things that you can do here that you kind of get for free which is actually really, really nice. And if you head back over in to working with posts, you're gonna see some other pretty cool things here that you can specify. You can specify the layout, the author profile, the read time, and some of these other cool configurations under this weird defaults label here. So, in the next lesson I'm gonna show you a little bit about what defaults are. How they're going to be helpful for you and how we can start to group all these posts together under a link within the navigation so you can easily get to all of your recent posts.

Back to the top