---
title: Dynamic Routing in Eleventy
description: Learn how to enable dynamic rendering of new stories by setting up a catch-all route in Eleventy.
url: https://storyblok.com/docs/guides/eleventy/dynamic-routing
---

# Dynamic Routing in Eleventy

Set up a catch-all route strategy in your Eleventy project to render new stories dynamically.

## Fetch a story dynamically

Create a `_data/pages.js` file to fetch all stories within your Space.

src/\_data/pages.js

```javascript
import storyblok from '../_utils/storyblok.js';
import Feature from '../_components/feature.js';
import Teaser from '../_components/teaser.js';
import Grid from '../_components/grid.js';

export default async function pages() {
  const response = await storyblok.getAll('cdn/stories', {
    version: 'draft', // or "published"
    content_type: 'page',
  });

  return response.map((story) => {
    const permalink = story.slug === 'home' ? '/' : `/${story.full_slug}/`;
    const name = story.name;
    const body = story.content.body
      .map((blok) => {
        switch (blok.component) {
          case 'feature':
            return Feature(blok);
          case 'teaser':
            return Teaser(blok);
          case 'grid':
            return Grid(blok);
          default:
            throw new Error(`Could not resolve ${blok.component} block.`);
        }
      })
      .join('');

    return {
      permalink,
      name,
      body,
    };
  });
}
```

Define a [permalink](https://www.11ty.dev/docs/permalinks/) for each page, making an exception for our home story to be located at `/`.

## Render all stories

Create a `pages.md` file that will act as a content entry point.

src/pages.md

```html
---
layout: 'layouts/base.liquid'
pagination:
  data: pages
  size: 1
  alias: item
eleventyComputed:
  title: '{{ item.name }}'
permalink: '{{ item.permalink }}'
---

<main>
  {{ item.body }}
</main>
```

With the [Eleventy’s Pagination API](https://www.11ty.dev/docs/pagination/), iterate over the array returned by the `pages` data function.

Use this data in the content area or pass properties down to the layout template with the `eleventyComputed` feature.

With this approach, your project can automatically handle new stories you add to your Space.

> [!TIP]
> Remove the `index.md` and the `home.js` files.

## Related resources

[Eleventy Pagination](https://www.11ty.dev/docs/pagination/)

[Eleventy Data Files](https://www.11ty.dev/docs/data-js/)

[Eleventy Supplied Data](https://www.11ty.dev/docs/data-eleventy-supplied/)

[Content Delivery API: Retrieve a Single Story](/docs/api/content-delivery/v2/stories/retrieve-a-single-story)

[Content Delivery API: Retrieve Multiple Stories](/docs/api/content-delivery/v2/stories/retrieve-multiple-stories)

  

## Pagination

-   [Previous: Visual Preview in Eleventy](/docs/guides/eleventy/visual-preview)
-   [Next: Content Modeling in Eleventy](/docs/guides/eleventy/content-modeling)