Curso intensivo sobre Astro y Storyblok

Rate this content
Bookmark
Slides

La arquitectura sin cabeza ha ganado inmensa popularidad en los últimos años por su capacidad para desacoplar el frontend y el backend, permitiendo a los desarrolladores crear aplicaciones web atractivas, interactivas y escalables.


En esta masterclass, nos sumergiremos rápidamente en el Mundo y la Arquitectura sin Cabeza.


Además, construiremos un sitio web de blog súper rápido utilizando Storyblok, un CMS sin cabeza que ofrece una función de vista previa en tiempo real con un enfoque de componente anidable, y Astro (3.0) que ya está creando revuelo con el nuevo directorio de aplicaciones.


- Domina los fundamentos de CMS sin cabeza

- Domina un enfoque de Astro & CMS sin cabeza

- Usa el diseño atómico en tu aplicación Astro & Storyblok

- Creación de páginas, adición de contenido y comprensión de cómo funciona el enrutamiento dinámico con sin cabeza

Arisa Fukuzaki
Arisa Fukuzaki
119 min
04 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta masterclass introduce Astro Storyblok y lo combina con el CMS sin cabeza, Storyblok. Cubre temas como CMS sin cabeza, JAMstack, y el uso del diseño atómico. Los participantes aprenden cómo configurar una cuenta de Storyblok, configurar la URL de vista previa e importar esquemas de componentes. También exploran la edición en tiempo real, los componentes anidados y los menús dinámicos. La masterclass concluye con la personalización de componentes existentes, la adición de imágenes y el uso del componente de imagen de Astro.

Available in English

1. Introducción a la Masterclass de Astro Storyblok

Short description:

Hola a todos. Gracias por unirse a mi masterclass sobre Astro Storyblok. En esta masterclass, exploraremos la introducción de Astra y lo combinaremos con el CMS sin cabeza, Storyblok. Utilizaremos el diseño atómico y construiremos una aplicación de blog juntos. Aunque no cubriremos la implementación, hay un tutorial práctico de Storyblok para que explores después de la masterclass. Comencemos evaluando su conocimiento sobre CMS sin cabeza. ¿Has oído hablar de algún CMS sin cabeza?

