DEV Community

Cover image for Astro en Firebase hosting y conectado a GitHub
Joaquin Sáez
Joaquin Sáez

Posted on • Originally published at code.webgae.com

Astro en Firebase hosting y conectado a GitHub

¿Qué vamos a lograr?

  1. Tendrás tu web Astro alojada en servidores de Google.
  2. Configuraremos un "robot" (GitHub Actions) para que cada vez que hagas un cambio en tu código y lo guardes, la web se actualice sola automáticamente.

Requisitos previos

  • Tener Node.js instalado en tu ordenador.
  • Una cuenta de Google (Gmail).
  • Una cuenta de GitHub.
  • Tener Git instalado en tu ordenador.

Paso 1: Crear el proyecto en Firebase (La Nube)

Primero vamos a preparar el terreno en Google.

  1. Ve a la Consola de Firebase e inicia sesión con tu Google.
  2. Haz clic en "Crear un proyecto" (o "Agregar proyecto").
  3. Ponle un nombre (ej: mi-blog-astro).
  4. Desactiva "Google Analytics" por ahora (para hacerlo más rápido) y dale a Crear proyecto.
  5. Espera unos segundos y dale a Continuar. Ya tienes tu espacio en la nube listo.

Paso 2: Crear tu proyecto Astro (Tu ordenador)

Si ya tienes una web Astro, salta este paso. Si no:

  1. Abre tu terminal (consola o VS Code).

  2. Ejecuta:

    npm create astro@latest mi-web-firebase

  3. Sigue las instrucciones (elige las opciones por defecto: "Empty" o "Blog", instalar dependencias: Sí, TypeScript: Sí/No según prefieras).

  4. Entra en la carpeta:

    cd mi-web-firebase

Paso 3: Crear el repositorio en GitHub

