How to create a list of posts

This recipe shows you how to create a list of your blog posts, where each item includes the title, link and body of the post.

Directory Structure

Given a directory structure like this:

/public
  /posts
    _data.json
    my-first-post.md
    my-second-post.md
  /index.jade    <-- or index.ejs

Posts Data

And a /public/posts/_data.json like this:

{
  "my-second-post": {
    "title": "My second post"
  },
  "my-first-post": {
    "title": "My first post"
  }
}

List using Jade

You can iterate through your posts in Jade like this:

for post, slug in public.posts._data
  h2: a(href="/posts/#{ slug }")= post.title
  != partial("posts/" + slug)

List using EJS

Or if you’re using EJS:

<% for(var slug in public.posts._data){ %>
  <h2><a href="/posts/<%= slug %>"><%= public.posts._data[slug].title %></a></h2>
  <%- partial("posts/" + slug) %>
<% }; %>

What’s happening here?

We’re using the for iterator to run through the data we put in /public/posts/_data.json. We can access that posts data object via public.posts._data.