Saltar al contenido

Crea tu primera página de Astro

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

Prepárate para…

  • Crea dos nuevas páginas en tu sitio web: About y Blog
  • Añade enlaces de navegación a tus páginas
  • Despliega una versión actualizada de tu sitio web a la 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, navega 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 reescribe 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 verifica que puedas ver una página cargando ahí. (ej. http://localhost:4321/about)

Ahora mismo, tu página "About" debería verse exactamente igual que la primera página, ¡pero vamos a cambiar eso!

Edita tu página

Sección titulada “Edita tu página”

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

Para cambiar o añadir más contenido a tu página About, añade más etiquetas de elementos HTML conteniendo contenido. Puedes copiar y pegar el código HTML de abajo entre las etiquetas existentes <body></body>, o crear el tuyo propio.

src/pages/about.astro
<body>
  <h1>My Astro Site</h1>
  <h1>About Me</h1>
  <h2>... and my new Astro site!</h2>


  <p>I am working through Astro's introductory tutorial. This is the second page on my website, and it's the first one I built myself!</p>


  <p>This site will update as I complete more of the tutorial, so keep checking back and see how my journey is going!</p>
</body>

Ahora, visita tu página /about en tu pestaña del navegador de nuevo, y deberías ver tu contenido actualizado.

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

Para que sea más fácil previsualizar todas tus páginas, añade enlaces de navegación HTML antes de tu <h1> en la parte superior de ambas páginas (index.astro y about.astro):

src/pages/about.astro
<a href="/">Home</a>
<a href="/about/">About</a>


<h1>About Me</h1>
<h2>... and my new Astro site!</h2>

Verifica que puedas hacer clic en estos enlaces para moverte hacia atrás y hacia adelante entre las páginas de tu sitio.

Pruébalo tú mismo - Añade una página de Blog

Sección titulada “Pruébalo tú mismo - Añade una página de Blog”

Añade una tercera página blog.astro a tu sitio, siguiendo los mismos pasos de 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 a la parte superior de cada página:
src/pages/index.astro
<body>
  <a href="/">Home</a>
  <a href="/about/">About</a>
  <a href="/blog/">Blog</a>


  <h1>My Astro Site</h1>
</body>

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

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

src/pages/blog.astro
<body>
  <a href="/">Home</a>
  <a href="/about/">About</a>
  <a href="/blog/">Blog</a>


  <h1>My Astro Site</h1>
  <h1>My Astro Learning Blog</h1>
  <p>This is where I will post about my journey learning Astro.</p>
</body>

Previsualiza todo tu sitio visitando las tres páginas en la vista previa de tu navegador y verifica que:

  • Cada página enlaza correctamente a las tres páginas
  • Tus dos nuevas páginas cada una tiene su propio encabezado descriptivo
  • Tus dos nuevas páginas cada una tiene su propio texto de párrafo

Publica tus cambios a la web

Sección titulada “Publica tus cambios a la web”

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

Cuando estés contento con el aspecto de tu vista previa, haz commit de tus cambios a tu repositorio online en GitHub.

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

    • Ve a la pestaña Source Control en el menú izquierdo. Debería mostrar un pequeño "3".

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

  2. Ingresa un mensaje de commit (ej. "Added two new pages - about and blog") en la caja de texto, y presiona Ctrl + Enter (macOS: Cmd ⌘ + Enter) para hacer commit del cambio a tu workspace actual.

  3. Haz clic en el botón Sync Changes para sincronizar con GitHub.

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

Checklist

Sección titulada “Checklist”

Recursos

Sección titulada “Recursos”
Contribuir Comunidad Patrocinar