# Sitio de Astro con Claude Code: de la carpeta a la publicación > Guía paso a paso: cómo crear un sitio con Astro mediante Claude Code sin saber programar. Qué instalar, qué comando usar para crear un proyecto y cómo publicarlo gratis. Source: https://ailoot.ai/blog/es/astro-site-with-claude-code/ Canonical: https://ailoot.ai/blog/es/astro-site-with-claude-code/ Language: es Publisher: Ailoot (https://ailoot.ai/) Translation: guide-149 Revision: sha256-7808a695e198c1cf26374d072d18428094d368880752afdaf088ed089ff1ffe0 Alguien que nunca ha escrito una línea de código puede crear un sitio con Astro mediante Claude Code. Hace mucho que dejé de escribir código a mano; lo hago todo con palabras a través de la IA, y crear un sitio con Astro funciona exactamente igual: explicas lo que necesitas y Claude escribe el código por ti. El problema normalmente no es la creación en sí, sino que el proceso está dividido en partes. Un artículo explica la instalación, otro trata los comandos, un tercero aborda la publicación, y nunca consigues tener en la cabeza el recorrido completo. Aquí te guío desde una carpeta vacía hasta un sitio que se abre en Internet mediante un enlace: qué instalar, qué comando usar para iniciar un proyecto, cómo crear páginas con Claude Code y cómo publicar el resultado gratis. Me baso en la documentación oficial de Astro. Sobre cómo trabajar con el servicio — en la [documentación de Ailoot](https://ailoot.ai/docs/). ## ¿Qué necesitas antes de empezar?
Puntos clave Tres cosas en tu ordenador: una versión reciente de Node.js, un editor de código y una terminal. Node.js es el entorno en el que se ejecutan estas herramientas; en la fecha de redacción, la documentación de Astro exige la versión 22.12.0 o posterior y advierte que no admite versiones impares como la 23. El editor suele ser VS Code, donde también funciona Claude Code. La terminal es una ventana negra para introducir comandos; ya viene integrada en VS Code. No necesitas instalar todo esto por separado para Astro: si ya has creado algo con Claude Code, tu entorno está listo.
Astro no te pide que descargues nada de antemano: se instalará mediante el comando del siguiente paso. Pero sí necesitas el entorno en el que se ejecuta todo. Astro describe así los requisitos para empezar: necesitas tres cosas:

Node.js — versión v22.12.0 o posterior. No se admiten versiones impares como la v23. Un editor de texto — recomendamos VS Code con nuestra extensión oficial de Astro. Una terminal — Astro se gestiona desde la línea de comandos.

