English versionEN

Crash course into Astro and Storyblok

Please sign in to watch this workshop.

Headless architecture has gained immense popularity in recent years for its ability to decouple the frontend and backend, empowering developers to create engaging, interactive, and scalable web applications.

In this workshop, we will quickly take a dive into the Headless World and Architecture.

Additionally, we will build a blog website super quickly using Storyblok, a headless CMS that offers a real-time preview feature with nestable component approach, and Astro (3.0) which is already creating a buzz with the new app directory.

- Master headless CMS fundamentals

- Master an Astro & headless CMS approach

- Use Atomic design in your Astro & Storyblok application

- Creating pages, adding content and understanding how the dynamic routing works with headless

This workshop has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.

FAQ

Yes, the workshop is heavily focused on hands-on activities. Participants are guided through the process of building a blog application using Astro and Storyblok, from setting up the project to integrating dynamic content and deploying the application.

While the workshop primarily covers development aspects up to the creation of the blog application, participants interested in deployment can refer to the hands-on tutorial provided by Storyblok. This tutorial offers detailed steps on deploying the application, available through links shared in the workshop resources.

Yes, the Astro Storyblok workshop includes a segment on creating dynamic menus. Participants learn to add new dynamic components like config components, which enable the creation and management of dynamic navigation menus that can be easily updated through the Storyblok interface.

The workshop utilizes several key features of Storyblok, including real-time visual editing, the ability to use headless CMS with Astro, and dynamic content management. Participants learn to create and manage content dynamically using Storyblok's visual editor and APIs.

Materials and resources for the Astro Storyblok workshop are provided on a Notion page shared during the workshop. This page contains all the necessary source codes, links to additional resources, and step-by-step instructions to follow along with the workshop activities.

The purpose of the Astro Storyblok workshop is to provide participants with an introduction to using Astro in combination with the headless CMS Storyblok. The workshop aims to equip attendees with the knowledge to build applications using Astro and Storyblok, focusing on integrating headless CMS features and atomic design principles into their projects.

headless cms astro

Arisa Fukuzaki

119 min

04 Dec, 2023

Comments

Available in other languages:

Watch more workshops on topic

Fetch, useEffect, React Query, SWR, what else?

React Advanced 2023

102 min

Fetch, useEffect, React Query, SWR, what else?

Top Content

Workshop

Ondrej Polesny

In this workshop, first, we’ll go over the different ways you can consume APIs in React. Then, we’ll test each one by fetching content from a headless CMS (with both REST and GraphQL) and checking in detail how they work.
While there is no advanced React knowledge required, this is going to be a hands-on session, so you’ll need to clone a preconfigured GitHub repository and utilize your preferred React programming editor, like VS Code.
You will learn:- What diverse data fetching options there are in React- What are advantages and disadvantages of each- What are the typical use cases and when each strategy is more beneficial than others

headless cms react query react query vs useeffect react swr react useeffect swr vs react query

Building Blazing-Fast Websites with Next.js and Sanity.io

React Summit 2023

71 min

Building Blazing-Fast Websites with Next.js and Sanity.io

Workshop

2 authors

Join us for a hands-on workshop where we'll show you how to level up your React skills to build a high-performance headless website using Next.js, Sanity, and the JAMstack architecture. No prior knowledge of Next.js or Sanity is required, making this workshop ideal for anyone familiar with React who wants to learn more about building dynamic, responsive websites.
In this workshop, we'll explore how Next.js, a React-based framework, can be used to build a static website with server-side rendering and dynamic routing. You'll learn how to use Sanity as a headless CMS to manage your website’s content, create custom page templates with Next.js, use APIs to integrate with the CMS, and deploy your website to production with Vercel.
By the end of this workshop, you will have a solid understanding of how Next.js and Sanity.io can be used together to create a high-performance, scalable, and flexible website.

next.js headless cms sanity react

Crash Course Into Astro, Kontent.ai and Portable Text

React Summit 2023

91 min

Crash Course Into Astro, Kontent.ai and Portable Text

Workshop

Ondrej Polesny

