Full Static with NuxtJS and Storyblok

A boilerplate project designed to demonstrate the benefits of using Jamstack and the easy configuration of a project with NuxtJS and Storyblok.

Storyblok space Setup

In this section we are going to look at how to define the component schemas needed for this project in our Storyblok space. What properties, type of fields, we have in each one and, finally, we will see an example of using these components to create a new page.

Create an account and start an space in Storyblok

Go to app.storyblok.com, select Sign up and create an account. When it's ready, create an empty space and follow the next steps.

Blocks schema

Content type

1. Page template

Field Name	Field Type	Options
title	Text
body	Blocks	Allow only specific components to be inserted: Groups -> Organisms

Body

Nestable Molecules

1. Heading Section

Field Name	Field Type
subtitle	Text
title	Text
intro	Textarea

2. Benefit Card

Field Name	Field Type	Options
icon	Asset	Images
color	Single-Option	Source: self; Options (name/value): orange/orange, purple/purple, blue/blue, green/green
name	Text
description	Textarea

Color single-option definition:

3. Tech Card

Field Name	Field Type	Options
logo	Asset	Images
name	Text
url	Link

Nestable Organisms

1. Benefits

Field Name	Field Type	Options
heading	Blocks	Allow only specific components to be inserted: Component -> Heading Section (1 max)
benefits	Blocks	Allow only specific components to be inserted: Component -> Benefit Card (6 max)

Heading	Benefits

2. Tech Stack

Field Name	Field Type	Options
heading	Blocks	Allow only specific components to be inserted: Component -> Heading Section (1 max)
stack	Blocks	Allow only specific components to be inserted: Component -> Tech Card

Heading	Benefits

Components use case: Homepage

For the homepage we will fill in the title field and choose the organisms we want in the body.

In this example, as in the live demo, we'll add Benefits and Tech Stack organisms.

And this is how the home Config tab will look like:

For the organisms, let's see which blocks to add to them:

Benefits Organism Content

1. Adding a Heading Section molecule

2. Adding Benefit Card molecules

Tech Stack Organism Content

1. Adding a Heading Section molecule

2. Adding Tech Card molecules

Frontend Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate

For detailed explanation on how things work, check out Nuxt.js docs.