Publicar un proyecto web en internet es uno de los pasos más satisfactorios del desarrollo. Con Firebase Hosting puedes llevar tu blog desde tu máquina local a una URL pública en cuestión de minutos, siguiendo apenas tres pasos. A continuación se explica el proceso completo tal como se lleva a cabo en la práctica.
¿Cómo crear un proyecto en la consola de Firebase?
Antes de tocar la terminal, es necesario tener un proyecto configurado en la consola de Firebase [0:42]. Desde la consola se crea un proyecto nuevo asignándole un nombre descriptivo —por ejemplo, materialize-blog—. Durante la creación, Firebase pregunta si deseas activar Google Analytics; tratándose de un blog, activarlo es una buena práctica porque te permitirá medir el tráfico y el comportamiento de los visitantes [1:07].
Una vez creado el proyecto, dentro de la consola aparece la sección de Hosting. Ahí mismo puedes consultar la guía de inicio rápido (Get started) que resume los tres pasos fundamentales:
- Instalar el CLI de Firebase de forma global.
- Inicializar Firebase en tu proyecto local.
- Ejecutar el comando de deploy.
¿Cómo inicializar Firebase desde la terminal?
Si trabajas con Visual Studio Code, puedes abrir una terminal integrada desde el menú Terminal → Nueva terminal, lo que te posiciona directamente en la carpeta del proyecto [2:22]. Un comando rápido como ls te confirma que estás en el lugar correcto al listar los archivos y carpetas existentes.
El siguiente paso es ejecutar:
bash
firebase init
Este comando presenta varias opciones de servicios de Firebase: base de datos, Firestore, Functions, entre otros. Para publicar un sitio estático basta con seleccionar Hosting usando la barra de espacio y confirmar con Enter [2:45].
Después, Firebase pregunta si deseas vincular un proyecto existente. Aquí es donde aparece el proyecto que acabas de crear en la consola. Lo seleccionas y continúas.
¿Qué es la carpeta public y por qué es importante?
Firebase solicita una carpeta de destino que por defecto se llama public [3:15]. Esta carpeta es la que se sube al servidor, así que todo el contenido visible de tu blog debe estar ahí: archivos HTML, CSS, JavaScript e imágenes.
Al inicializar, Firebase genera un index.html dentro de public. Es necesario reemplazarlo con tu propio index.html y copiar todas las dependencias del proyecto a esa carpeta. Cuando el sistema pregunte si deseas sobrescribir el archivo existente, confirma que sí.
También se pregunta si el proyecto es una single page application (SPA). Responder afirmativamente configura las redirecciones para que todas las rutas apunten al mismo index.html [3:30].
¿Cómo ejecutar el deploy y obtener la URL pública?
Con todo en su lugar, el último comando es:
bash
firebase deploy
Firebase sube el contenido de la carpeta public al servidor y, al terminar, muestra una URL pública [4:08]. Esa dirección es la que puedes compartir para que cualquier persona vea tu blog en vivo.
¿Qué retos puedes completar después del deploy?
El proyecto queda funcional, pero hay tareas pendientes que fortalecen tanto el blog como tus habilidades:
- Enlazar todas las vistas de blog: conectar cada blog post con su vista individual correspondiente [4:45].
- Crear las vistas faltantes: la página de contacto y la sección "Sobre mí" que aparecen en el nav pero aún no tienen contenido [4:55].
- Cargar posts de forma dinámica: aprovechando la base de datos en tiempo real que ofrece Firebase, puedes reemplazar los blog posts estáticos (dummy) por contenido dinámico almacenado en Firebase Realtime Database o Firestore [5:10].
Este último reto es especialmente valioso si ya cuentas con conocimientos de JavaScript, porque transforma un sitio estático en un blog completamente funcional donde puedes crear, editar y eliminar publicaciones sin tocar el código fuente cada vez.
¿Ya hiciste tu deploy? Comparte tu URL y cuéntanos qué reto vas a abordar primero.