Hola a todos. Oficialmente, un gran día. Y muchas gracias por unirse a mi masterclass. Espero, sí, que estén emocionados, como yo. Esto es parte del Día de React en Berlín. No estoy en Berlín, técnicamente, en la conferencia. Pero si estás interesado, sé que tienen charlas muy interesantes y la conferencia en marcha. Y supongo que también tienen las charlas virtuales también. Asegúrate de echarle un vistazo. De todos modos, hoy nos reunimos para un curso intensivo en Astro Storyblok. Así que voy a empezar compartiendo uno. Diría que, como, no exactamente una hoja de trucos, pero podría ser una hoja de trucos. Así que durante esta masterclass, voy a estar usando esta página de notion y voy a compartir mi pantalla para mostrarles de qué estoy hablando. Es una página de notion. Pero tiene un montón de información que querrás saber mientras te unes a esta masterclass. Y también, hay muchas fuentes. No te preocupes por, ya sabes, que vaya rápido por ahora. Porque eso es algo de lo que vamos a hablar y ver de todos modos. Y aquí está el contenido de la masterclass. Así que voy a estar compartiendo bastante a menudo esta pantalla, la que te envié el enlace justo ahora. Si acabas de unirte y no puedes ver, digamos, la conversación pasada, por favor siéntete libre de escribir tu pregunta. Y también, no olvidar. Así que ya que estamos haciendo esto en línea, en su mayoría va a ser como yo compartiendo mi pantalla y mostrándote cómo también puedes, tú sabes, como, seguir junto conmigo. Y si tú, digamos, como, te quedas un poco atrás, no hay problema. Por eso tengo esta nota de notion para la masterclass, porque, déjame bajar un poco aquí. Así que aquí, desde aquí va a ser la parte práctica. Pero aquí tengo, como, un par de atajos, que también puedes echar un vistazo. Y luego en, diría que, como, cada parte, tengo, déjame bajar un poco aquí. Sí, esto aquí, como una pequeña nota, como cada parte al final, tengo algo que puedes, de hecho, como, bifurcar del repositorio de la masterclass, para que no te quedes, ya sabes, como, atrás. Y puedes simplemente, ya sabes, como, bifurcar la rama correcta, en la que estabas trabajando conmigo, y luego simplemente intercambiar ciertas claves, que también voy a explicarte. Así que esa es otra regla de la casa que quería mostrarte, de hecho, y decirte. Y este es el repositorio de la masterclass, que también voy a compartir contigo ahora. Así que, espero que puedas ver eso. Sí, diría que, como, cuando tienes acceso aquí, te recomendaría que abras esta página de notion para esta masterclass, para que, ya sabes, como, tengas todo el código fuente que puedes simplemente copiar y pegar, entonces no tendrías ningún error de tipeo. Y para empezar, primero que nada, el propósito de esta masterclass, muy rápidamente, es sumergirse en, ya sabes, la introducción de Astra. Así que, si eres totalmente nuevo en Astra, eso también está totalmente bien, pero no solo, ya sabes, sumergirse en el mundo de Astra, también vamos a combinarlo con el headless CMS, que va a ser un bloque de historias esta vez. Así que, con esta masterclass, podrás obtener los dos conocimientos a la vez. Así que, por eso, como, tenemos el, diría que, como, esquemas o una tabla de contenido para esta masterclass aquí, y vamos a usar el diseño atómico, y por eso elegí este headless CMS en este caso. Y luego, sí, vamos a ver el ejemplo de la aplicación de Astra y story block con Hands-On, no solo echándole un vistazo. Vamos a construir juntos. Así que, al final de esto, vamos a construir el blog. Digamos, sí, la aplicación de blog, que también puedes implementar más tarde. Pero en esta masterclass, digamos que desde el marco de tiempo que tenemos, no vamos a entrar en la implementación. Pero si estás interesado, hay la fuente, de hecho, el tutorial práctico que es proporcionado por el lado de story block. Así que, puedes, ya sabes, echarle un vistazo después de la masterclass e implementarlo. Bien. Así que, esa es la introducción. Y las fuentes, las voy a saltar, porque las vamos a cubrir de todos modos juntos en la masterclass. Pero para alinearnos con, digamos, como, tus niveles de conocimiento, quiero asegurarme primero de dónde podemos empezar, porque habrá diferentes puntos de partida, dependiendo de la audiencia de la masterclass. Así que, puedes participar para escribir tu respuesta, sí o no, a las preguntas que voy a hacerte. Así que, creo que voy a empezar desde aquí, como cuánto tienes el conocimiento sobre el headless CMS? ¿Conoces o has oído hablar de algún headless CMS? Headless sistema de gestión de contenidos. Puedes responderme sí o no en el chat. Y dependiendo de eso, voy a empezar desde algo muy básico, qué es headless CMS, o podemos pasar a la siguiente pregunta. Jumpstart. Okay. Veo no de Anna. Khan también dice no. Okay. Patricia también dice no. Okay. Veo algunos sí. Sí. Sí. Okay. Okay.

2. Introducción a CMS sin cabeza y JAMstack

Short description:

El CMS sin cabeza separa los lados de front-end y back-end, mejorando la seguridad y permitiendo flexibilidad en la elección de tecnologías de front-end. JAMstack, que significa JavaScript, API y Markup, interactúa con las API para obtener datos, evitando la interacción directa con las bases de datos. Storyblok es el CMS sin cabeza utilizado en esta masterclass. Crea una cuenta gratuita en el sitio web de Storyblok para continuar.

Mm-hmm. Lo conozco, pero no lo he probado. Bien. Veo una buena mezcla. Entonces, para ser más justo con todos, creo que voy a cubrir rápidamente qué es un headless CMS. La explicación más sencilla sería como la parte de la cabeza y la parte del cuerpo, que se podría traducir, digamos, como el lado del front-end y el lado del back-end. Estos no están en un solo lugar. Entonces, a diferencia del sistema de gestión de contenido monolítico como WordPress, Drupal, la arquitectura de headless CMS es que divides el lado del front-end y el lado del back-end. Entonces, desde la perspectiva de la seguridad, también es bastante más seguro porque, sabes, si quieres atacar con fines maliciosos, cosas así, entonces necesitas atacar varios lugares en lugar de solo uno. Entonces, de esta manera, también es mejor. Y lo bueno es que en el mundo monolítico, tienes que ceñirte a cierta tecnología como PHP, cosas así. Pero con el headless CMS, porque interactúas, sabes, para obtener los datos a través de las API. Y quiero decir, el lado del front-end es completamente, sabes, agnóstico del lado del back-end, por lo que puedes elegir cualquier tipo de, la mayoría de, las tecnologías de front-end. Por eso puedes, sabes, usar headless CMS con Astro, como en la masterclass de hoy. Entonces, sí, eso es algo que puedo decir muy rápidamente.

