Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

Storyblok now on AWS Marketplace: Read more

Oโ€™Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

Setting Up the Blog Content Structure in Storyblok

Try Storyblok

Storyblok is the first headless CMS that works for developers & marketers alike.

  • Home
  • Tutorials
  • Setting Up the Blog Content Structure in Storyblok
PART 3/7:

This article is written in cooperation with VueDose. To start reading from the beginning check out the first article or use TOC at the bottom to jump to any other article.

In the previous part of this guide you implemented an ArticleCard UI component to show the data of articles. But that data was hard-coded on the page.

In this article, you will learn how to use Storyblok to create the blog content data structure that you will need to build NarutoDose, a simpler version of VueDose.

What, exactly, is the blog data structure we need to build? Let's make it simple:

  • Article: it must have a title, description, publication date and the article content. An article must be written by an author.
  • Author: name, bio and avatar image.
  • Topics: an article might belong to different topics

With it, we cover the basics of a blog data structure: content, relationships and categorization. You can always make it more complex from there.

Additionally, Storyblok gives us free search functionality (even full-text). You'll see that later in another part of the series.

Enough talking, let's start building it!

Section titled Creating the Blog Structure Creating the Blog Structure

First, you need to sign up for Storyblok, assuming you haven't done it already. It's free, and possibly the only cloud-based headless CMS out there with a quite decent free plan.

Then, create a space. I'd name it NarutoDose.

If it's the first time you're using Storyblok, there is an easy to follow getting started guide so you can quickly grasp the basics.

Section titled Articles Articles

In order to create the data of the articles, you need to create a content type which you can do while creating a folder. Go to the content tab and create an "articles" folder by clicking the folder in the top-right part of the page.

Choose "add new" content type and name it Article.

Creating new article in Storyblok

Storyblok is well known for its visual editor since it allows content creators to use components (like lists, carousels, page, separator...), coined as bloks, to build sections and pages by themselves.

These components are created on Storyblok and implemented in your favourite frontend technology.

But we're not using bloks, we're just using the content types to build schemas and work with content using the Content Delivery API.

To make this more comfortable, let's disable the visual editor and restrict the content type to only articles:

Disable visual editor for Article

Save, and go to the Articles folder.

Now you need to define the article content type. You can do that in different ways, but maybe at this point the easiest way is to do it while creating the first article.

For that, click the "+ Entry" button and give the article a title. Once you do that, go to the article page where we can create the article content type schema by clicking the "Define schema" button:

Define schema of the Article

Create the schema as follows, setting title and description as text, date as datetime and content as markdown type:

Schema of the Article

Save it and publish it.

You can now see how it looks like when we call the API- do this by clicking the Draft or Published JSON buttons, in the selections under the Publish button:

Show JSON data of the article

By the way, you might be confused that I've given the same title for the story name as for the article title. I was confused too.

You can see that the story name is equivalent to a file name. The title, instead, is a custom name we gave it, and in the JSON appears inside the content key:

Preview of JSON data of the Article

I believe is good not to use the story name for the article, product or item purposes, because it depends on the "file name". Instead, better to add a title which is not dependent on that "file system".

Section titled Authors Authors

Following the same steps, let's create the authors. Go to the root folder and create an Authors folder. Then create the first author to set the schema as this:

Schema of the Author

The name is a text field, avatar an asset, and bio a textarea field.

To create the first author... Well, I'm sure you know how to fill in the first author data ๐Ÿ˜‰.

Section titled Authors and Articles Relationship Authors and Articles Relationship

Once you create an author, we can create a relationship between articles and authors.

Let's go back to the article we created before and open its schema. Add an "author" field and set the type to Single Option.

Here's the important step: when you choose Single Option type, you'll see a source field. It defines the source from where the selection is going to be filled in from and is what you need to use to create the relationship.

Set it to "Stories" and write "authors/" on the Path to folder of stories in order to indicate what stories the select field will use to fill itself.

Define the author of the article.

Save it and you'll see the author we created in the author options field:

Final dropdown to select the author of the article.

Section titled Topics Topics

To categorize the topics, you could create a content type, which is necessary if the topic has more than just a name field.

Or, to keep it simple, we can just use tags. You can set them per story and they're useful for searching and counting, as you will soon see, so we have some features for free ๐Ÿ˜‰.

Additionally, a story can have multiple tags that perfectly cover our use case.

For now, just go to the article we created and add a tag or two:

How to use tags on the article.

Section titled Recap Recap

At this point, you have created the basic blog structure wherein you have articles, authors and topics, including relationships and interesting features, such as search and categorization.

You learned how to create different kinds of content, as well as their schema, and choose from different fields depending on your needs.

The next step is to get our hands on the Content Delivery API to access this data and integrate it with the NarutoDose Nuxt app.

Aren't you excited? ๐Ÿ˜Ž

NEXT PART:

Continue reading and find out how to Show the Blog Content in Nuxt Using Storyblok API.

ResourceLink
Part 1: Setting up a full static Nuxt sitehttps://vuedose.tips/setting-up-a-full-static-nuxt-site
Part 2: Creating UI components based on a Design System in Vue.jshttps://vuedose.tips/creating-ui-components-based-on-a-design-system-in-vue-js
Part 4: Show the Blog Content in Nuxt Using Storyblok APIhttps://www.storyblok.com/tp/show-blog-content-in-nuxt
Part 5: Tags and Search Functionality in Nuxt Using Storyblok APIhttps://vuedose.tips/tags-and-search-functionality-in-nuxt-using-storyblok-api
Part 6: Optimize SEO and Social Media Sharing in a Nuxt bloghttps://vuedose.tips/optimize-seo-and-social-media-sharing-in-a-nuxt-blog
Part 7: Generate and deploy the blog as a full static Nuxt sitehttps://vuedose.tips/generate-and-deploy-the-blog-as-a-full-static-nuxt-site
Getting Started Guidehttps://www.storyblok.com/docs/guide/getting-started
Nuxt.jshttps://nuxtjs.org/

Author

Alex Jover Morales

Alex Jover Morales

Vue team member, passionate about communication and open source. Alex created vuedose.tips, the book "Testing Vue components with Jest" and several articles and courses on platforms like Egghead.io and Digital Ocean. He co-organizes Alicante Frontend and Vue Day Spain communities and created widely-used libraries such as tslint-config-prettier or v-lazy-image. In his free time, you'll find him traveling, enjoying outdoor activities, and having beers with friends ๐ŸŒŽ๐Ÿ‹๏ธโ€โ™‚๏ธ๐Ÿป