Creating the Blog Index Page

Module 4 · Section 5 of 9

Creating the Blog Index Page

Create src/pages/blog/index.astro to list all posts:

---
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getCollection } from 'astro:content';

const posts = await getCollection('blog', ({ data }) => !data.draft);
posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
---

<BaseLayout title="Blog">
  <main class="container">
    <h1>Blog</h1>
    <ul class="post-list">
      {posts.map((post) => (
        <li>
          <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
          <time datetime={post.data.pubDate.toISOString()}>
            {post.data.pubDate.toLocaleDateString('en-GB', {
              day: 'numeric', month: 'long', year: 'numeric'
            })}
          </time>
          <p>{post.data.description}</p>
        </li>
      ))}
    </ul>
  </main>
</BaseLayout>

getCollection returns all entries that match the filter — here, anything that isn’t a draft. The posts are then sorted newest first.