---
title: Integrate Eleventy with Storyblok
description: This guide walks you through integrating Storyblok as a headless CMS, fetching content, and building components to render it effectively in your Eleventy project.
url: https://storyblok.com/docs/guides/eleventy
---
# Integrate Eleventy with Storyblok
Use Storyblok to manage the content of your Eleventy website.
> [!NOTE]
> This guide has been tested with the following package versions:
>
> - `@11ty/eleventy@3.1.0`
> - `@storyblok/js@4.0.0`
> - `@storyblok/richtext@3.2.0`
> - Node.js v22.13.0
## Setup
Create a new Eleventy project in a few simple steps by following the [Get Started](https://www.11ty.dev/docs/) page from its official documentation.
If you already have a Storyblok account, visit [app.storyblok.com](http://app.storyblok.com/#/signup) or [log in with GitHub](https://github.com/login?client_id=Iv23liC8pLXD6VcT2EbS&return_to=%2Flogin%2Foauth%2Fauthorize%3Fclient_id%3DIv23liC8pLXD6VcT2EbS%26redirect_uri%3Dhttps%253A%252F%252Fapp.storyblok.com%252F#/login) to continue.
Create a [new blank space](https://app.storyblok.com/#/me/spaces/new?tab=select-plan) to follow the tutorial from scratch, or start from the [core blueprint](https://app.storyblok.com/#/spaces/new/blueprint?blueprintReference=starter).
[Create one and start a free Storyblok space](https://app.storyblok.com/#/signup) No Storyblok account yet?
## Installation
In your terminal, `cd` into your Eleventy project and install the `@storyblok/js` and `dotenv` packages.
```bash
npm install @storyblok/js dotenv --save-dev
```
In the root of your project, create a `.env` file with the access token from your space.
```bash
STORYBLOK_DELIVERY_API_TOKEN="fqc3tdIuC8djNwEYl5cE5Att"
```
> [!TIP]
> Learn how to get an [access token](https://www.storyblok.com/docs/concepts/access-tokens#space-access-token) for your Storyblok project.
Every Eleventy project requires a config file at root. Create one with the following content.
.eleventy.config.js
```javascript
export default function eleventy() {
return {
dir: {
input: 'src',
},
};
}
```
Create a `storyblok.js` file under the `src/_utils` directory and add this code:
src/\_utils/storyblok.js
```javascript
import { apiPlugin, storyblokInit } from '@storyblok/js';
import 'dotenv/config';
const { storyblokApi } = storyblokInit({
accessToken: process.env.STORYBLOK_DELIVERY_API_TOKEN,
apiOptions: {
region: 'eu', // Choose the correct region from your Space.
},
use: [apiPlugin],
});
export default storyblokApi;
```
> [!WARNING]
> Ensure to set the correct `region` value depending on the server location of your Storyblok space. Learn more in the [@storyblok/js package reference](https://www.storyblok.com/docs/libraries/js/js-sdk).
The Storyblok module will make features like fetching, components registration and bridge available for your project.
## Fetch a single story
Create a `home.js` data file and use the client instance to fetch a story’s data.
src/\_data/home.js
```javascript
import storyblok from '../_utils/storyblok.js';
export default async function home() {
const response = await storyblok.get("cdn/stories/home", {
version: "draft", // or "published"
});
const { story } = response.data;
const name = story.content.name;
const body = story.content.body;
return {
name,
body
};
}
```
In a data file, we fetch a single story by its slug and return the content properties we want to use in our templates.
> [!NOTE]
> Learn more about how asynchronous data functions work in Eleventy on its [documentation page](https://www.11ty.dev/docs/data/).
Create a layout file as required by Eleventy to render a page.
src/\_includes/layouts/base.liquid
```html
{{ title }}
{{ content }}
```
{{ title }} {{ content }}