Saltearse al contenido
Astro Astro

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.

  1. Crea un nuevo directorio en src/pages/posts/.

  2. Añade un nuevo fichero (vacío) post-1.md dentro de tu nueva carpeta /posts/.

  3. Busca esta página en la vista previa de tu navegador añadiendo /posts/post-1 al final de tu URL de vista previa. (por ejemplo, http://localhost:4321/posts/post-1)

  4. Cambia la URL de vista previa del navegador para ver /posts/post-2 en 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

  1. 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-01
    description: '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 blog
    

    Publicado 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 conseguido
    

    1. **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 pasos
    

    Terminaré el tutorial de Astro, y luego seguiré añadiendo más publicaciones. Mira este espacio para más por venir.

  2. 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!

  3. 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

  1. 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>

  2. Ahora, añade dos ficheros más en src/pages/posts/: post-2.md y post-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 blog
    author: Alumno de Astro
    description: "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-08
    tags: ["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 blog
    author: Alumno de Astro
    description: "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-15
    tags: ["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.

  3. 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>

  4. 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.astro o los nombres de tus archivos Markdown).

Pon a prueba tus conocimientos

  1. El contenido de un archivo Markdown (.md) se convierte a:

Checklist

Recursos