Add a CMS to Ruby on Rails in 5 minutes
Storyblok is the first headless CMS that works for developers & marketers alike.
On May 13th, 2024, Storyblok started gradually rolling out a new design for its Visual Editor. Therefore, the Visual Editor product screenshots depicted in this resource may not match what you encounter in the Storyblok App. For more information and a detailed reference, please consult this FAQ on the new Visual Editor design.
In this short article, we will show you how you can use the API-based CMS Storyblok in combination with the Framework “Ruby on Rails”. At the end of this article, you will have a Ruby on Rails application which renders components filled with data from Storyblok.
You can also clone the code of this tutorial at github.com/storyblok/rails-boilerplate.
Section titled 1. Create a new Ruby on Rails project 1. Create a new Ruby on Rails project
You can add Storyblok to existing projects or new ones. I will show how to add Storyblok to a new project. Execute the following commands so you get a new project ready to start with:
Section titled 2. Add Storyblok's Ruby SDK 2. Add Storyblok's Ruby SDK
Let’s install the headless CMS client and liquid as template language by adding following lines to our Gemfile
.
After adding the gems execute bundle install
and start the rails app.
Section titled Create a Storyblok space Create a Storyblok space
After you have started your project you need to get the Storyblok preview token and tell Storyblok where your app is running. Create a new Storyblok space and click on the "Home" content item. Note down your preview token
and insert localhost:3000
as your host.
Section titled 3. Generate the pages controller 3. Generate the pages controller
Storyblok is a page centric CMS so we create a controller that handles all requests with a wildcard route.
Section titled Add the index method Add the index method
Add following code to pages_controller.rb
and exchange YOUR_TOKEN
with the preview token from Storyblok's settings page.
Section titled Extend the routes file Extend the routes file
Add a wildcard route to route all requests to the pages controller.
Section titled 4. Add the page template 4. Add the page template
Add the main page template page.liquid
in layouts
which includes the Storyblok Javascript bridge. Optionally you can add a conditional check for the parameter _storyblok in the url to include the Storyblok's Javascript bridge only when the user is in the editing mode.
Section titled 5. Create the first editable components 5. Create the first editable components
The demo content that get's created when adding a new space in Storyblok has already some components preconfigured. To make this components clickable in the editor the only thing that you need to do is to add {{ blok._editable }}
before a DOM element.
Let's create our first component templates _teaser.liquid
, _grid.liquid
and _feature.liquid
in the components
folder.
Section titled Create _teaser.liquid Create _teaser.liquid
Section titled Create _grid.liquid Create _grid.liquid
In this component we iterate over columns to include other components dynamically.
Section titled Create _feature.liquid Create _feature.liquid
At the end you should be able to see a teaser and three feature blocks that are clickable in Storyblok.
Section titled 6. Create global components 6. Create global components
To create global content like a header navigation you can define a new content type. Create a new "Story" name it "Global" and type setting
in the content type field.
Add nav_links
with type "Blocks" to the schema of the settings content type and then create nav_item blocks with name
and link
in the schema definition.
Section titled Extend the pages_controller.rb Extend the pages_controller.rb
After you have published the global content item add the api call to your controller:
Last step is to add the components to your Ruby on Rails project:
Section titled Add _header.liquid Add _header.liquid
Section titled Add _nav_item.liquid Add _nav_item.liquid
Section titled Conclusion Conclusion
It's incredibly easy to build a flexible block based website with Ruby and Rails and Storyblok. In case you want to extend an existing project with a blog be sure to checkout the how to create blog content structure article.
Resource | Link |
---|---|
Github repository of this Tutorial | github.com/storyblok/rails-boilerplate |
Ruby on Rails | Ruby on Rails |
Storyblok App | Storyblok |