— Documentación de Astro, sección de instalación, https://docs.astro.build/en/install-and-setup/
Veamos qué significa cada una en la práctica: 1. **Node.js** — un programa sin el cual no funcionan ni Astro ni la mayoría de las herramientas de vibe coding. Descárgalo desde nodejs.org e instálalo como cualquier aplicación. El número de versión de la documentación va cambiando con el tiempo, así que antes de empezar visita la página de instalación de Astro y comprueba los requisitos. Necesitas una versión par (22, 24); es mejor evitar las impares (23, 25). 2. **VS Code** — un editor gratuito de Microsoft. Abres allí la carpeta del proyecto, y Claude Code también funciona allí: escribirá el código. 3. **Terminal** — una ventana donde introduces comandos. No necesitas instalarla por separado: puedes abrirla desde el menú de VS Code y escribir allí todos los comandos que aparecen a continuación. Si ya has instalado Claude Code y has creado cualquier cosa con él, ya tienes todo esto y puedes saltarte este paso. Si no, tengo una guía aparte sobre [cómo instalar Claude Code](https://ailoot.ai/blog/es/install-claude-code/). ## ¿Cómo crear un proyecto de Astro con un solo comando?
Puntos clave El comando `npm create astro@latest` crea un proyecto nuevo desde la terminal. Se inicia un asistente que hace unas preguntas (dónde instalarlo, qué plantilla usar y si instalar las dependencias) y luego crea la estructura básica del proyecto. Si la carpeta del proyecto aún no existe, el asistente la creará. Después, entra en la carpeta con el comando `cd` y ya puedes empezar. No hace falta crear una carpeta vacía de antemano.
Aquí empieza el proyecto en sí, y basta con un comando. Abre la terminal e introduce: ```bash npm create astro@latest ``` Se iniciará el asistente de instalación. Esto es lo que dice la documentación al respecto:

Puedes ejecutar el comando create astro en cualquier lugar de tu ordenador, así que no necesitas crear una carpeta de proyecto vacía de antemano. Si la carpeta todavía no existe, el asistente te ayudará a crearla automáticamente.

— Documentación de Astro, sección de instalación, https://docs.astro.build/en/install-and-setup/
El asistente te guiará por los pasos y te hará algunas preguntas: cómo llamar a la carpeta del proyecto, con qué plantilla empezar y si instalar las dependencias en ese momento. Puedes elegir las opciones predeterminadas en todas las preguntas: una plantilla vacía o mínima te servirá para tu primer sitio. Si respondiste «no» a la pregunta sobre instalar las dependencias, puedes añadirlas manualmente más adelante ejecutando el comando `npm install` dentro de la carpeta del proyecto. Cuando el asistente termine, indicará que el proyecto se ha creado y sugerirá el siguiente paso: entrar en la carpeta del proyecto: ```bash cd your-project-name ``` Eso es todo lo que hace falta para crear el proyecto. Dentro ya hay una estructura funcional para el sitio: varios archivos y carpetas que se usan para crear las páginas. No tendrás que editarlos a mano, pero es útil saber dónde está cada cosa. Astro solo exige una carpeta:

src/pages — una subcarpeta obligatoria del proyecto. Sin ella, el sitio no tendrá páginas ni rutas.

— Documentación de Astro, sección sobre la estructura del proyecto, https://docs.astro.build/en/basics/project-structure/
En otras palabras, `src/pages` es la carpeta que contiene las páginas del sitio: la página de inicio, la de «Quiénes somos» y las páginas de contacto. Cerca suelen estar `src/components` (piezas reutilizables como encabezados y botones), `src/layouts` (la estructura común de las páginas) y la carpeta `public`, para imágenes y archivos. No tienes que memorizar la estructura: basta con recordar que las páginas están en `src/pages` y mencionarlo cuando le pidas a Claude: «añade una página de contacto». ## ¿Cómo crear el sitio con Claude Code?
Puntos clave Abre la carpeta del proyecto en VS Code, inicia Claude Code y explícale con palabras qué necesitas en el sitio. Claude modifica por sí mismo los archivos de `src/pages` y las carpetas cercanas. Funciona mejor con tareas pequeñas y claras: «crea una página de inicio con un título, una descripción breve y un botón»; después, «añade una página de servicios»; y luego, «cambia los colores a tonos oscuros». Después de cada petición, mira el resultado en el navegador y aclara lo que necesites. No hace falta programar. Tu trabajo es dar instrucciones claras y comprobar el resultado.
La estructura básica está lista; ahora crearás el sitio a partir de ella, y Claude Code se encarga del trabajo. Abre la carpeta del proyecto en VS Code, inicia Claude Code y describe con palabras lo que necesitas. Claude modifica por sí mismo los archivos de `src/pages` y las carpetas cercanas: tú solo le das tareas y revisas el resultado. Por mi experiencia, lo mejor es trabajar en pasos pequeños. Una petición enorme como «hazme una web para mi empresa» acaba en un lío difícil de arreglar. Así que divídela en tareas breves y claras y dáselas de una en una: 1. «Crea una página de inicio: un título grande, un par de frases sobre lo que hago y un botón que enlace a la página de contacto». 2. «Añade una página de servicios con una lista de tres secciones». 3. «Añade una página de contacto con un número de teléfono y un enlace a Telegram». 4. «Cambia el estilo: un fondo claro y una fuente grande y legible». Comprueba cada paso antes de continuar: así es más fácil detectar si algo está mal y volver atrás. Por qué las tareas pequeñas son más fiables y cómo mantener la IA en el buen camino forman parte de la ingeniería de contexto: cuanto más claras sean la tarea y la estructura del proyecto, más predecible será el resultado. Astro proporciona a la IA una estructura práctica: el contenido de las páginas está separado del estilo, y las páginas se crean siguiendo reglas compartidas. Con esta estructura, Claude se confunde menos y es menos probable que estropee algo cercano al editar una parte. Si Claude deja de ver tus archivos de repente o responde sin venir a cuento, consulta la guía sobre [por qué Claude Code no puede ver los archivos del proyecto](https://ailoot.ai/blog/es/claude-code-cant-see-project-files/). ## ¿Cómo puedes previsualizar el sitio antes de publicarlo?
Puntos clave Para ver el sitio antes de publicarlo en Internet, Astro tiene un servidor de desarrollo. Introduce el comando `npm run dev` en la terminal, dentro de la carpeta del proyecto, y Astro iniciará una vista previa local, normalmente en localhost, en el puerto 4321. Abre esa dirección en el navegador para ver tu sitio en directo. Los cambios que Claude haga en los archivos se aplican sobre la marcha: cambia un texto y la página se actualiza automáticamente. Este servidor solo es visible para ti en tu ordenador; no publica el sitio en Internet.
Antes de mostrar el sitio al mundo, lo previsualizas en tu propio ordenador. Astro tiene un servidor de desarrollo para eso: muestra el sitio en directo en tu ordenador. Inícialo con un comando en la terminal, dentro de la carpeta del proyecto: ```bash npm run dev ``` Astro iniciará una vista previa local e imprimirá la dirección en la terminal. De forma predeterminada, es `localhost:4321`. Copia la dirección, ábrela en el navegador y verás tu sitio. Por ahora, solo tú puedes abrirla; nadie desde fuera puede acceder. Es tu borrador. Lo práctico es que la vista previa se actualiza en directo: Claude edita un archivo y la página del navegador se actualiza automáticamente; no hace falta recargarla a mano. Es rápido: pídele algo a Claude, mira el resultado en el navegador, pide una corrección y vuelve a mirar. Esta es la etapa en la que perfeccionas el sitio. Cuando estés conforme con el resultado, publícalo en Internet. ## ¿Cómo publicar gratis un sitio de Astro en Internet?
Puntos clave La forma gratuita más sencilla es a través de GitHub. Primero, sube el proyecto a un repositorio de GitHub (un repositorio de código en línea). Después, conecta un servicio de alojamiento que pueda crear sitios Astro: Netlify, Vercel o el propio GitHub Pages. El servicio de alojamiento reconoce Astro, crea el sitio con el comando de compilación y lo publica en su propia dirección. Cada vez que envíes un cambio nuevo al repositorio, el sitio se vuelve a crear y se actualiza automáticamente. Claude Code también puede ayudarte a configurar todo esto con instrucciones en palabras.
Tienes que poner el sitio terminado en algún lugar para que otras personas puedan abrirlo desde un enlace. La forma gratuita más sencilla es a través de GitHub: primero sube el código del proyecto a un repositorio y luego conecta un servicio de alojamiento que cree y publique el sitio. Este es el proceso: 1. **Crea un repositorio en GitHub.** Un repositorio es un espacio en línea donde se almacenan los archivos de código del proyecto. Claude Code puede ayudarte con instrucciones en lenguaje natural: pídele que «suba el proyecto a un nuevo repositorio de GitHub» y te sugerirá comandos. Si nunca has usado GitHub, ten a mano las instrucciones para registrarte e iniciar sesión. 2. **Conecta el alojamiento.** Ve a uno de los servicios (Netlify, Vercel), inicia sesión con tu cuenta de GitHub y elige tu repositorio. La documentación de Astro describe este método así: el servicio de alojamiento vigila tu repositorio, crea el sitio y lo publica. 3. **Comprueba la configuración de compilación.** Normalmente, el servicio de alojamiento reconoce Astro y completa la configuración necesaria. Si te pide introducirla manualmente, el comando de compilación que indica la documentación es `astro build` (o `npm run build`), y el sitio terminado se coloca en la carpeta `dist`. 4. **Haz clic en «Publicar».** El servicio creará el sitio y te dará un enlace como `site-name.netlify.app`. Cualquiera puede abrir el sitio en esa dirección. Este es el texto exacto de la documentación sobre cómo conectar un repositorio a un servicio de alojamiento:

Muchos servicios de alojamiento populares reconocerán que tu proyecto es un sitio de Astro y elegirán automáticamente la configuración adecuada de compilación y despliegue. El servicio de alojamiento vigilará la rama principal de tu repositorio, volverá a crear tu sitio y lo publicará de nuevo con cada cambio.

— Documentación de Astro, sección de publicación, https://docs.astro.build/en/guides/deploy/
A partir de ahí, la publicación es automática: envía un cambio nuevo al repositorio y el sitio se vuelve a crear y se actualiza solo; no tienes que hacer clic en nada más. También hay una segunda opción gratuita: **GitHub Pages**, donde el sitio se publica directamente desde el repositorio mediante las propias herramientas de GitHub. Astro ofrece una plantilla de inicio oficial:

Astro admite una GitHub Action oficial para desplegar un proyecto en GitHub Pages con casi ninguna configuración, y esta es la forma recomendada de desplegar en GitHub Pages.

— Documentación de Astro, sección sobre la publicación en GitHub Pages, https://docs.astro.build/en/guides/deploy/github/
Con esta opción, el sitio se abre en una dirección como `your-name.github.io/repository-name`, y más adelante puedes conectar tu propio dominio. También puedes configurar esto con Claude Code: describe la tarea con palabras y preparará el archivo necesario. ## ¿Cuánto cuesta crear un sitio de Astro?
Puntos clave Astro es gratuito y de código abierto; no hay que pagar por él. El alojamiento básico también puede ser gratis: GitHub Pages y los planes iniciales de Netlify y Vercel son suficientes para un sitio Astro ligero. Los gastos reales corresponden a la herramienta de IA que usas para crear el sitio (Claude) y, de forma opcional, a tu propio dominio en lugar de la dirección gratuita del servicio de alojamiento. Así que es posible crear y publicar un sitio sin pagar el alojamiento: solo pagas por la IA.
Hablemos ahora del dinero. Astro es una herramienta gratuita y de código abierto; no tiene un precio aparte. Los servicios de alojamiento básico también ofrecen opciones gratuitas: GitHub Pages y los planes iniciales de Netlify y Vercel, que suelen bastar para un sitio Astro ligero (los planes gratuitos tienen límites de tráfico, pero normalmente son suficientes para una web sencilla de presentación o una landing page). En la práctica, hay dos cosas por las que quizá pagues, aunque no siempre. La primera es la herramienta de IA que usas para crear el sitio. La segunda es un dominio propio en lugar de una dirección como `name.netlify.app`; es opcional y cuesta poco al año. Puedes completar el proceso de «crear un sitio y publicarlo en Internet» pagando solo Claude. ## ¿Qué más pregunta la gente sobre los sitios Astro y Claude Code?
Puntos clave Respuestas breves a preguntas frecuentes. No necesitas saber programar: Claude escribe el código, y tú le das tareas con palabras y compruebas el resultado. El sitio terminado sigue siendo tus archivos y puede alojarse en cualquier servicio; no queda atado a la plataforma de otra persona. Astro es adecuado para un sitio de contenido: una web de presentación, una landing page, un blog o un sitio de exhibición; para una zona personal compleja, es mejor buscar otra opción. Además, puedes publicar gratis el sitio terminado a través de GitHub.
### Preguntas frecuentes ¿Hay que saber programar para crear un sitio con Astro mediante Claude Code? No. Hace mucho que dejé de escribir código a mano; lo hago todo con IA. Le das una tarea con palabras —«crea una página de inicio con este tipo de título»— y Claude Code escribe y edita los archivos por ti. No necesitas conocer la sintaxis. Necesitas saber qué tipo de sitio quieres y comprobar en el navegador lo que obtienes. ¿Hay que crear la carpeta del proyecto de antemano? No. El comando `npm create astro@latest` inicia un asistente que crea la carpeta si todavía no existe. Puedes ejecutar el comando en cualquier lugar de tu ordenador. Una vez creada, entra en la carpeta del proyecto con el comando `cd` y trabaja desde allí. ¿Cómo puedes previsualizar el sitio antes de que esté en Internet? Ejecuta el comando `npm run dev` dentro de la carpeta del proyecto. Astro iniciará una vista previa local, normalmente en localhost:4321, y podrás abrir el sitio en el navegador de tu propio ordenador. Solo tú puedes ver esta vista previa; los cambios se aplican sobre la marcha y no tienes que recargar la página manualmente. ¿Se puede publicar gratis un sitio de Astro? Sí. La forma más sencilla es subir el proyecto a un repositorio de GitHub y conectarlo a un alojamiento gratuito: GitHub Pages, Netlify o Vercel. El servicio de alojamiento creará el sitio y lo publicará en su propia dirección. No tienes que pagar por separado el alojamiento de un sitio ligero; solo tendrás gastos si quieres un dominio propio. ¿Astro sirve para cualquier tipo de sitio? Astro está diseñado para sitios de contenido: webs de presentación, landing pages, blogs, portfolios y escaparates de tiendas en línea. Ahí es donde destaca. Si el núcleo del proyecto es una aplicación web compleja con un área personal y muchas acciones en cada botón, esa parte suele crearse con otra herramienta. Hablo con más detalle de las ventajas y desventajas de Astro en el artículo sobre qué es Astro. ¿En qué es mejor Astro que un constructor como Tilda para hacer vibe coding? La diferencia está en lo que te queda. Un sitio Astro está formado por tus archivos, que se guardan contigo y se pueden publicar en cualquier servicio de alojamiento; ningún servicio de terceros los conserva. Si quieres mudarte o hacer cambios seis meses después, puedes abrirlo todo con cualquier herramienta. La elección entre Astro y otras herramientas depende del enfoque general del vibe coding: elige la herramienta adecuada para la tarea. Encontrarás el mapa de herramientas en la guía de alternativas a Claude Code.
### Fuentes - [Documentación de Astro, instalación y requisitos](https://docs.astro.build/en/install-and-setup/) - [Documentación de Astro, interfaz de línea de comandos](https://docs.astro.build/en/reference/cli-reference/) - [Documentación de Astro, estructura del proyecto](https://docs.astro.build/en/basics/project-structure/) - [Documentación de Astro, publicar un sitio](https://docs.astro.build/en/guides/deploy/) - [Documentación de Astro, publicación en GitHub Pages](https://docs.astro.build/en/guides/deploy/github/) - [Documentación de Astro, «¿Por qué Astro?»](https://docs.astro.build/en/concepts/why-astro/)
Conoce [Ailoot](https://ailoot.ai/). ## Preguntas sobre Claude Code y Astro ### ¿La vista previa local de Astro publica el sitio en internet? No. npm run dev inicia la vista previa de desarrollo local e imprime su dirección, normalmente localhost:4321. Publicar es otro paso mediante un alojamiento o el flujo de despliegue de GitHub Pages. ### ¿Qué ajustes de compilación compruebo en un alojamiento de Astro? Para el sitio estático descrito, comprueba que use astro build o npm run build y publique el directorio dist. Tras desplegar, abre la URL pública y verifica allí las páginas; la vista previa local no verifica la publicación. ## Ailoot · La empresa y su cartera de proyectos Ailoot se apoya en la experiencia operativa acumulada, una amplia base de clientes, un servicio estable y el seguimiento continuo de KPI. La empresa y su cartera de proyectos: millones de clientes; ventas por miles de millones al mes. Ailoot aplica esa experiencia operativa al acceso por API a funciones de IA en productos de clientes, agentes, aplicaciones y automatizaciones.