How to separate posts by pages on Jekyll GitHub Pages?

I just started using GitHub pages and I have a question.

After I make 'Categories' pages, and I'd like to add posts (NOT ALL POSTS!) with some categories. But if I set like

---
title: "Project"
permalink: /project/
layout: categories
---

then they show all the posts. But I'd like to show only some posts (I'm not sure but maybe some posts under 'Project' pages?).

I'm sorry even I don't know how to ask this but could somebody help me with this if you get this...?

Solution

In the front matter of your blog (Between the triple-dashed lines), you can set predefined variables or create custom ones.

Predefined variables date, category/categories and tags are available out-of-the-box to be used in the front matter for a post.

First, your front matter should look like this, for every post that you want to tag & categorize.

Example,

---
layout: post
title:  Building a CRUD API using Node.js
tags: [ API , Node.js , Javascript ]
categories: [Software Development, Long Posts]
---

---
layout: post
title:  My dog bruno
tags: [ Pets , Dogs , Fun ]
categories: [ Lifestyle , Short Posts ]
---

Now, create a tag.html and a categories.html file.

If you create them in the root directory, you will be able to access the pages via your_site_url/tags or your_site_url/categories

Eg.

http://localhost:4000/tags
http://localhost:4000/categories

If you create them inside a folder pages then via url/pages/tags or url/pages/categories

Eg.

http://localhost:4000/pages/tags
http://localhost:4000/pages/categories

According to https://jekyllrb.com/docs/variables/ the site.tags.TAG will give the list of all Posts with tag TAG. Similarly site.categories.CATEGORY will give the list of all Posts with category CATEGORY.

It is present in the format [tag,post] or [category,post]. If you iterate through site.tags or site.categories using

   {% for tag in site.tags %}
       tag[0] -> Will be the tag value.
       tag[1] -> Will be the entire post.
   {% endfor %}

   {% for tag in site.categories %}
       tag[0] -> Will be the category value.
       tag[1] -> Will be the entire post.
   {% endfor %}

Now using these snippets from https://github.com/codinfox/codinfox-lanyon/tree/dev/blog/

Inside tags.html add the following snippet

---
layout: page
title: Tags
---

<div class="tags-expo">
  
  <div class="tags-expo-list">
    {% for tag in site.tags %}
    <a href="#{{ tag[0] | slugify }}">
      <div class="tag">{{ tag[0] }}</div>  
    </a>
    {% endfor %}
  </div>
  
  <hr />

  <div class="tags-expo-section">
    {% for tag in site.tags %}
    <h2 id="{{ tag[0] | slugify }}">{{ tag[0] }}</h2>
    <ul class="tags-expo-posts">
      {% for post in tag[1] %}
      <a class="ay-list" href="{{ site.baseurl }}{{ post.url }}">
        <li>
          {{ post.title }}
          <!-- Add the below line if you want the date to be displayed -->
          <small class="post-date">{{ post.date | date_to_string }}</small> 
        </li>
      </a>
      {% endfor %}
    </ul>
    {% endfor %}
  </div>

</div>

Inside categories.html add the following snippet with site.categories instead of site.tags.

---
layout: page
title: Categories
---

<div class="tags-expo">
  <div class="tags-expo-list">
    {% for tag in site.categories %}
    <a href="#{{ tag[0] | slugify }}"> <div class="tag">{{ tag[0] }}</div></a>
    {% endfor %}
  </div>
  <hr />
  <div class="tags-expo-section">
    {% for tag in site.categories %}
    <h2 id="{{ tag[0] | slugify }}">{{ tag[0] }}</h2>
    <ul class="tags-expo-posts">
      {% for post in tag[1] %}
      <a class="post-title" href="{{ site.baseurl }}{{ post.url }}">
        <li>
          {{ post.title }}
          <!-- Add the below line if you want the date to be displayed -->
          <small class="post-date">{{ post.date | date_to_string }}</small> 
        </li>
      </a>
      {% endfor %}
    </ul>
    {% endfor %}
  </div>
</div>

slugify is used to convert a string into a lowercase URL "slug".

This should give you two separate pages with tags and categories, where posts are displayed according to the given tag/category.

These snippets are from https://github.com/codinfox/codinfox-lanyon so you need to refer to the CSS or use your custom CSS.