Bien. Entonces, la siguiente pregunta, cubrimos esta parte. Y diría, ¿conoces JAMstack? Puedes decir sí o no en el chat. Y dependiendo de eso, decidiré ir a esta parte o esta parte. Bien. Bien. Veo, sí. Mayormente no hasta ahora. Sí, solo he oído hablar de ello. Veo algunos sí. Bien. Entonces también voy a cubrir rápidamente eso. Y sí. Ah, por cierto, olvidé decirte, pero estos son en realidad los enlaces que puedes ver más tarde. Entonces, si no entiendes, digamos, lo que expliqué rápidamente, entonces siempre puedes, sabes, venir a esos enlaces. Estos son videos muy rápidos que también puedes ver. El video no está disponible. Oh, ¿no está disponible? Déjame comprobar rápidamente. Oh, no. Eso es muy malo. Bien. Lo siento por eso. Creé este contenido en realidad no hace mucho tiempo. En ese momento estaba funcionando. Pero, de todos modos, voy a encontrar uno mejor para ti después de la masterclass. Pero, de todos modos, el JAMstack es, en primer lugar, como, JAM de JAMstack, en primer lugar, significa JavaScript y la A significa API y la M significa Markup. Y entonces, lo que pasa es que interactúas con las API para obtener los datos. Entonces, no va a ser, como, sabes, en el mundo monolítico que necesitas interactuar directamente con las bases de datos. Y probablemente hayas visto algunos de los casos o hayas oído hablar de los casos en que los usuarios no desarrolladores también tienen acceso a esas bases de datos. Y entonces, hacen lo mejor que pueden para modificar algunas cosas. Pero luego, se vuelve demasiado difícil, digamos, arreglar si algo sale mal. Entonces, sí. Y para prevenir eso, el headless CMS utiliza, digamos, un enfoque primero en API. Y eso es lo que el JAMstack, diría, como, se ajusta mejor. O en realidad, va en la misma dirección. Podría explicarte o mostrarte, como, más recursos. Pero el punto de esta masterclass no es profundizar en, digamos, muchas lógicas o la teoría sobre el JAMstack. Entonces, creo que voy a terminar alrededor de qué es JAMstack en este punto. Pero vas a ver cómo voy a interactuar, digamos, para obtener los datos, recuperarlos y luego renderizarlos al final a través de las API. Entonces, creo que cubrimos esta parte.

Y esta pregunta, la última pregunta, que quiero hacerte sería, ¿conoces Storyblok? Ese es en realidad el headless CMS que vamos a usar. Mi suposición es que muchos no. Sí, veo no, no, no. Oh, he oído hablar de él. Bien. Bien. Bien. Me gusta que todos respondan tan rápido. Muchas gracias. Y sí, estoy feliz de mostrarte, en realidad. Entonces, creo, ¿qué debería hacer? Sí, creo que voy a mostrarte directamente, sí, este sitio web. Entonces, ya puedes abrir este sitio web para ir al sitio de Storyblok. Y de todos modos, desde aquí, te pediría que crees una cuenta. Entonces, mientras estás escuchando, qué es Storyblok, ya puedes, sabes, acceder a esta URL que te envié. Y luego si no tienes una cuenta, puedes hacer clic en probar gratis. Crear cuentas es gratis. Y luego si ya tienes una cuenta y olvidaste, cosas así, puedes, sabes, acceder para iniciar sesión. Y mientras estás creando tu cuenta de Storyblok o averiguando si ya tienes una cuenta o no,

Watch more workshops on topic

