Good Morning!
1. Create a space and a story
A space is a place where you keep all the content related to a single project. A story is a content entry which contains one or a collection of components.
2. Your first API Request
Storyblok is an API based CMS for Components - so it's all about your data - execute a simple GET Request to see the basic structure of the story you're actually editing here.
Response
{"name":"home","created_at":"2017-09-04T07:00:09.016Z","published_at":"2017-09-06T14:15:26.658Z","alternates":[],"id":60486,"uuid":"19ccc8ca-55f5-4759-a787-b9759e31d270","content":{"_uid":"8ed09781-a786-407f-8d80-b651ccbbbdf6","body":[{"_uid":"75ce9ad4-eff3-4027-9a82-d7fca6d471d2","columns":[{"_uid":"94636ea4-5279-4531-ac3e-4bd479003b08","body":[{"_uid":"9802da66-85e1-4ffd-933d-efc9e1dc098c","headline":"Headline2","component":"teaser"}],"width":"col-md-4","component":"column"},{"_uid":"3be3cf51-316c-4969-84b0-e4fe0aae114a","body":[{"_uid":"b408d898-794e-48ed-ad95-09ed815548e2","headline":"Headline1","component":"teaser"}],"width":"col-md-6","component":"column"},{"_uid":"ab2921fa-ee43-42fd-b5ae-4810aa7024d9","body":[{"_uid":"2b2d0fdd-ff19-418b-9bfd-d855a2a8fccd","headline":"Headline2","component":"teaser"}],"width":"col-md-2","component":"column"}],"component":"grid"}],"component":"root"},"slug":"home","full_slug":"home","default_full_slug":null,"sort_by_date":null,"position":-24850,"tag_list":[],"is_startpage":false,"parent_id":0,"meta_data":null,"group_id":"519ca028-6f88-4e5b-9c1f-663a088834c0","first_published_at":"2017-09-06T14:15:26.658Z","release_id":null,"lang":"default","path":"","translated_slugs":[]}
You can do this API Request with every language you can think of - we made some example calls for you.
3. Create a component and define its structure
Let's create a teaser component together - press start tour.
4. Check what has changed
You've just changed content and created your first unique content component! Let's have a look at what has changed after you've done that.
Response
{"name":"home","created_at":"2017-09-04T07:00:09.016Z","published_at":"2017-09-06T14:15:26.658Z","alternates":[],"id":60486,"uuid":"19ccc8ca-55f5-4759-a787-b9759e31d270","content":{"_uid":"8ed09781-a786-407f-8d80-b651ccbbbdf6","body":[{"_uid":"75ce9ad4-eff3-4027-9a82-d7fca6d471d2","columns":[{"_uid":"94636ea4-5279-4531-ac3e-4bd479003b08","body":[{"_uid":"9802da66-85e1-4ffd-933d-efc9e1dc098c","headline":"Headline2","component":"teaser"}],"width":"col-md-4","component":"column"},{"_uid":"3be3cf51-316c-4969-84b0-e4fe0aae114a","body":[{"_uid":"b408d898-794e-48ed-ad95-09ed815548e2","headline":"Headline1","component":"teaser"}],"width":"col-md-6","component":"column"},{"_uid":"ab2921fa-ee43-42fd-b5ae-4810aa7024d9","body":[{"_uid":"2b2d0fdd-ff19-418b-9bfd-d855a2a8fccd","headline":"Headline2","component":"teaser"}],"width":"col-md-2","component":"column"}],"component":"grid"}],"component":"root"},"slug":"home","full_slug":"home","default_full_slug":null,"sort_by_date":null,"position":-24850,"tag_list":[],"is_startpage":false,"parent_id":0,"meta_data":null,"group_id":"519ca028-6f88-4e5b-9c1f-663a088834c0","first_published_at":"2017-09-06T14:15:26.658Z","release_id":null,"lang":"default","path":"","translated_slugs":[]}
Tip: You can add more fields with different types to your component and fill it with content.
5. Time to marry the data with a view
Choose to get the content via the API or using the hosted rendering service.
API / SDK | Rendering Service | |
---|---|---|
Templating Engine | Any | Liquid |
Custom Backend Logic | Yes | Predefined Liquid Filters |
Local Environment | Yes | Yes |
Dev Environment | Own | Included |
Live Environment | Own | Included |
Hosting | No | Yes |
Custom Domain | Yes | Yes |
Storyblok Subdomain | No | Yes |
Included CDN | API / Images / Assets | Everything |
Pricing | Free | Free |
You are still not sure? - let's get through this together!