How to add Categories to a Jekyll blog – Tutorial 19

How to add Categories to a Jekyll blog – Tutorial 19

Hi guys Sharath here. Welcome to webjeda.
In the last video I discussed about Jekyll posts and in this one I’m gonna
talk about Jekyll categories. imagine you have a blog and you write on
varying topics, it is a good practice to segregate your articles according to the
topics. Here is an example of how it looks. So I have this website called, where all the themes that are listed are segregated into different
categories. So here if you take this theme Avocado,
it has categories like clean, minimal, and typography so all the themes have
different categories and if you want to see the categories page, you see that all
the themes are separated into different sections by their categories. So if you click on ‘dark’ you will see all the dark themes are in one place so
this is the use of categories. Now, let’s see how we can implement this in a
Jekyll site. So what I’m going to do is I’m going to follow this tutorial here
which you can check out. I will leave the link in the description. So what I’ll be
doing here is I will create a new Jekyll website and I will have 3 posts with
different categories post 1, 2, 3 and then I’m gonna create something like
this a categories page where the articles are
listed out based on their category. And also, I will show you how
you can show the categories just below the title of your post. So let’s get to
it. I’m gonna open a folder, my projects
folder and create an new directory here which I will call as ‘categories’
you can call it anything. now I’m going to serve this in Jekyll. So
even if it’s an empty directory ‘jekyll serve’ works, doesn’t throw an
error. Now, here if you see that it says configuration file is none. Because there isn’t anything inside but that’s okay. Also, I’m
gonna open this categories folder in a text editor. I use atom. I’m going to open
it with atom. okay now I will have the served Jekyll
site side-by-side but you can see the changes. I will keep it here,
the tab. Okay now, it shows just the index and there is nothing inside. So we have
to create a file here. I’ll create index.html which will be
our home page and I will create a simple HTML backbone.
This is done using a shortcut from Emmet plugin. You can install it or you can
just type tagtagtag and then close them all. I’m
going to increase the font size. Okay. I will have a container inside it and I’ll
have a

which is site title. I will call it my website or my blog. That’s better. I’ll have some content
which is dummy content here lorem ipsum. Let’s see if that shows up here. Yeah it
is. I will add a little bit of style just to make make the site look good. ‘.container’ I will add and I will give a max width
here and I’ll try to keep that.. okay I haven’t opened the style tag yet let me
open the style tag and I’ll make the ‘margins: auto’. So this
means left and right margins will be auto. Okay. I will have the font family as Helvetica I hope that works.
Oh yeah it does. Now, it looks a little better than what it used to be. I’m making it a little bigger. Okay. So this
is my blog and now I have the index page. Let me create some posts so that I can
add categories to them. In order to create posts, I have to create a new
directory called ‘_posts’. inside ‘_posts’ I can create new posts. it follows a nomenclature
which is that which the naming should be in this way I’m going to take the previous date. Title – I will take the
titles and everything from this side The first one is ‘my ways to live life’.
okay. .MD. So MD means markdown here and
that is the extension of the post. You can use text as well. Now I’m going to
create another one Top innovations This is the last one Nnew tech to organize daily
tasks. Okay.Now, I have 3 post. I’ll copy this yml front-matter
posted in my ‘ways-to-live’, copy this for top-innovations and finally New tech for organising your
daily tasks. But here if you observe, all the posts have category. So we can
mention this in a different way. If you have just one category this is how you put it. and I will have it in small letters
because I can change it to capital whenever I want. Now
you if you have multiple you can write it in this way, like an array but, a
better way would be writing it like this okay. So yeah, one post can have multiple
categories. I’m gonna save this. And there is
‘title’ and there is also layout called ‘post’ so but we don’t have any layout called post here. I’m going to create that as well. So in order to create a layout we have to create another directory with a name
_layouts and in layouts, it created
inside, I’m going to paste it outside. In the root of the directory there
should be layouts and in the layouts I’m going to create a layout called ‘post.html’. I’ll have the same thing same HTML backbone and here in the body, what I can do is I can copy the same style I usually have a default layout and I
use that but here I am not gonna do it just to save some time and I’ll have the
container as well so I’ll create a container here, in the body inside the container, I’ll have this
content tag where everything in the post everything inside the posts will come to
this contents thing. Now in the post, if you observe we don’t have anything.
No content so what I’ll do is, I’ll copy the lorem ipsum text we had
and copy it to all the posts we don’t need

