Astro
Instalar Astro
npm create astro@latest
A todo enter y al final
â•â”€â”€â”€â”€â”€â•® Houston: │ â— â—ˇ â— Good luck out there, astronaut! 🚀
cd second-star
npm run dev
Luego http://localhost:4321/.
To get started, open the src/pages directory in your project.
Para abrir la carpeta src/pages/ de tu proyecto Astro y comenzar a editar tus páginas, sigue estos pasos:
Paso 1
Abre tu proyecto en Visual Studio Code
Abre Visual Studio Code (VS Code) en tu Mac.
En la barra de menú superior, haz clic en Archivo > Abrir carpeta….
Navega hasta la carpeta de tu proyecto Astro (por ejemplo, second-star) y haz clic en Abrir.
🗂️ Paso 2
Navega a la carpeta src/pages/
Una vez que tu proyecto esté abierto en VS Code, verás la estructura de carpetas en el panel lateral izquierdo.
Haz clic en la carpeta src para expandirla.
Dentro de src, haz clic en la carpeta pages.
Aquà encontrarás archivos como index.astro, que corresponde a la página principal de tu sitio.
Paso 3
Edita o crea páginas
Editar una página existente: Haz doble clic en index.astro para abrirlo en el editor y realizar cambios.
Crear una nueva página:
Haz clic derecho en la carpeta pages.
Selecciona Nuevo archivo.
Nombra el archivo, por ejemplo, about.astro.
Agrega el contenido HTML o Astro que desees.
Astro utiliza un sistema de enrutamiento basado en archivos, por lo que cada archivo .astro en src/pages/ se convierte en una ruta en tu sitio web. Por ejemplo, about.astro corresponderá a http://localhost:4321/about.
🔄 Paso 4
Visualiza los cambios en el navegador
Con el servidor de desarrollo en ejecución (npm run dev), cada vez que guardes los cambios en tus archivos .astro, el navegador se actualizará automáticamente para reflejar las modificaciones.
Crear una nueva página Para agregar una nueva página a tu sitio, simplemente crea un nuevo archivo en la carpeta src/pages/. Por ejemplo, para crear una página “Acerca de nosotros”:
En tu editor de cĂłdigo, navega a src/pages/.
Crea un nuevo archivo llamado about.astro.
Agrega el siguiente contenido básico:
— Puedes incluir aquà variables o lógica si lo necesitas — <html lang=“es”> <head> <meta charset=“UTF-8” /> <title>Acerca de Nosotros</title> </head> <body> <h1>Bienvenido a la página Acerca de Nosotros</h1> <p>Esta es una página de ejemplo en Astro.</p> </body> </html> Al guardar el archivo, Astro actualizará automáticamente el servidor de desarrollo. Puedes ver la nueva página en http://localhost:4321/about.