Cómo empezar con Astro
- 1. Introducción a Astro
- 2. Instalación de Astro
- 3. Creación de Páginas
- 4. Componentes en Astro
- 5. Estilos y CSS
- 6. Gestión de Recursos Estáticos
- 7. Configuración y Personalización
- 8. Despliegue de tu Sitio
- Conclusión
1. Introducción a Astro
Astro es un framework basado en componentes que permite crear sitios web estáticos. Su principal ventaja es que solo entrega HTML, CSS y JavaScript cuando es necesario, reduciendo considerablemente el tamaño de los archivos enviados al cliente y mejorando el rendimiento del sitio.
Características Clave de Astro
- Performance Optimizada: Solo entrega lo necesario para cada página.
- Compatibilidad con Componentes: Puedes usar componentes de React, Vue, Svelte, y otros.
- Generación Estática: Ideal para sitios web que no cambian con frecuencia.
- Soporte para Markdown: Perfecto para blogs y documentación.
2. Instalación de Astro
Prerrequisitos
Antes de comenzar, asegúrate de tener instalado Node.js en tu máquina. Puedes descargarlo desde nodejs.org.
Instalación de Astro
Para instalar Astro, puedes usar el siguiente comando npm:
npm init astro@latestEste comando te guiará a través de la configuración inicial del proyecto, permitiéndote elegir plantillas y configuraciones básicas.
Estructura del Proyecto
Después de la instalación, tu proyecto tendrá una estructura similar a esta:
my-astro-site/
├── public/
│ └── favicon.ico
├── src/
│ ├── components/
│ ├── layouts/
│ ├── pages/
│ │ └── index.astro
│ └── styles/
├── package.json
└── astro.config.mjs- public/: Contiene archivos estáticos como imágenes y favicons.
- src/: Contiene el código fuente del proyecto.
- components/: Directorio para tus componentes.
- layouts/: Plantillas de diseño para las páginas.
- pages/: Contiene las páginas de tu sitio.
- styles/: Archivos CSS para estilos globales y específicos.
- astro.config.mjs: Archivo de configuración de Astro.
3. Creación de Páginas
Las páginas en Astro se crean dentro del directorio src/pages. Cada archivo .astro dentro de este directorio representa una página en tu sitio.
Creación de una Página Simple
Crea un archivo llamado about.astro en src/pages:
---
title: "About Us"
description: "Learn more about our team and mission."
---
<html>
<head>
<title>{title}</title>
</head>
<body>
<h1>{title}</h1>
<p>{description}</p>
</body>
</html>Configuración de Rutas
Astro automáticamente configura rutas basadas en la estructura de archivos dentro del directorio pages. Por ejemplo, src/pages estará disponible en /about.
/about.astro
4. Componentes en Astro
Astro permite usar componentes para crear interfaces modulares y reutilizables. Puedes crear componentes en el directorio src/components.
Creación de un Componente
Crea un archivo Header.astro en src/components:
---
const title = "Welcome to My Astro Site";
---
<header>
<h1>{title}</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>Uso de Componentes en Páginas
Ahora puedes usar el componente Header en tus páginas:
---
import Header from '../components/Header.astro';
---
<html>
<head>
<title>Home</title>
</head>
<body>
<Header />
<main>
<h2>Welcome to the homepage!</h2>
<p>This is the main content of the page.</p>
</main>
</body>
</html>5. Estilos y CSS
Astro permite utilizar CSS de varias formas: archivos CSS globales, CSS en línea, y módulos CSS.
CSS Global
Crea un archivo CSS en src/styles/global.css:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
Incluye este archivo en tu proyecto editando src/pages/_template.astro (o el archivo equivalente en tu estructura):
---
import '../styles/global.css';
---
<html>
<head>
<link rel="stylesheet" href="../styles/global.css">
</head>
<body>
<slot />
</body>
</html>CSS en Componentes
También puedes añadir CSS directamente en los componentes:
<style>
header {
background-color: #333;
color: white;
padding: 1rem;
}
nav a {
color: white;
margin: 0 1rem;
text-decoration: none;
}
</style>
<header>
<h1>{title}</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>6. Gestión de Recursos Estáticos
Coloca tus imágenes y otros archivos estáticos en el directorio public. Estos archivos estarán disponibles en la raíz del sitio web.
Por ejemplo, si tienes una imagen logo.png en public, puedes acceder a ella en tu HTML:
<img src="/logo.png" alt="Logo">7. Configuración y Personalización
El archivo de configuración astro.config.mjs permite personalizar el comportamiento de Astro.
Ejemplo de Configuración
import { defineConfig } from 'astro/config';
export default defineConfig({
site: 'https://my-astro-site.com',
build: {
outDir: 'dist',
},
integrations: [
// Integraciones como Tailwind, MDX, etc.
],
});8. Despliegue de tu Sitio
Una vez que tu sitio esté listo, puedes generarlo y desplegarlo en cualquier servicio de hosting estático.
Generar el Sitio
Usa el comando de construcción de Astro:
npm run build
Esto generará los archivos estáticos en el directorio dist.
Despliegue
Puedes desplegar los archivos generados en servicios como Vercel, Netlify, GitHub Pages, entre otros. La configuración específica dependerá del servicio que elijas.
Conclusión
Astro es un potente framework para la creación de sitios web estáticos que ofrece un rendimiento óptimo y una experiencia de desarrollo flexible. Con su enfoque modular y su compatibilidad con varios componentes de frontend, Astro se convierte en una excelente opción para desarrolladores que buscan construir sitios rápidos y eficientes. ¡Ahora estás listo para empezar a construir tu propio sitio con Astro!
Jorge García
Fullstack developer