Saltearse al contenido

Crea tu primera página Astro

Ahora que ya sabes que los archivos .astro son los responsables de las páginas de tu sitio web, ¡es hora de crear uno!

Prepárate para...

  • Crear dos nuevas páginas en tu sitio web: ‘Acerca de’ y Blog
  • Añadir enlaces de navegación a tus páginas
  • Desplegar en la web una versión actualizada de tu sitio web

Crea un nuevo archivo .astro

Sección titulada Crea un nuevo archivo .astro

  1. En el panel de archivos de tu editor de código, ve a la carpeta src/pages/ donde verás el archivo existente index.astro

  2. En esa misma carpeta, crea un nuevo archivo llamado about.astro.

  3. Copia o vuelve a escribir el contenido de index.astro en tu nuevo archivo about.astro.

  4. Añade /about al final de la URL de la vista previa de tu sitio web en la barra de direcciones y compruebe que puede ver una página cargada allí. (por ejemplo, http://localhost:4321/about)

Ahora mismo, tu página ‘Acerca de’ debería tener exactamente el mismo aspecto que la primera página, pero vamos a cambiarlo.

Edita tu página

Sección titulada Edita tu página

Edita el contenido HTML para que esta página sea sobre ti.

Para cambiar o añadir más contenido a tu página ‘Acerca de’, añade más etiquetas de elementos HTML que contengan contenido. Puedes copiar y pegar el código HTML siguiente entre las etiquetas <body></body> existentes, o crear las tuyas.

src/pages/about.astro
<body>
  <h1>Mi sitio Astro</h1>
  <h1>Sobre mi</h1>
  <h2>... ¡y mi nuevo sitio Astro!</h2>


  <p>Estoy trabajando en el tutorial introductorio de Astro. Esta es la segunda página de mi sitio web, ¡y es la primera que he construido yo mismo!</p>


  <p>Este sitio se irá actualizando a medida que vaya completando más partes del tutorial, ¡así que no dejes de visitarlo para ver cómo va mi viaje!</p>
</body>

Ahora, vuelve a visitar tu página /about en la pestaña de tu navegador, y deberías ver tu contenido actualizado.

Añade enlaces de navegación

Sección titulada Añade enlaces de navegación

Para facilitar la previsualización de todas tus páginas, añade enlaces HTML de navegación de páginas antes de tu <h1> en la parte superior de tus dos páginas (index.astro y about.astro):

src/pages/about.astro
<a href="/">Inicio</a>
<a href="/about/">Sobre mi</a>


<h1>Sobre mi</h1>
<h2>... ¡y mi nuevo sitio Astro!</h2>

Comprueba que puede hacer clic en estos enlaces para avanzar y retroceder entre las páginas de tu sitio.

Pruébalo tú mismo - Añadir una página de blog

Sección titulada Pruébalo tú mismo - Añadir una página de blog

Añade una tercera página blog.astro a tu sitio, siguiendo los mismos pasos que arriba.

(No olvides añadir un tercer enlace de navegación a cada página).

Muéstrame los pasos.
  1. Crea un nuevo archivo en src/pages/blog.astro.
  2. Copia todo el contenido de index.astro y pégalo en blog.astro.
  3. Añade un tercer enlace de navegación en la parte superior de cada página:
src/pages/index.astro
<body>
  <a href="/">Inicio</a>
  <a href="/about/">Sobre mi</a>
  <a href="/blog/">Blog</a>


  <h1>Mi sitio Astro</h1>
</body>

Ahora deberías tener un sitio web con tres páginas enlazadas entre sí. Es hora de añadir algo de contenido a la página Blog.

Actualizar el contenido de la página en blog.astro con:

src/pages/blog.astro
<body>
  <a href="/">Inicio</a>
  <a href="/about/">Sobre mi</a>
  <a href="/blog/">Blog</a>


  <h1>Mi sitio Astro</h1>
  <h1>Mi blog de Astro aprendizaje</h1>
  <p>Aquí es donde publicaré sobre mi viaje de aprendizaje Astro.</p>
</body>

Previsualiza todo tu sitio visitando las tres páginas en la vista previa de tu navegador y compruébalo:

  • Cada página enlaza correctamente con las tres páginas
  • Tus dos nuevas páginas tienen cada una su propio título descriptivo
  • Tus dos nuevas páginas tienen cada una su propio párrafo de texto

Publica tus cambios en la web

Sección titulada Publica tus cambios en la web

Si has seguido nuestra configuración en la Unidad 1, puedes publicar tus cambios en tu sitio web en vivo a través de Netlify.

Cuando estés satisfecho con el aspecto de tu vista previa, has un commit de los cambios a tu repositorio online en GitHub.

  1. En VS Code, previsualiza los archivos que han cambiado desde tu último commit en GitHub.

    • Ve a la pestaña Control de origen del menú de la izquierda. Debería aparecer un pequeño “3”.

    • Deberías ver que index.astro, about.astro y blog.astro aparecen como archivos que han cambiado.

  2. Introduce un mensaje de confirmación (por ejemplo, “Añadidas dos nuevas páginas: acerca de y blog”) en el cuadro de texto y pulsa Ctrl + Enter (macOS: Cmd ⌘ + Enter) para confirmar el cambio en tu espacio de trabajo actual.

  3. Haz clic en el botón para Sincronizar cambios con GitHub.

  4. Después de esperar unos minutos, visita tu URL Netlify para verificar que tus cambios sean publicados en vivo.

Checklist

Sección titulada Checklist

Recursos

Sección titulada Recursos