Skip to main content

Storyblok

You can use Storyblok as your headless CMS. It allows you to manage content and assets in a structured way.

Create a new Space​

  1. Install Storyblok CLI by running the following command:
npm i -g storyblok
  1. Login to Storyblok by running the following command:
storyblok login
  1. Start a new Storyblok Space by running the following command to create a space in Storyblok and select the appropriate boilerplate: ( ⚠️ name your new project the same as the repository, using YOUR_NEW_PROJECT in the prompt)
storyblok quickstart
  1. You will be redirected to this URL: https://app.storyblok.com/sso. you can ignore this and close the window.

Synchronize Blueprint's Storyblok Space with your Space​

It's recommended to sync the blueprint space with your new space to ensure the folder structure and content types match. Blueprint has been designed with this structure in mind. If you prefer to set it up manually, you can use the blueprint space as a reference. If you wish to sync, follow these steps:

  1. In the terminal, run:
storyblok spaces

You will see your new space listed.

  1. Copy the ID for your new space.

  2. Sync the Blueprint Storyblok Space(this is your source space. Blueprint Storyblok space ID is 149202) with your new space (replace YOUR_NEW_SPACE_ID with the space ID you copied):

storyblok sync --type components,folders,stories,datasources --source 149202 --target YOUR_NEW_SPACE_ID
  1. Visit your new space at https://app.storyblok.com/#/me/spaces/YOUR_NEW_SPACE_ID/stories/0/0/index/0 and publish the “Home” story. This enables you to load the homepage of the website when running it locally later.

Set up environment variables​

These environment variables are essential for connecting your code to your new Storyblok space.

  1. Visit https://app.storyblok.com/#/me/spaces/YOUR_NEW_SPACE_ID/settings?tab=api and copy the Preview Access Token. Use it (enclosed in double quotes to represent a string) as the value of the NEXT_PUBLIC_STORYBLOK_PREVIEW_ACCESS_TOKEN environment variable in your .env.local file
  2. On the same URL, create a new Public Access Token. Use it as the value of the NEXT_PUBLIC_STORYBLOK_PUBLIC_ACCESS_TOKEN environment variable in your .env.local file

Configure credentials​

🔔 Storyblok requires a live deployed URL in this section. If you don't already have one, check out the Vercel section to learn how to deploy your site.

Set up your Storyblok preview secret​

This secret is required for the preview window in Storyblok to display your content as you edit it.

You can choose any string you prefer as the preview secret. Save this value and enclose it in double quotes when assigning it to STORYBLOK_PREVIEW_SECRET in your .env.local file, ensuring it is stored as a string type.

Set up your Storyblok webhook secret​

This secret is necessary for the On-Demand Incremental Static Regeneration (ISR) setup to work in Next.js and Vercel.

  1. Visit https://app.storyblok.com/#/me/spaces/YOUR_NEW_SPACE_ID/settings?tab=webhooks and click "New Webhook". You need to have the endpoint URL ready. This is the live URL of your site.
  2. Generate a new random string using this command in your terminal:
openssl rand -hex 20
  1. Copy/paste that newly generated string into the “Webhook secret” input.
  2. Save this tab.
  3. Paste that value and enclose it in double quotes when assigning it to STORYBLOK_WEBHOOK_SECRET in your .env.local, ensuring it is stored as a string type.