tags here. I’ll copy it a few more times just to
make it look like an article same with the other posts. Okay.
Now the posts are ready but there is nothing, no clue that there are posts in my
blog. So let’s get them inside the index page. How we do that? We use a for loop
{% for post in site.posts %} and we end it right away {% endfor %}.
So this will loop through all the posts and I will have

tag {{post.title}} Let’s see if that gets it here. Okay, it’s
not getting it. It’s getting the liquid code as it is. The reason is, we
haven’t mentioned any front-matter in this file so we have to at least add 2 three dashes in the file. So that Jekyll recognises & processes it
instead of keeping it as it is. Now we have 3 posts listed. I don’t know if we should use

. I’m going to remove
this I will use a list item also an a tag so
that you know it comes one below the other and also it doesn’t look so big. I have the title here, in the href link I have {{post.url}} Let me refresh.
Okay so three posts are here. Now if I click on top innovations,
it shows the content of the top innovation post. If I click on others, the
same thing but the thing it is showing the content but it’s not showing
the title. The reason is in the post layout we did not mention any title we
we just have the {{content}} tag here let’s put a title tag

{{post.title}} Now if you observe the post Not ‘post’, we have to have ‘page’ here the title
of the particular page. Okay it’s coming and now the second one
and now the third one. Now the first thing is let’s see how we can show
categories. Like my ways to live has a category called ‘personal’. How do
we show that right after the title of the post. Let’s
see. In the post layout what we can do is is we can have another tag
something called, you can call this anything I have a

I’ll have {{page.categories}} page.categories. So {{page.title}}
means that it gets the title of this page. {{page.categories}} means it
gets the category of the page, of that post. This post individually considered
as a page. Now we go refresh here. We get it as ‘personal’.
What we can do is we can make it, capitalize it not sure what it is taking like that
okay I’ll have this, yeah so this means this
filter means if there are multiple it will be joined by a comma and a space
that way you know if there is a another category it will put a comma here and
then space and then the next category and it is capitalized the first letter
is bigger and just to differentiate I will maybe I will add something here it’s not a good idea to have inline
style for the purpose here I’m going to have
it in green so whenever you see the green color text it’s a it’s a category.
Now coming back to the next, we saw my ways to life let’s see new technology so
it shows two categories here. Tech and personal but still it isn’t capitalised.
I should see how I should have this Nah, it’s not working that way or
I’ll do it through CSS here. text-transform: capitalize; Is that the CSS thing? I
don’t know. Yeah it’s working. Now if you go to top innovations – tech, so there are
three posts my ways to live is personal, new tech is tech and personal, and then
top innovation is tech. Now what I want is categories to be mentioned in a
different page. I’ll do one thing I’ll list out the categories in the homepage
itself so that it makes the process simple instead of creating a new page. I
will have this content but below that will have the category list of
categories and also posts listed according to categories. Something like what we had here, something like this. To do that we have to understand. what is
maybe I can remove this. yeah we’ll remove that What we have to understand is what is
{{site.categories}} what it will generate. So from this we can derive
everything else. Now {{site.categories}} uses some things here
there are basically two tags which I’ve been used throughout the site. There are
only two tags – ‘personal’ has been used twice in two posts. ‘tech’ has been
used in two posts. So that is actually true that you know we have only three
posts but it shows 2 here because because one of the posts new tech to
organize has two categories so this post will be mentioned in personal and also
tech as well so that is why you know it is showing 2 there. So whenever you
see this # here it usually means that is a there is an
entire post inside. In personal tag, there is one post here another
post there. You can also calculate the size of this. It’s actually two here in
person there are two in tech there are two. So the same thing I have used here
as well in my categories pages if you go to the top here, here I have used the
size of the categories. Now let’s see how we can get the data out of it. We have
{{site.categories}}. I’ll have some break that way we can differentiate things Now {{site.categories}} I can have {{site.categories.personal}} and see what it
puts out. Now if you see {{site.categories.personal}} puts out two
things. It has to because, it has two things in it. It’s like
personal is a key and the two posts are values. Now New tech to organise and my
ways to live both have a personal tag in them, personal category in them. That’s
why it is showing both of them. Now if I want just the first one, I can add
something like zero there, maybe I’ll get the first one only. Yeah I got the first
one. Now if I want just the title of the post I can have .title and I will get
it. New tech to organise daily tasks. I just got the title if you want the
second one, we can have one here so that we get the title of the
second post as well. There’s no break between them I’ll add one that way you will
clearly see my ways to live. So how we want this is, we should have a

