Proyecto — tu web publicada en internet
Proyecto final: de la idea a una web publicada gratis en Cloudflare Pages, usando todo el flujo del curso — especificar, planear, construir y revisar.
- Proyecto final
- 45 min
- 8 pasos
- Revisada el
Al terminar sabrás
- Aplicar el flujo completo del curso a un proyecto real
- Construir por partes, con commits y revisiones en cada una
- Publicar tu web gratis en Cloudflare Pages con una URL que puedes compartir
Toca juntarlo todo. Vas a convertir la frase que apuntaste en la lección 1 en una web publicada. Calcula una tarde; puedes repartirlo en varios días, porque cada paso queda guardado.
Prepara el proyecto
En la terminal:
cd ~/proyectos
mkdir mi-web
cd mi-web
claudeY dentro de Claude Code:
Inicia un repositorio Git con un .gitignore adecuado y haz el primer commit.Especifica
Usa la skill que creaste en la lección 14:
/especificar <pega aquí la frase de la lección 1>Responde la entrevista con calma. Si algo no lo sabes (fotos, precios, textos legales), dilo: debe quedar en pendientes, no inventado.
Al terminar tendrás docs/especificacion.md. Léelo entero. Es tu contrato.
Decide la tecnología y planea
Entra en modo plan (Shift + Tab) y usa el modelo más potente:
Lee @docs/especificacion.md. Propón la tecnología más sencilla que cumpla todo
(una web estática es suficiente para la mayoría de negocios: por ejemplo Astro o
HTML y CSS), justifica la elección y haz un plan por fases pequeñas, cada una
con una forma de comprobar que funciona. La publicación será en Cloudflare Pages.
Guarda el plan en docs/plan.md con una casilla por paso.Revísalo con las cuatro preguntas de la lección 13 antes de aprobarlo.
Luego:
/initY añade al CLAUDE.md tus reglas: tono, colores, «no inventes datos», «haz commit al terminar cada fase», «comprueba en móvil antes de dar algo por terminado».
Construye por fases
Pasa a modo auto o aceptar ediciones y ve fase a fase:
Haz la fase 1 de @docs/plan.md. Cuando termine, arranca la web en local en
segundo plano, compruébala en móvil y escritorio, márcala en el plan y haz commit.Después de cada fase:
- Ábrela tú en el navegador y en tamaño móvil.
- Pide los cambios que veas, de uno en uno y concretos.
/clearantes de la siguiente fase, para empezar con el contexto limpio. El plan en el archivo hace de memoria.
Revisa antes de publicar
/revisar-textos/code-reviewY tu propia revisión, como cliente: rellena el formulario, pulsa cada botón, mírala en tu móvil real. Pide también:
Comprueba que la web tiene título y descripción para Google en cada página,
textos alternativos en las imágenes, favicon y que carga rápido. Dime qué falta.Publica en Cloudflare Pages
Cloudflare Pages publica webs estáticas gratis, con HTTPS y en servidores rápidos de todo el mundo. Necesitas:
- Una cuenta gratuita en cloudflare.com (la creas tú).
- Node.js en su versión LTS, desde nodejs.org, si tu proyecto no lo tenía ya.
Pídeselo así:
Quiero publicar esta web en Cloudflare Pages con wrangler, en un proyecto
llamado mi-web. Genera la versión de producción y publícala. Si tengo que
instalar algo o iniciar sesión, para y dime exactamente qué hago yo.
Al terminar, dame la URL.Cuando haga falta, se abrirá el navegador para que tú inicies sesión en Cloudflare y autorices a wrangler. Claude no necesita tu contraseña y no debe pedírtela.
Al final tendrás una dirección del tipo https://mi-web.pages.dev. Ábrela en el móvil y compártela.
Y guarda cómo se publica, para la próxima vez:
Añade al CLAUDE.md cómo se publica esta web y crea la skill /publicar
de la lección 17 adaptada a este proyecto.Opcional: tu dominio
Si tienes un dominio (tunegocio.es), puedes conectarlo al proyecto desde el panel de Cloudflare, en tu proyecto de Pages, en Dominios personalizados. Pide a Claude que te guíe paso a paso según dónde lo tengas comprado.
Lista final
- La especificación y el plan están en
docs/. - Cada fase tiene su commit.
- Nada inventado: los pendientes están marcados como pendientes.
- Revisada en un móvil de verdad.
- Publicada, con una URL que funciona.
- El
CLAUDE.mdexplica cómo arrancarla y publicarla.
Si has marcado todo, ya no «estás aprendiendo Claude Code»: lo estás usando.
Misión cumplida
Siguiente estación: Y ahora qué — cómo seguir mejorando.