Tutoriales

Tu web personal con Astro, GitHub Pages y Cloudflare

Guía paso a paso para construir una web personal estática, desplegarla en GitHub Pages y conectarla a un dominio propio en Cloudflare. Contada desde la experiencia: qué decidimos, qué problemas aparecieron y cómo los resolvimos.

11 partes · 7/8/2026

1. 01Objetivo y decisiones de stackPor qué Astro, GitHub Pages y Cloudflare, y qué necesitas antes de empezar.
2. 02Preparación del entornoNode.js, Git y el repositorio en GitHub listos antes de escribir una línea de Astro.
3. 03Proyecto Astro desde ceroScaffold del proyecto, estructura de carpetas, .gitignore y una base configurable.
4. 04Identidad visual con CSS modernoPaleta, tipografías y variables CSS: el sistema de diseño desde el primer día.
5. 05Layout y componentesEl layout base con cabecera, navegación responsive y pie de página reutilizables.
6. 06Datos privados fuera del repoVariables de entorno, .env, secretos y variables de GitHub Actions: contenido visible en la web, invisible en el código.
7. 07Proyectos con la GitHub APICargar los repositorios en vivo, cachear en el navegador y manejar los estados de carga y error.
8. 08SEO on-pageMeta tags, Open Graph, sitemap, robots.txt y JSON-LD para que la web aparezca bien en buscadores y redes.
9. 09Despliegue con GitHub Pages y GitHub ActionsUn workflow que compila el sitio y lo publica solo, con cada push a la rama main.
10. 10Dominio personalizado en CloudflareConectar tu dominio a GitHub Pages sin cambiar la URL, y los dos errores típicos que te vas a encontrar.
11. 11Gestión de contenido y flujo GitCómo se actualiza una web estática sin panel de administración, con Git como único motor.