and it should say a personal and then it should list out these two. That’s
how we want. Now since we know how it works and how it is laid out
we can get that. Now first thing is we loop through {{site.categories}} we look
through this we’ll get one by one. Now for I can call this anything ‘cat’ maybe
cat which means category in site.categories I’ll end it right away. Now what I can have is, I will have a

tag cat[0]. Now what cat[0] means is the
first part of this whole thing the first parts is personal & tech.
Let me refresh, personal tech we got the tags I can use capitalized here nice Now the second part, now if I put it here cat[1] is again has many things in it. It’s
actually an entire post. So if I have that, you see that personal has to two
entire posts and tech has two entire posts. We actually don’t want the
entire post, we just want the URL and things like that. I may have to loop
through that because, you see there are multiple things here let me loop through
cat [1]. Again so we are using a nested for loop here there is a for
loop already which loops through {{site.categories}}. Now we are looping
through the object through the array here which are actually posts.
{% for item in cat[1] %} the first part of the category. I’m going to end it. Now here we’ll have {{item.title}} let’s see if that comes out. Yes it’s
coming out. Now for the sake of making the tags highlight I’m gonna
change this

tag to

. They are highlighted and the posts are
mentioned here. Now this is getting all the posts. There are actually two,
I see only one. Okay, there is another one but it’s in
the same line. I will change it to a list item and then an a tag and then inside I’ll
have {{item.url}} also {{item.title}} So we’re here so I’m calling this item
you can actually change the whole thing to post if that makes sense to you, post
because, you know we have used use the same thing before for listing out all
the posts. we can use the same thing. It doesn’t make much difference here. Now we
have this post listed in a nice way, in categories. Also if you go
inside we also have them mentioned here. so this particular thing, having
this in the index doesn’t make sense. So create a new categories page and put
everything there so that way you know it’s well organised. Now that’s how you
create categories in Jekyll. I hope you understood how to or to add
categories, and how to list them out. Let me know if you don’t get any of these
steps, you can just leave a comment also there is this blog, it’s actually mine,
you can actually follow this. There are many ways to list out the same thing I
have used one of those ways which is simple to debug, which
is simple to understand but there are many ways to list out one of
those is I’ll show you, this, you may not understand what’s happening here
but this you can understand but you can use this as well, the code on the right side.
You can just copy paste. You don’t really have to go through what’s
happening there. You just have to get the end result. So yeah thanks for watching
guys, I’ll see you in the next video. Bye

Author: Kevin Mason

2 thoughts on “How to add Categories to a Jekyll blog – Tutorial 19

  1. Thanks for the video. I'm a fan of Jekyll and I've been moving all my WordPress sites over to Jekyll. However most of the videos on YouTube about Jekyll (or Liquid) are a year or more old. Am I falling in love with a technology that is not popular? I dream of a day where I use my Linux machine to build Jekyll driven websites. Is this a pipe dream?

Leave a Reply

Your email address will not be published. Required fields are marked *