Creando la primera página

Crea tu primera página ¶

Realmente ya tienes la primera página creada en src/pages/index.astro

👀 Si no tienes instalada la extensión de Astro probablemente no reconozca bien el contenido de este fichero. Es buen momento para hacerlo.

Ahora sustituye todo el fichero por estas líneas de código.

src/pages/index.astro

---
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content="{Astro.generator}" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />
    <title>Soy Astro</title>
  </head>
  <body>
    <div class="container col-xxl-8 px-4 py-5">
      <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
        <div class="col-10 col-sm-8 col-lg-6">
          <img
            src="https://placekitten.com/g/500/400"
            class="d-block mx-lg-auto img-fluid"
            alt="Flamante Astro web"
            width="700"
            height="500"
            loading="lazy"
          />
        </div>
        <div class="col-lg-6">
          <h1 class="display-5 fw-bold lh-1 mb-3">Mi primera Astro web</h1>
          <p class="lead">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </p>
          <div class="d-grid gap-2 d-md-flex justify-content-md-start">
            <a href="/about" class="btn btn-primary btn-lg px-4 me-md-2"
              >Leer más</a
            >
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

👀 Las dos primeras líneas con --- también. Más tarde entenderás que significan ;)

Verás que se recarga el navegador y te aparece un gatito con un texto y todo bien pintado.

🌎 Estamos usando la librería Bootstrap CSS para centrarnos en Astro y no en toda la creación de los estilos de la web.

💪 Primera página conseguida ;)

Creando la página de “sobre mi” ¶

🔍 Empecemos a sacar partido a la potencia de Astro creando nuevas páginas.

Ahora duplica src/pages/index.astro en src/pages/about.astro y realiza los cambios destacados.

src/pages/about.astro

---
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content="{Astro.generator}" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />
    <title>Sobre mi</title>
  </head>
  <body>
    <div class="container col-xxl-8 px-4 py-5">
      <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
        <div class="col-10 col-sm-8 col-lg-6">
          <img
            src="https://placekitten.com/g/500/400"
            class="d-block mx-lg-auto img-fluid"
            alt="Flamante Astro web"
            width="700"
            height="500"
            loading="lazy"
          />
        </div>
        <div class="col-lg-6">
          <h1 class="display-5 fw-bold lh-1 mb-3">Sobre mi</h1>
          <p class="lead">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </p>
          <div class="d-grid gap-2 d-md-flex justify-content-md-start">
            <a href="/" class="btn btn-primary btn-lg px-4 me-md-2">⟸ Volver</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Si cargas localhost:3000/about verás que aparece una nueva página con los contenidos actualizados.

👀 Prueba a cargar cualquier otra dirección y verás como aparece un error 404. Por ejemplo localhost:3000/noexisto