https://github.com/rupl/sb-blueprint-core-11ty
https://github.com/rupl/sb-blueprint-core-11ty
Last synced: 26 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/rupl/sb-blueprint-core-11ty
- Owner: rupl
- Created: 2025-07-02T07:16:20.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-08T12:43:05.000Z (11 months ago)
- Last Synced: 2025-07-08T13:55:08.238Z (11 months ago)
- Language: JavaScript
- Size: 13.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Storyblok Starter Space Blueprint: Eleventy
Integrate [Eleventy](https://11ty.dev/) with [Storyblok](http://www.storyblok.com) as a headless CMS.
This blueprint is ideal for kickstarting new Storyblok and React projects. What's inside:
- Pre-configured default blocks: `page`, `teaser`, `grid`, and `feature`.
- Support for the Visual Editor's live preview.
- Dynamic routing to fetch and render new stories automatically.
- Minimal styling.
> [!TIP]
> Follow our [Eleventy guide](https://storyblok.com/docs/guides/eleventy) for a step-by-step walkthrough and learn more about Storyblok's range of features, including rich text rendering, custom content modeling, and internationalization. See the [@storyblok/js package reference](https://storyblok.com/docs/packages/storyblok-js) for further information.
---
[](https://github.com/codespaces/new?skip_quickstart=true&machine=basicLinux32gb&repo=962644002&ref=main&geo=EuropeWest)
[](https://app.storyblok.com/#/signup)
[](https://storyblok.com/join-discord)
## Get Started
**No Storyblok account yet? [Sign up now](https://app.storyblok.com/#/signup?utm_source=docs) to experience a 14-day free trial of all features and enjoy our completely free Starter plan.**
1. Create an empty new Storyblok space
2. Create a new repository based on this template
3. Open the project on your device
4. Install dependencies
```sh
npm install
```
### Authentication
In the root of the project, create a `.env` file to store the Storyblok access token:
```sh
STORYBLOK_DELIVERY_API_TOKEN=
```
> [!IMPORTANT]
> Copy your space's preview access token from **Settings** > **Access Tokens**.
> Learn more about Storyblok [access tokens](https://www.storyblok.com/docs/concepts/access-tokens).
### Connect the Visual Editor
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:8080/`.
3. Save.
4. Open the `home` story.
5. Click **Config**.
6. Type `/` in the **Real path**.
Run the development server with HTTPS enabled:
```sh
npx @11ty/eleventy --serve
```
> [!IMPORTANT]
> To connect the Storyblok Visual Editor, the local project must run over HTTPS. Learn more in the [Visual Editor concept](https://www.storyblok.com/docs/concepts/visual-editor#local-development-via-https). See the [Visual Preview part of the Eleventy guide](https://storyblok.com/docs/guides/eleventy/visual-preview) for detailed instructions.
Back in Storyblok, open the **Home** story to start editing.
Happy building!
## Resources
- To learn more about what you can do with Storyblok, visit [our documentation and learning hub](https://www.storyblok.com/docs).
- To learn more about Eleventy, check the [official documentation](https://11ty.dev).
### Support
- Have questions, need help, want to chat with other users? [Join our Discord community](https://storyblok.com/join-discord).
- Visit the Storyblok [Help Center](https://support.storyblok.com/hc/en-us).