Saltar al contenido

Escribe tu primer post de blog en Markdown

Ahora que has construido páginas usando archivos .astro, ¡es hora de hacer algunos posts de blog usando archivos .md!

Prepárate para…

  • Crea una nueva carpeta y un nuevo post
  • Escribe algo de contenido Markdown
  • Enlaza a tus posts de blog en tu página de Blog

Crea tu primer archivo .md

Sección titulada “Crea tu primer archivo .md”

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

  2. Añade un nuevo archivo (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 existente. (ej. http://localhost:4321/posts/post-1)

  4. Cambia la URL de la vista previa del navegador para ver /posts/post-2 en su lugar. (Esta es una página que aún no has creado.)

    Nota la diferente salida al previsualizar una página "vacía", y una que no existe. Esto te ayudará a solucionar problemas en el futuro.

Escribe contenido Markdown

Sección titulada “Escribe contenido Markdown”

  1. Copia o escribe el siguiente código en post-1.md

    src/pages/posts/post-1.md
    ---
    title: 'My First Blog Post'
    pubDate: 2022-07-01
    description: 'This is the first post of my new Astro blog.'
    author: 'Astro Learner'
    image:
        url: 'https://docs.astro.build/assets/rose.webp'
        alt: 'The Astro logo on a dark background with a pink glow.'
    tags: ["astro", "blogging", "learning in public"]
    ---
    # My First Blog Post
    

    Published on: 2022-07-01
    

    Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
    

    ## What I've accomplished
    

    1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.
    

    2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.
    

    3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!
    

    ## What's next
    

    I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.

  2. Revisa la vista previa de tu navegador de nuevo en http://localhost:4321/posts/post-1. Ahora deberías ver contenido en esta página. Puede que aún no esté correctamente formateado, pero no te preocupes, ¡lo actualizarás más adelante en el tutorial!

  3. Usa las Dev Tools de tu navegador para inspeccionar esta página. Nota que aunque no hayas escrito ningún elemento HTML, tu Markdown ha sido convertido a HTML. Puedes ver elementos como encabezados, párrafos, y elementos de lista.

Sección titulada “Enlaza a tus posts”

  1. Enlaza a tu primer post con una etiqueta anchor en src/pages/blog.astro:

    src/pages/blog.astro
    ---
    ---
    <html lang="en">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">Home</a>
        <a href="/about/">About</a>
        <a href="/blog/">Blog</a>
    

        <h1>My Astro Learning Blog</h1>
        <p>This is where I will post about my journey learning Astro.</p>
        <ul>
          <li><a href="/posts/post-1/">Post 1</a></li>
        </ul>
      </body>
    </html>

  2. Ahora, añade dos archivos más en src/pages/posts/: post-2.md y post-3.md. Aquí hay algo de código de ejemplo que puedes copiar y pegar en tus archivos, o, ¡puedes crear los tuyos propios!

    src/pages/posts/post-2.md
    ---
    title: My Second Blog Post
    author: Astro Learner
    description: "After learning some Astro, I couldn't stop!"
    image:
        url: "https://docs.astro.build/assets/arc.webp"
        alt: "The Astro logo on a dark background with a purple gradient arc."
    pubDate: 2022-07-08
    tags: ["astro", "blogging", "learning in public", "successes"]
    ---
    After a successful first week learning Astro, I decided to try some more. I wrote and imported a small component from memory!
    src/pages/posts/post-3.md
    ---
    title: My Third Blog Post
    author: Astro Learner
    description: "I had some challenges, but asking in the community really helped!"
    image:
        url: "https://docs.astro.build/assets/rays.webp"
        alt: "The Astro logo on a dark background with rainbow rays."
    pubDate: 2022-07-15
    tags: ["astro", "learning in public", "setbacks", "community"]
    ---
    It wasn't always smooth sailing, but I'm enjoying building with Astro. And, the [Discord community](https://astro.build/chat) is really friendly and helpful!

  3. Añade enlaces a estos nuevos posts:

    src/pages/blog.astro
    ---
    ---
    <html lang="en">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">Home</a>
        <a href="/about/">About</a>
        <a href="/blog/">Blog</a>
    

        <h1>My Astro Learning Blog</h1>
        <p>This is where I will post about my journey learning Astro.</p>
        <ul>
          <li><a href="/posts/post-1/">Post 1</a></li>
          <li><a href="/posts/post-2/">Post 2</a></li>
          <li><a href="/posts/post-3/">Post 3</a></li>
        </ul>
      </body>
    </html>

  4. Revisa la vista previa de tu navegador y asegúrate de que:

    Todos tus enlaces para Post 1, Post 2, y Post 3 llevan a una página funcional en tu sitio. (Si encuentras un error, revisa tus enlaces en blog.astro o los nombres de tus archivos Markdown.)

Pon a prueba tu conocimiento

Sección titulada “Pon a prueba tu conocimiento”
  1. Content in a Markdown (.md) file is converted to:

Checklist

Sección titulada “Checklist”

Recursos

Sección titulada “Recursos”
Contribuir Comunidad Patrocinar