Necesitamos subir tu código a internet.

  1. Ve a GitHub.com y crea un New Repository.
  2. Ponle nombre (ej: mi-web-firebase). Déjalo Público. No añadas README ni .gitignore. Dale a Create repository.
  3. Copia la URL que te dan (será algo como https://github.com/TU_USUARIO/mi-web-firebase.git).

  4. Vuelve a tu terminal (dentro de tu proyecto Astro) y conecta todo:

    git init
git remote add origin PEGA_AQUI_LA_URL_QUE_COPIASTE

    (No hagas push todavía).

Paso 4: Instalar las herramientas de Firebase

Para conectar tu PC con Google, necesitas la herramienta de comandos de Firebase.

  1. En tu terminal, instala la herramienta globalmente:

    npm install -g firebase-tools

  2. Inicia sesión:

    firebase login

    Se abrirá una ventana en tu navegador. Selecciona tu cuenta de Google y dale permiso.

Paso 5: Conectar y Configurar (El paso más importante)

Aquí ocurre la magia. Vamos a decirle a Firebase que queremos Hosting y Automatización.

  1. En la terminal, dentro de la carpeta de tu proyecto, escribe:

    firebase init hosting

  2. Ahora verás un menú. Usa las flechas del teclado y la barra espaciadora para seleccionar.

    • Te preguntará: "Are you ready to proceed?" -> Escribe Y y Enter.
    • En "Features", selecciona con espacio: Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys. (Asegúrate de marcar la que menciona GitHub Actions). Dale a Enter.

  3. Configuración del Proyecto:

    • Selecciona: Use an existing project.
    • Busca en la lista el proyecto que creaste en el Paso 1 (mi-blog-astro) y dale Enter.

  4. Configuración del Hosting (¡ATENCIÓN AQUÍ!):

    • What do you want to use as your public directory? Astro, por defecto, construye tu sitio en una carpeta llamada dist. Escribe: dist y dale Enter. (Si lo dejas como 'public', fallará).
    • Configure as a single-page app (rewrite all urls to /index.html)? Escribe: No (Astro genera páginas estáticas individuales, es mejor para SEO).
    • Set up automatic builds and deploys with GitHub? Escribe: Yes.

  5. Configuración de GitHub:

    • Se abrirá el navegador para pedir permiso a Firebase para acceder a tu GitHub. Acepta.
    • En la terminal te pedirá: For which GitHub repository would you like to set up the GitHub workflow? Escribe: TU_USUARIO_GITHUB/NOMBRE_DEL_REPO (ej: juanperez/mi-web-firebase).

  6. Configuración del Script:

    • Set up the workflow to run a build script before every deploy? Yes.
    • What script should be run before every deploy? Por defecto dice npm ci && npm run build. Dale a Enter, eso es perfecto.
    • Set up automatic deployment to your site's live channel when a PR is merged? Yes.
    • What is the name of the GitHub branch associated with your site's live channel? Por defecto suele ser main o master. Dale a Enter.

¡Listo! Firebase ha creado unos archivos .yml en una carpeta oculta .github. Esos son las instrucciones para el robot.

Paso 6: Subir todo a GitHub (El lanzamiento)

Ahora que todo está configurado, solo tenemos que guardar los cambios y enviarlos a GitHub.

  1. En la terminal:

    git add .
git commit -m "Configuración inicial de Firebase y Astro"
git push -u origin main

    (Si tu rama se llama master, pon master en lugar de main).

Paso 7: Ver la magia en acción

  1. Ve a tu repositorio en GitHub.
  2. Haz clic en la pestaña que dice Actions (arriba).
  3. Verás un proceso con un punto amarillo o verde girando. Se llama "Deploy to Firebase Hosting on merge...".
  4. Haz clic en él para ver los detalles. El robot está:
    • Instalando Astro.
    • Creando la web (npm run build).
    • Enviándola a Google Firebase.

Cuando el círculo se ponga Verde, el proceso ha terminado.

En los detalles del proceso (o en tu consola de Firebase), verás una URL que termina en .web.app o .firebaseapp.com. ¡Esa es tu web en vivo!

¿Cómo actualizo mi blog en el futuro?

A partir de ahora, olvídate de Firebase, de consolas y de despliegues manuales. Tu flujo de trabajo es:

  1. Haces cambios en tu código (escribes un nuevo artículo, cambias un color, etc.).

  2. Guardas y subes a GitHub:

    git add .
git commit -m "Nuevo post sobre programación"
git push

  3. ¡Ya está! En unos 60 segundos, GitHub Actions detectará el cambio, construirá la nueva versión y la actualizará en Firebase automáticamente.

Resumen de Troubleshooting (Problemas comunes)

  • Error "Directory 'public' does not exist": Te equivocaste en el paso 5 y dejaste la carpeta como 'public'. Ve al archivo firebase.json en tu editor y cambia "public": "public" por "public": "dist".
  • La página sale en blanco: Asegúrate de que en el paso 5 dijiste que "dist" era tu directorio. Astro guarda los archivos finales ahí.

A veces la conexión automática falla la primera vez (por bloqueos de ventanas emergentes, sesiones expiradas o internet inestable) o simplemente decidiste saltarte ese paso al principio y ahora quieres activarlo.

No necesitas empezar de cero. Hay un comando específico para arreglar solo la parte de GitHub sin romper lo que ya configuraste.

Aquí tienes cómo conectar GitHub a Firebase después de haber creado el proyecto.

Paso 1: Asegúrate de que el repositorio existe

Antes de nada, tu código ya debe estar subido a un repositorio de GitHub (aunque no tenga la automatización todavía).

  1. Asegúrate de haber hecho git init, git remote add... y git push.
  2. Tu código debe estar visible en github.com/TU_USUARIO/TU_PROYECTO.

Paso 2: El comando mágico

En tu terminal, dentro de la carpeta de tu proyecto, ejecuta este comando específico:

firebase init hosting:github
Enter fullscreen mode Exit fullscreen mode

Este comando ignora el resto de configuraciones y se centra exclusivamente en conectar el "robot" de despliegue.

Paso 3: Seguir el asistente (Con cuidado)

Te hará una serie de preguntas. Vamos a responderlas paso a paso para Astro:

  1. Autorización:
    Posiblemente se abra una ventana en el navegador pidiéndote permiso para acceder a tu GitHub. Acepta.

    • Si te da error de login: Ejecuta firebase login --reauth antes de empezar.

  2. "For which GitHub repository would you like to set up the GitHub workflow?"
    Escribe el nombre exacto de tu repositorio.

    • Formato: usuario/repo
    • Ejemplo: carlos-dev/mi-blog-astro

  3. "Set up the workflow to run a build script before every deploy?"
    (¿Configurar un script de construcción antes de desplegar?)

    • Respuesta: Yes (Y).
    • Explicación: Esto es vital. Necesitamos que GitHub instale Astro y genere el HTML antes de subirlo.

  4. "What script should be run before every deploy?"
    (¿Qué comando ejecutamos?)

    • Respuesta: npm ci && npm run build
    • Nota: Si te sugiere npm ci && npm run build, simplemente dale a Enter. Es lo correcto para Astro.

  5. "Set up automatic deployment to your site's live channel when a PR is merged?"
    (¿Desplegar automáticamente cuando se acepten cambios en la rama principal?)

    • Respuesta: Yes (Y).

  6. "What is the name of the GitHub branch associated with your site's live channel?"

    • Respuesta: Generalmente es main o master. Mira en tu GitHub cómo se llama tu rama principal y escríbelo. Dale a Enter.

Paso 4: Subir los nuevos archivos de configuración

Firebase acaba de crear (o sobrescribir) una carpeta oculta llamada .github/workflows en tu ordenador. Esos son los archivos de configuración que faltaban.

Para que funcione, tienes que enviarlos a GitHub:

git add .
git commit -m "Conectando GitHub Actions con Firebase manualmente"
git push
Enter fullscreen mode Exit fullscreen mode

Paso 5: Verificar que ha funcionado

  1. Ve a tu repositorio en GitHub.
  2. Entra en la pestaña Settings (Configuración del repo).
  3. En el menú lateral izquierdo, busca Secrets and variables -> Actions.
  4. Deberías ver un secreto llamado FIREBASE_SERVICE_ACCOUNT_....

Si ese secreto está ahí, la conexión fue un éxito.

Ahora, ve a la pestaña Actions de GitHub. Deberías ver que se ha iniciado un nuevo proceso de despliegue (debido al git push que hiciste en el paso 4).

¿Qué hago si sigue fallando la autenticación? (Plan B Manual)

Si la consola te da errores raros de autenticación ("Authentication Error", "Bad Credentials"), haz lo siguiente:

  1. Cierra sesión en la consola: firebase logout.
  2. Vuelve a iniciar: firebase login.
  3. Vuelve a intentar el paso 2 (firebase init hosting:github).

Si ni aun así funciona, es probable que sea un problema de permisos de tu ordenador/navegador. En ese caso, lo más rápido suele ser usar otro navegador predeterminado temporalmente o revisar si tienes un bloqueador de pop-ups agresivo.

Top comments (0)