During this crash course, we’ll create a new project in the headless CMS, create the content model and data using the Kontent.ai CLI. Then, we’ll use the content to build an Astro website including front-end components and rich text resolution using Portable Text.
This will be hands-on workshop, you’ll need VS Code, Git, NPM and basic knowledge of JavaScript. Don’t worry, I will explain all the steps as we advance through the workshop and you will be able to directly ask any questions.

headless cms portable text react astro

Crash Course into Remix & Storyblok

Remix Conf Europe 2022

162 min

Crash Course into Remix & Storyblok

Workshop

2 authors

You may read already about Remix. You probably already used it, and recently you may hear a lot about the headless CMSs. In this quick course, we will put all the pieces together, and I will show you why Storyblok in combination with Remix is the best combo for your next project. Stop by and try it yourself!
Table of content: - Introduction to Remix, atomic design & the headless world- Environment setup- Creating pages and understanding how the dynamic routing splat routes works- Future tips and Q&A
Prerequisite(s): Node.js installed, GitHub account.

headless cms

Localizing Your Remix Website

React Summit 2023

154 min

Localizing Your Remix Website

Workshop

Harshil Agrawal

Localized content helps you connect with your audience in their preferred language. It not only helps you grow your business but helps your audience understand your offerings better. In this workshop, you will get an introduction to localization and will learn how to implement localization to your Contentful-powered Remix website.
Table of contents:- Introduction to Localization- Introduction to Contentful- Localization in Contentful- Introduction to Remix- Setting up a new Remix project- Rendering content on the website- Implementing Localization in Remix Website- Recap- Next Steps

headless cms web development remix internationalization

Astro: All Hands On

React Day Berlin 2024

126 min

Astro: All Hands On

Workshop

Elian Van Cutsem

Mentorship available

The web is capable of way more than we might think. During this workshop, we'll explore some lesser known parts of the web. Did you know you can control the web via webHID or send and receive notes to devices via webMIDI? In this interactive talk we might make some music together, by controlling synthesisers and exploring the wide range of strange web API's. All that in vanilla JavaScript, no frameworks needed.

astro

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

You Don’t Know How to SSR

DevOps.js Conf 2024

23 min

You Don’t Know How to SSR

Emanuele Stoppa

Active contributor to the Biome project

The Talk covers the speaker's personal journey into server-side rendering (SSR) and the evolution of web development frameworks. It explores the use of jQuery for animations in SSR, the challenges faced in integrating React with Umbraco, and the creation of a custom SSR framework. The Talk also discusses the benefits of Next.js and the use of serverless artifacts for deployment. Finally, it highlights the features of Astro, including its function per route capability.

next.js serverless astro

Opt in Design – The New Era of React Frameworks

React Advanced 2023

23 min

Opt in Design – The New Era of React Frameworks

Watch video: Opt in Design – The New Era of React Frameworks

Ben Holmes

Ben is a full-stack developer, open source maintainer, and whiteboardist making the web a little better.

This Talk discusses opt-in design in web development, focusing on API design and understanding good defaults. Opt-in design allows developers to start with minimal tools and gradually add complexity as needed. The principles of opt-in design include finding the lowest common denominator, making complexity easy to add, and prioritizing the user experience. The Talk also explores the concept of opt-in design in React and Astro, as well as the comparison between React and Solid frameworks. Server rendering and streaming in React are highlighted, along with the importance of suspense boundaries for a better user experience.

builders and founders astro frameworks preact

All Things Astro

React Day Berlin 2023

28 min

All Things Astro

Watch video: All Things Astro

Elian Van Cutsem

Mentorship available

Astro Ambassador

Astro is a powerful framework for content-driven websites, with its own syntax and the ability to use favorite front-end libraries. It has seen significant improvements in Astro 2 and Astro 3, including view transitions and improved performance. Astro 4 introduces features like a powerful dev toolbar, content caching, and internationalization support. The Astro community is highly regarded, and Astro is being used for production websites. Astro also supports migrating legacy websites and integrating with headless CMSs.

astro

How to properly handle URL slug changes in Next.js

TypeScript Congress 2022

10 min

How to properly handle URL slug changes in Next.js