Build accessible websites with Storyblok and Astro

This repository includes all the code necessary to follow our latest Build Accessible Websites with Storyblok and Astro tutorial.

Get started

No Storyblok account yet? Sign up now to experience a 14-day free trial of all features and enjoy our completely free Starter plan.

1. Clone this repository

git clone https://github.com/storyblok/tutorial-astro-a11y.git

2. Install all dependencies

npm install

3. Authenticate

Rename the file .env.example to .env and provide your Storyblok access token (find it under Settings > Access Tokens in your Storyblok space):

STORYBLOK_DELIVERY_API_TOKEN="<REPLACE_WITH_YOUR_TOKEN>"

Set up the space

Use storyblok CLI to push the schema to your space.

Replace SPACE_ID with your space ID (find it under Settings > Space):

storyblok components push --space SPACE_ID

To render a preview of the local project in the Visual Editor, follow these steps:

1. Navigate to Settings > Visual Editor.
2. Set the default environment to https://localhost:4321/.
3. Navigate to Content and open the home story.
4. Click Config and type / in the Real path.

Run the project locally

Start Astro's development server:

npm run dev

Happy building!