Cómo crear tu primera web con Astro en 15 minutos

by -

En mi artículo anterior sobre Astro expliqué qué es y por qué está ganando espacio frente a otros frameworks web. Ahora toca la parte práctica: crear tu primera web con Astro, desde la instalación hasta el despliegue en producción.

Requisitos previos

  • Tener instalado Node.js 18 o superior.
  • Un editor de código (VS Code, Neovim, etc.).
  • Conocimientos básicos de HTML y CSS.

1. Crear el proyecto

Abre una terminal y ejecuta: 

npm create astro@latest my-first-astro
cd my-first-astro
npm install

El asistente te preguntará si quieres empezar desde cero o con una plantilla. Para este tutorial elige “blog básico”.

2. Ejecutar el servidor de desarrollo

Inicia el servidor local: 

npm run dev

Abre http://localhost:4321 y verás tu primer sitio con Astro corriendo.

3. Estructura básica de Astro

Un proyecto de Astro tiene principalmente:

  • src/pages/: aquí van tus páginas (cada archivo .astro se convierte en una ruta).
  • src/components/: tus componentes reutilizables.
  • public/: archivos estáticos como imágenes y fuentes.

4. Crear tu primera página

Crea un archivo en src/pages/hola.astro con este contenido: 

<html lang="es">
  <head>
    <title>Hola desde Astro</title>
  </head>
  <body>
    <h1>¡Hola mundo con Astro!</h1>
    <p>Esta es mi primera página.</p>
  </body>
</html>

Ahora visita http://localhost:4321/hola y deberías ver tu nueva página funcionando.

5. Publicar en producción

Cuando tu sitio esté listo, genera los archivos estáticos: 

npm run build

Esto creará la carpeta dist/ con tu web final. Puedes subirla fácilmente a servicios como:

  • Netlify
  • Vercel
  • Cloudflare Pages

Por ejemplo, en Netlify basta con conectar tu repositorio GitHub, elegir la carpeta dist, ¡y listo!

Conclusión

En menos de 15 minutos ya tienes tu primera web con Astro en línea. Es simple, rápido y flexible.

En mi caso, incluso llegué a migrar proyectos reales que antes estaban en cPanel. Si te interesa esa experiencia, te lo cuento aquí: 👉 Cómo migré sitios estáticos desde cPanel a Astro

Comentarios

Publicar un comentario

Entradas populares de este blog

Instalando ESET NOD32 en Ubuntu

by -
Imagen
Hace unos días necesitaba escanear mi partición de Windows desde Linux (Windows me lanzada un pantallazo azul y no me dejaba entrar - BSOD), probé con varios antivirus, entre ellos el ClamAV, AVG, Avast! y ninguno con resultados aceptables, luego opté por el ESET NOD32, y aquí les dejo los pasos que seguí para instalarlo: Pasos para instalar ESET NOD32 en Ubuntu: Descargar la versión para GNU/Linux desde la página oficial de Eset . Una vez obtenido el archivo: eset_nod32av_32bit_es_la.linux, tenemos que darle permisos de ejecución y luego doble clic al archivo para instalarlo: A veces al intentar instalar, el sistema nos avisa que nos falta el archivo: UTF-16.so para proceder con la instalación. Para obtener el archivo UTF-16.so lo pueden buscar en internet o descargar desde aquí (Mi cuenta de 4shared). El siguiente paso será copiar el archivo UTF-16.so al directorio /usr/lib/gconv/ (Siéntanse libres de crear la carpeta gconv si no existe). Necesitarán permisos de Adminitrador...
Leer más

Solución al error 0x0000007b en Windows XP

by -
Imagen
Muchos de ustedes sabrán que soy un usuario de linux, sin embargo tengo mi partición de Windows XP, mi papá se pasa tardes en ella jugando al Call of Duty; aunque debo reconocer que yo también la uso para jugar. En fin, como sólo utilizo esa partición para jugar, no me di la molestia de instalar un antivirus (craso error) y hace unos días vino un amigo a pasar el rato. Jugamos Call of Duty en red y luego intentamos jugar al AOE2, pero no podíamos conectarnos, yo pensé que tal vez era un problema de compatibilidad de versiones y optamos por intercambiar parches vía pendrive; al final no era nada de eso, nunca jugamos AOE2 online. El tema de los juegos quedó ahí, luego salimos un rato a divertirnos con los demás... y aquí viene la parte que les interesa, más tarde me encontraba yo conversando con mi papá cuando me comenta:  - Luda, al entrar a windows me sale una pantalla azul que dice que puede que el sistema tenga virus y que reinicie la máquina. - Uhh.. ¡Claro! el pendrive, per...
Leer más

Configurando Wireless en una Packard Bell A6011 con Ubuntu 10.04

by -
Imagen
Hace ya varios meses le insistí a Jano instalarle Ubuntu en una laptop que él no usaba con frecuencia, el accedió e hicimos un backup a los archivos que no quería perder. Luego de la instalación me di con la sorpresa que no funciona la tarjeta inalámbrica. (Problemas de drivers, pensé). En esa época la versión estable de Ubuntu era 9.10 y como no estábamos apurados decidí esperar a que salga la 10.04 (Lucid Lynx) por ahí que le daba tiempo a que se solucione el problema de drivers y ese venga integrado con el sistema operativo, fracaso de nuevo. Ahora por motivos personales me dijo que necesitaría la laptop con internet inalámbrico, me dejó traerla a mi casa para ver que se podía hacer y acá es como les relato como se solucionó el problema.
Leer más