Tutorial: Primeros pasos con Astro — 3. Añadiendo datos
- 1. Creando el proyecto en Content Island
- 2. Definiendo el modelo de datos
- 3. Añadiendo datos
- 4. Creando el proyecto en Astro
- 5. Creando la estructura de carpetas
- 6. Conectando Content Island con Astro
- 7. Montando la página de About
- 8. Página con lista de posts
- 9. Montando un post
- 10. Despliegue automático con Astro y Content Island usando GitHub Actions
- 11. Desplegando en Netlify
- 12. Automatizar el despliegue con GitHub Webhooks + Content Island
3. Añadiendo datos
Ya que tenemos la estructura, toca añadir datos.
En Content Island, vamos a la pestaña "Contenido", y hacemos click en el botón "Añadir contenido", y seleccionamos el modelo, en este caso, "About".
Y en "Contenido", rellenamos los campos obligatorios, en este caso son todos :):
- En picture, subimos la imagen que queremos que aparezca. En nuesto caso: About imagen.
- En fullname, añadimos el nombre: John Doe.
- En shortBio, añadimos una pequeña descripción. Nosotros vamos a usar texto ficticio: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et vehicula purus.
- En extendedBio, añadimos contenido en Markdown: About texto largo.
Y, por último, damos al botón "Publicar".
¡Ya tenemos todo lo necesario para nuestra página de About!
Ahora, vamos con el contenido de los posts.
Volvemos al listado de contenido y añadimos un nuevo contenido. En este caso, seleccionamos como modelo "Post".
En "General", cambiamos el nombre del contenido a "Post 1".
Y en "Contenido", rellenamos los campos requeridos:
- En title, añadimos el título del post: React Alicante 2024: Highlights & Takeaways.
- En slug: react-alicante-2024-highlights-takeaways.
- En date, añadimos la fecha del artículo: 06/05/2025.
- En author, añadimos el nombre del autor: John Doe.
- En summary, añadimos una pequeña descripción: This past September, React Alicante 2024 once again proved why it is one of the most anticipated frontend conferences in Europe. Developers, engineers, and React enthusiasts from all over the world gathered in the beautiful coastal city of Alicante, Spain, for a weekend full of insightful talks, hands-on workshops, and invaluable networking opportunities.
- En image, añadimos la imagen de cabecera del post: Post 1 imagen
- En content, añadimos contenido en Markdown: Post 1 contenido.
Y le damos a "Publicar".
Vamos a añadir otro post .Volvemos al listado de contenido.
Añadimos un nuevo contenido. Volvemos a seleccionar como modelo "Post".
En "General", cambiamos el nombre del contenido al titulo.
Y en "Contenido", rellenamos los campos requeridos:
- En title, añadimos el título del post: Exploring Vest at React Alicante 2024.
- En slug: exploring-vest-react-alicante-2024.
- En date, añadimos la fecha del artículo: 06/05/2025.
- En author, añadimos el nombre del autor: John Doe.
- En summary, añadimos una pequeña descripción: React Alicante 2024 featured an insightful session on Vest, a declarative validation framework designed for JavaScript applications. This talk provided attendees with a deep dive into how Vest simplifies form validation while maintaining flexibility and performance.
- En image, añadimos la imagen de cabecera del post: Post 2 imagen
- En content, añadimos contenido en Markdown: Post 2 contenido.
Contenido adicional para generar más posts:
En name, Post 3.
En slug: post-3
En title, añadimos el título del post: Post 3.
En date, añadimos la fecha del artículo: 06/05/2025.
En author, añadimos el nombre del autor: John Doe.
En summary, añadimos una pequeña descripción: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et vehicula purus. Proin in risus ut metus eleifend porta. Aliquam dui lorem, volutpat sit amet enim iaculis, laoreet tristique lectus. Nullam eget sagittis est. Curabitur at dapibus eros. Vestibulum lacinia nisi vel ullamcorper sodales. Maecenas hendrerit rutrum leo a sagittis.
En image, añadimos la imagen de cabecera del post: Post 3 imagen
En content, añadimos contenido en Markdown: Post 3 contenido.
Y aquí tenemos nuestro contenido para about, los dos posts que hemos creado y dos posts más de relleno, ya estamos listos para crear nuestra web.