Fetch, useEffect, React Query, SWR, what else?
React Advanced Conference 2023React Advanced Conference 2023
102 min
Fetch, useEffect, React Query, SWR, what else?
Top Content
WorkshopFree
Ondrej Polesny
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
Building Blazing-Fast Websites with Next.js and Sanity.io
React Summit 2023React Summit 2023
71 min
Building Blazing-Fast Websites with Next.js and Sanity.io
WorkshopFree
Nancy Du
Nataliya Ioffe
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.
Crash Course into Remix & Storyblok
Remix Conf Europe 2022Remix Conf Europe 2022
162 min
Crash Course into Remix & Storyblok
WorkshopFree
Facundo Giuliani
Arisa Fukuzaki
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.
Localizing Your Remix Website
React Summit 2023React Summit 2023
154 min
Localizing Your Remix Website
WorkshopFree
Harshil Agrawal
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
Crash Course Into Astro, Kontent.ai and Portable Text
React Summit 2023React Summit 2023
91 min
Crash Course Into Astro, Kontent.ai and Portable Text
WorkshopFree
Ondrej Polesny
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.
Deploying a decoupled restaurant review site to production with Strapi and Platform.sh
Node Congress 2022Node Congress 2022
134 min
Deploying a decoupled restaurant review site to production with Strapi and Platform.sh
WorkshopFree
Shedrack Akintayo
Chad Carlson
2 authors
Node.js has become an increasingly popular language to build and deploy backend APIs. In a world of legacy CMSs adopting decoupled implementations, plenty of frameworks have sprung up to classify themselves as "headless" CMSs, designed from the start to provide an easy way to personalize content models, administer permissions and authentication, and serve a content API quickly.
Strapi, one of the leaders in this space, has recently released their v4 version of the framework, and with Platform.sh it can be deployed alongside a number of frontends within the same project, giving a drastically simplified development experience working with decoupled sites. In this workshop, we'll deploy a Strapi demo application, which has been configured to serve a restaurant review site.
Piece piece you will add database services, tests, and frontends, all within the safety of isolated development environments. At the end, each user will have a functioning decoupled site, and some greater understanding of working with decoupled sites in production.

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

Opt in Design – The New Era of React Frameworks
React Advanced Conference 2023React Advanced Conference 2023
23 min
Opt in Design – The New Era of React Frameworks
Picking up a new technology, developers stick with defaults. It's a fact that every tool from JQuery to NextJS has needed to face. At their worst, defaults ship hundreds of wasted JS kilobytes for routing, state, and other baggage developers may never use. But at their best, defaults give us a simple baseline to start from, with a clear path to add the exact set of features our project demands. This is the magic of opt-in design.
Let's see how smart defaults guide modern frontend tools from Astro to React Server Components, and why this new era reshapes your workflow, and performance metrics, for the better.
You Don’t Know How to SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
You Don’t Know How to SSR
A walk-through of the evolution of SSR in the last twelve years. We will cover how techniques changed, typical problems, tools you can use and various solutions, all from the point of view of my personal experience as a consumer and maintainer.
All Things Astro
React Day Berlin 2023React Day Berlin 2023
28 min
All Things Astro
Astro 3 was released a while ago and brought some amazing new features with it. In this talk, we’ll take a look at some of the newly released features in Astro 3, do some live coding and have some fun. We can take a look at what’s coming next in Astro 4 and there also might be a 'one more thing
How to properly handle URL slug changes in Next.js
TypeScript Congress 2022TypeScript Congress 2022
10 min
How to properly handle URL slug changes in Next.js
Top Content
If you're using a headless CMS for storing content, you also work with URL slugs, the last parts of any URL. The problem is, content editors are able to freely change the slugs which can cause 404 errors, lost page ranks, broken links, and in the end confused visitors on your site. In this talk, I will present a solution for keeping a history of URL slugs in the CMS and explain how to implement a proper redirect mechanism (using TypeScript!) for dynamically generated pages on a Next.js website.

Add to the talk notes: https://github.com/ondrabus/kontent-boilerplate-next-js-ts-congress-2022 
Remixing WordPress: Building a Headless Site with Remix, WPGraphQL, and Web Fundamentals
React Summit 2022React Summit 2022
21 min
Remixing WordPress: Building a Headless Site with Remix, WPGraphQL, and Web Fundamentals
One of the largest draws of headless or decoupled WordPress architecture is that we can endlessly remix the WordPress CMS that content creators love with the latest and greatest of web technology. This presentation will demonstrate how quickly a developer can get up and running with headless WordPress development using the Remix full stack framework. Using open source tools like WPGraphQL and Atlas Content Modeler, you can transform your WordPress site into a powerful headless CMS that serves data via GraphQL. We’ll see how we can query for and use that data in a Remix app, and also discuss how the framework’s focus on web fundamentals can benefit both the developer and the visitors who use our sites.
Large scale projects challenges (NextJS - Contentful)
React Summit 2022React Summit 2022
20 min
Large scale projects challenges (NextJS - Contentful)
NextJS is an excellent full stack framework. Contentful is a well-known flexible headless CMS. Together are a great match, but when we talk large scale projects the challenges are completely different than the ones you may face in a small to medium scale project. Leonidas will try to raise your awareness on such challenges based on Greece's experience on redesigning Vodafone's site to create beautiful self-serve and guided journeys for Vodafone customers.