How to List all posts on your site
Drive 20-40% of your revenue with Avada
How can Jekyll be defined?
In industry 4.0, Jekyll is a wonderful tool for programmers and Web developers. It is a simple but perfectly blog-aware, static site generator for individual, project or organization sites. It is also considered as a file-based CMS without the complexity.
How does Jekyll work?
In Jekyll, no more databases, comment moderation or pesky updates to install but your content is taken and your Markdown and Liquid templates are rendered as well. It also plays a function as producing a static website ready to be served by Apache, Nginx or other web servers.
Jekyll is the engine behind GitHub pages – a GitHub feature lets users host websites based on their GitHub repositories for no additional cost. It is extremely flexible because it can be used in combination with front-end frameworks such as Bootstrap, Semantic UI and some others. When using Jekyll, content editors are enabled to create or modify site content without having to know how to code as Jekyll sites can be connected to cloud-based CMS software like CloundCannon, Forestry, Netlify or Siteleaf.
Jekyll’s growing community produces a wide variety of themes, plugins, tutorials and other resources that can be helpful to you. In terms of philosophy, Jekyll does what you tell it to do, no more, no less. It will not try to outsmart users by making bold assumptions nor burden them with inessential complexity and configuration. In a simpler way, you are just allowed to focus on your content.
It’s common to display a list of posts on your homepage so that your customers can easily catch sight of all of your posts on different topics. If you want to create it on your own page, you have to read carefully this instructional writing on How to list all posts on your site to get more information.
How to list all posts on your site
Step 1: Create a layout
Before taking an official step on adding the code to list your posts on your site, you need to know how to create a layout that will display the posts.
In _layouts directory, create a new file called home.html and add the following logic:
---
layout: default
---
{{ content }}
<ul class="myposts">
{% for post in site.posts %}
<li><a href="{{ post.url }}">{{ post.title}}</a>
<span class="postDate">{{ post.date | date: "%b %-d, %Y" }}</span>
</li>
{% endfor %}
</ul>
Step 2: Generate blog.md file
Then, in your root directory, create a file called blog.md and specify the home layout:
---
title: Blog
layout: home
---
From that, contents of blog.md will be pushed into the {{ content }} tag in the home layout which will be pushed into the {{ content }} tag of the default layout.
Step 3: Create the code
Now, just embark on creating the code to support letting your posts appear right on your page.
site.posts directory contains all of the posts and helps you show them on your own homepage. Therefore, it is basically a matter of iterating over it. You have to add exactly the following code:
<ul>
{% for post in site.posts %}
<li>
<a href="{{ post.url }}">
{{ post.title }}
</a>
- <time datetime="{{ post.date | date: "%Y-%m-%d" }}">{{ post.date | date_to_long_string }}</time>
</li>
{% endfor %}
</ul>
...
Your setting process is completed and it is ready for your customers to see all your posts.
Conclusion
It is much easier for your customers when they can see all of your posts right on your website. These posts are put in a default layout so that customers can be able to find them in a simple way. With some very basic steps above, we hope that this post brings useful information in your process of developing your web. Do not forget to keep following us in next informative tutorials. Thank you for reading!
General
