Escribe tu primera publicación en Markdown
Ahora que ya has creado páginas con archivos .astro, ¡es hora de crear algunas publicaciones con archivos .md!
Prepárate para...
- Crear una nueva carpeta y un nueva publicación
- Escribir contenido Markdown
- Enlazar tus publicaciones en la página de tu blog
Crea tu primer archivo .md.
Sección titulada Crea tu primer archivo .md.-
Crea un nuevo directorio en
src/pages/posts/. -
Añade un nuevo fichero (vacío)
post-1.mddentro de tu nueva carpeta/posts/. -
Busca esta página en la vista previa de tu navegador añadiendo
/posts/post-1al final de tu URL de vista previa. (por ejemplo,http://localhost:4321/posts/post-1) -
Cambia la URL de vista previa del navegador para ver
/posts/post-2en tu lugar. (Se trata de una página que aún no ha sido creada).Fíjate en los diferentes resultados que se obtienen al previsualizar una página “vacía” y otra que no existe. Esto te ayudará a solucionar problemas en el futuro.
Escribe contenido Markdown
Sección titulada Escribe contenido Markdown-
Copia o escriba el siguiente código en
post-1.md.src/pages/posts/post-1.md ---title: 'Mi primera publicación en el blog'pubDate: 2022-07-01description: 'Este es la primera publicación de mi nuevo blog Astro.'author: 'Alumno de Astro'image:url: 'https://docs.astro.build/assets/full-logo-light.png'alt: 'El logotipo completo de Astro.'tags: ["astro", "bloguear", "aprender en público"]---# Mi primera publicación en el blogPublicado el: 2022-07-01¡Bienvenido a mi _nuevo blog_ sobre el aprendizaje de Astro! Aquí, voy a compartir mi viaje de aprendizaje a medida que construyo un nuevo sitio web.## Lo que he conseguido1. **Instalación de Astro**: En primer lugar, he creado un nuevo proyecto Astro y configurar mis cuentas en línea.2. **Creación de páginas**: Luego aprendí cómo hacer páginas creando nuevos archivos `.astro` y colocándolos en la carpeta `src/pages/`.3. **Creación de publicaciones**: ¡Esta es mi primera publicación! ¡Ahora tengo páginas de Astro y publicaciónes en Markdown!## Próximos pasosTerminaré el tutorial de Astro, y luego seguiré añadiendo más publicaciones. Mira este espacio para más por venir. -
Comprueba de nuevo la vista previa de tu navegador en
http://localhost:4321/posts/post-1. Ahora deberías ver el contenido de esta página. Puede que aún no esté formateado correctamente, ¡pero no te preocupes, lo actualizarás más tarde en el tutorial! -
Utiliza las herramientas de desarrollo de tu navegador para inspeccionar esta página. Observa que, aunque no has escrito ningún elemento HTML, tu Markdown se ha convertido a HTML. Puedes ver elementos como encabezados, párrafos y elementos de lista.
Enlaza tus publicaciones
Sección titulada Enlaza tus publicaciones-
Enlaza a tu primera publicación con una etiqueta anchor en
src/pages/blog.astro:src/pages/blog.astro ------<html lang="es"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width" /><title>Astro</title></head><body><a href="/">Inicio</a><a href="/about/">Sobre mi</a><a href="/blog/">Blog</a><h1>Mi blog de aprendizaje sobre Astro</h1><p>Aquí es donde publicaré acerca de mi viaje aprendiendo Astro./p><ul><li><a href="/posts/post-1/">Publicación 1</a></li></ul></body></html> -
Ahora, añade dos ficheros más en
src/pages/posts/:post-2.mdypost-3.md. Aquí tienes un ejemplo de código que puedes copiar y pegar en tus archivos, ¡o puedes crear el tuyo propio!src/pages/posts/post-2.md ---title: Mi segunda publicación en el blogauthor: Alumno de Astrodescription: "Después de aprender un poco de Astro, ¡no podía parar!"image:url: "https://docs.astro.build/assets/arc.webp"alt: "Miniatura de los arcos de Astro."pubDate: 2022-07-08tags: ["astro", "bloguear", "aprender en público", "éxitos"]---Después de una exitosa primera semana aprendiendo Astro, decidí probar un poco más. Escribí e importé un pequeño componente de memoria.src/pages/posts/post-3.md ---title: Mi tercera publicación en el blogauthor: Alumno de Astrodescription: "Tuve algunos problemas, pero preguntar en la comunidad me ayudó mucho."image:url: "https://docs.astro.build/assets/rays.webp"alt: "Miniatura de los rayos de Astro."pubDate: 2022-07-15tags: ["astro", "aprender en público", "contratiempos", "comunidad"]---No siempre ha sido fácil, pero disfruto construyendo con Astro. Además, la [comunidad de Discord](https://astro.build/chat) es muy amable y servicial. -
Añade enlaces a estas nuevas publicaciones:
src/pages/blog.astro ------<html lang="es"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width" /><title>Astro</title></head><body><a href="/">Inicio</a><a href="/about/">Sobre mi</a><a href="/blog/">Blog</a><h1>Mi blog de Astro aprendizaje</h1><p>Aquí es donde publicaré acerca de mi viaje aprendiendo Astro.</p><ul><li><a href="/posts/post-1/">Publicación 1</a></li><li><a href="/posts/post-2/">Publicación 2</a></li><li><a href="/posts/post-3/">Publicación 3</a></li></ul></body></html> -
Comprueba la vista previa de tu navegador y asegúrate de que:
Todos tus enlaces para las publicaciones 1, 2 y 3 llevan a una página funcional de tu sitio. (Si encuentras un error, comprueba tus enlaces en
blog.astroo los nombres de tus archivos Markdown).
Pon a prueba tus conocimientos
Sección titulada Pon a prueba tus conocimientos- El contenido de un archivo Markdown (
.md) se convierte a: