Guía completa: Desplegar tu proyecto en Firebase Hosting y conectarlo con GitHub

Esta guía te llevará paso a paso por el proceso de subir tu proyecto web a Firebase Hosting y configurar la integración con GitHub para actualizaciones automáticas.

¿Qué necesitas antes de empezar?

• Una cuenta de Google (para Firebase)
• Una cuenta de GitHub
• Node.js instalado en tu computadora
• Tu proyecto web listo para desplegar

Parte 1: Preparar Firebase

Paso 1: Crear un proyecto en Firebase

1. Ve a Firebase Console
2. Haz clic en “Agregar proyecto” o “Add project”
3. Escribe un nombre para tu proyecto (por ejemplo: “mi-sitio-web”)
4. Acepta los términos y haz clic en “Continuar”
5. Puedes desactivar Google Analytics si no lo necesitas
6. Haz clic en “Crear proyecto” y espera unos segundos

Paso 2: Instalar Firebase CLI

Abre tu terminal o línea de comandos y ejecuta:

npm install -g firebase-tools

Este comando instala las herramientas de Firebase globalmente en tu computadora.

Paso 3: Iniciar sesión en Firebase

En la terminal, ejecuta:

firebase login

Se abrirá tu navegador. Inicia sesión con tu cuenta de Google y autoriza Firebase CLI.

Parte 2: Configurar tu proyecto local

Paso 4: Inicializar Firebase en tu proyecto

1. Abre la terminal en la carpeta de tu proyecto
2. Ejecuta:

firebase init hosting

3. Responde las preguntas:
   • “Select a default Firebase project”: Elige el proyecto que creaste en el Paso 1
   • “What do you want to use as your public directory?”: Escribe el nombre de tu carpeta con los archivos (normalmente public, dist, o build)
   • “Configure as a single-page app?”: Responde N (No) a menos que uses React, Vue o similar
   • “Set up automatic builds with GitHub?”: Responde N por ahora (lo haremos después)
   • “Overwrite index.html?”: Responde N (No) si ya tienes tu archivo

Paso 5: Primer despliegue

Ejecuta en la terminal:

firebase deploy

¡Listo! Tu sitio ya está en línea. Firebase te dará una URL como: https://tu-proyecto.web.app

Parte 3: Conectar con GitHub

Paso 6: Subir tu proyecto a GitHub

Si aún no tienes tu proyecto en GitHub:

1. Ve a GitHub y crea un nuevo repositorio
2. En tu terminal, dentro de tu proyecto, ejecuta:

git init
git add .
git commit -m "Primer commit"
git branch -M main
git remote add origin https://github.com/tu-usuario/tu-repositorio.git
git push -u origin main

Paso 7: Configurar GitHub Actions para despliegue automático

Vuelve a ejecutar:

firebase init hosting

Esta vez:

• “Set up automatic builds with GitHub?”: Responde Y (Sí)
• Autoriza Firebase para acceder a tu cuenta de GitHub
• Selecciona tu repositorio
• “Set up workflow for automatic deployment?”: Presiona Enter para aceptar
• “Set up automatic deployment to your live channel?”: Responde Y
• Selecciona la rama principal (normalmente main o master)

Firebase creará dos archivos en .github/workflows/:

• firebase-hosting-pull-request.yml (para pruebas en pull requests)
• firebase-hosting-merge.yml (para despliegues automáticos)

Paso 8: Hacer commit de los archivos de GitHub Actions

git add .
git commit -m "Configurar GitHub Actions para Firebase"
git push

¡Ya está todo configurado!

Ahora cada vez que hagas cambios en tu proyecto:

1. Modifica tus archivos
2. Haz commit de los cambios:

   git add .
   git commit -m "Descripción de los cambios"
   git push

3. GitHub Actions desplegará automáticamente a Firebase

Verificar el despliegue automático

1. Ve a tu repositorio en GitHub
2. Haz clic en la pestaña “Actions”
3. Verás el workflow ejecutándose
4. Cuando termine, tu sitio estará actualizado

Comandos útiles

• firebase deploy - Desplegar manualmente
• firebase hosting:channel:deploy preview - Crear una preview
• firebase serve - Ver tu sitio localmente antes de desplegar
• firebase projects:list - Ver todos tus proyectos de Firebase

Solución de problemas comunes

Error: No se encuentra la carpeta public

• Asegúrate de que el nombre de la carpeta en firebase.json coincida con tu carpeta de archivos

Error de permisos en GitHub

• Ve a Settings > Actions > General en tu repositorio y asegúrate de que “Read and write permissions” esté habilitado

Los cambios no se reflejan

• Verifica que tu carpeta de build esté actualizada
• Limpia la caché del navegador (Ctrl + Shift + R)

Conclusión

Ahora tienes tu sitio web desplegado en Firebase Hosting con actualización automática desde GitHub. Cada vez que hagas push a la rama principal, tu sitio se actualizará solo. ¡Es así de simple!

Para más información, consulta la documentación oficial de Firebase.