Skip to main content

​
Overview

The blog index page (src/pages/blog/index.astro) displays a grid of all published blog posts using the CardsBlog component.

​
Source Code

src/pages/blog/index.astro
---
import Layout from "../../layouts/Layout.astro";
import CardsBlog from "../../components/Blog/CardsBlog.astro";
---

<Layout 
  title="Blog - RobTop Games" 
  description="Latest articles, guides, and news about RobTop Games"
>
  <CardsBlog />
</Layout>

​
Page Structure

The blog index is minimal, delegating all functionality to the CardsBlog component:
  1. Layout Wrapper - Provides SEO, header, and footer
  2. CardsBlog Component - Handles post loading, display, and search

​
Features

The blog index page provides:
  • Automatic Post Loading - Fetches all published posts from content collections
  • Grid Display - Responsive card grid (1-3 columns based on screen size)
  • Search Functionality - Filter posts by title, description, or tags
  • Post Sorting - Shows newest posts first by creation date
  • Empty State - Displays message when no posts are published

​
Accessing the Page

The blog index is accessible at: 
https://yourdomain.com/blog

​
SEO Configuration

title="Blog - RobTop Games"
description="Latest articles, guides, and news about RobTop Games"
The page includes proper metadata for search engines and social media sharing.

​
Post Filtering

Only posts with publish: true in their frontmatter are displayed: 
const posts = await getCollection('blog', ({ data }) => {
  return data.publish === true;
});
This allows you to draft posts without publishing them to the live site.

​
Customization

​
Change Blog Title

Edit the CardsBlog component to customize the header:
src/components/Blog/CardsBlog.astro
<h1 class="text-center mt-3 text-white">
  <strong>YOUR CUSTOM TITLE</strong>
</h1>
<p class="text-center text-white">Your custom subtitle</p>
You can add a featured posts section above the grid:
src/pages/blog/index.astro
---
import Layout from "../../layouts/Layout.astro";
import CardsBlog from "../../components/Blog/CardsBlog.astro";
import { getCollection } from 'astro:content';

const featuredPosts = await getCollection('blog', ({ data }) => {
  return data.featured === true && data.publish === true;
});
---

<Layout title="Blog" description="Latest articles">
  {featuredPosts.length > 0 && (
    <section class="featured-posts">
      <h2>Featured Posts</h2>
      <!-- Display featured posts -->
    </section>
  )}
  <CardsBlog />
</Layout>

​
Pagination

For large blogs, you may want to add pagination. See the Astro pagination guide.

CardsBlog Component

Learn about the blog cards component

Blog System

Understand the complete blog architecture

Creating Posts

Learn how to create new blog posts

Blog Post Page

See how individual posts are rendered

Build docs developers (and LLMs) love

Get started for freeTalk to us