Soy un novato total en lo que respecta al desarrollo web, pero estoy mejorando mis habilidades tecnológicas todos los días. He tratado de mantener esta publicación lo más simple posible para que pueda ayudar a los principiantes como yo. Me he ocupado de todos los pasos y códigos que mencioné en esta publicación de blog, pero si encuentra algún error o desea sugerir algo, no dude en comentarlo. Se lo agradecería.
Los sitios estáticos son rápidos, seguros, flexibles y confiables. No necesita preocuparse mucho por la inyección de código malicioso en su sitio. El costo de alojamiento de los sitios estáticos es significativamente más barato. No entraré en detalles sobre este tema, pero aquí hay un excelente artículo sobre sitios estáticos de Scotch.
En esta publicación de blog, voy a implementar un sitio estático en Google Firebase, y eso también GRATIS. La publicación es una guía paso a paso y será útil, especialmente para los novatos en tecnología.
Google adquirió Firebase en 2014. Se basa en la infraestructura de Google y lo ayuda a crear aplicaciones de alta calidad rápidamente, y eso también sin administrar la infraestructura. Google Firebase le permite alojar su contenido estático de forma gratuita con su plan Spark. Obtenga más información sobre el alojamiento de Firebase.
Requisitos
Como dije, esta guía práctica es puramente para principiantes. Por lo tanto, para alojar su sitio estático, solo necesita:
- Una cuenta de Google
- Una computadora portátil o de escritorio con sistema operativo Windows en ejecución
- Familiarizarse con las funciones básicas del teclado de su computadora portátil o de escritorio
Eso es todo. Comencemos.
Paso 1:crea un proyecto en Google Firebase
Registre su cuenta con Google Firebase. Crea una cuenta de Google si no la tienes. En Firebase console, haz clic en Agregar proyecto.
Ingrese un nombre de proyecto, ID de proyecto (opcional, ya que Firebase asigna automáticamente una ID única a su proyecto de Firebase). Utilice la configuración predeterminada por ahora y haga clic en Crear proyecto.
Una vez que se crea el proyecto, haga clic en el botón Continuar y se lo dirigirá a su panel de control de Firebase. Aquí encontrará algunos detalles:
1. El proyecto actual es “thenewspaper-tech-demo”. Haga clic en el menú desplegable para ver todos sus proyectos, si ha creado más de uno.
2. El proyecto actual está configurado como "thenewspaper-tech-demo".
3. Puede configurar los ajustes para el proyecto actual haciendo clic en el icono de configuración del proyecto. Por ahora, déjalo como está.
4. Usaremos esta pestaña de Hosting para implementar nuestro sitio estático.
5. Su plan Firebase es Spark, que es gratuito. Consulta todos los planes y precios de Firebase.
Paso 2:Configure las herramientas necesarias
Para alojar su sitio, debe instalar las herramientas de línea de comandos de Firebase.
1. Descargue e instale Node.js para Mac/Linux/Windows. Estoy usando Windows10 de 64 bits. Asegúrese de descargar la versión LTS recomendada para la mayoría de los usuarios.
2. Abra Windows PowerShell. Para abrir, presione los botones Windows + X simultáneamente usando su teclado y luego haga clic en "Administrador de Windows PowerShell". Haga clic en Sí cuando se lo solicite el Control de cuentas de usuario.
3. Instale las herramientas de línea de comandos de Firebase ejecutando el siguiente comando en PowerShell:
$ npm install -g firebase-tools
Este comando instala el comando firebase disponible globalmente. Si el comando anterior no funciona, cambie los permisos de npm y vuelva a ejecutar el comando. Para asegurarse de que tiene la última versión de Firebase CLI (interfaz de línea de comandos), vuelva a ejecutar el comando anterior incluso si ha instalado las herramientas de líneas de comandos anteriormente.
Paso 3:Crea tu sitio localmente con Firebase
En la terminal ya abierta, ejecute el siguiente comando para iniciar sesión en Google.
$ firebase login
Ejecutar este comando abrirá la ventana de su navegador predeterminado y le pedirá que le dé acceso a Gmail a Firebase. Haga clic en el botón Permitir y conéctese con su correo electrónico. Si no tiene una cuenta de Gmail, cree una. Es posible que obtenga una ventana emergente del Firewall de Windows para acceder. Simplemente permita o haga clic en Sí.
Este comando conecta su máquina local a Firebase y le otorga acceso a sus proyectos de Firebase. Verá un mensaje de "éxito:iniciado sesión como..." en el shell.
Para probar que la autenticación funcionó (y para enumerar todos sus proyectos de Firebase), ejecute el siguiente comando. La lista que se muestra debe ser la misma que los proyectos de Firebase enumerados en la consola de Firebase.
$ firebase list
Para conectar su proyecto local a su proyecto de Firebase, ejecute el siguiente comando desde la raíz de su directorio de proyecto local.
$ firebase init
Una vez que ejecute el comando anterior, verá el directorio de su proyecto. El directorio del proyecto se ubicará en una carpeta en esta ruta "C:\Windows\System32". El nombre de la carpeta de trabajo será el nombre que le des. De forma predeterminada, Firebase lo nombra como "público". Veremos esto en un rato. Por ahora, escriba Y o Sí y presione el botón Entrar para continuar con los pasos.
El comando firebase init presenta una serie de opciones de configuración. Tienes que elegir Hosting. Vaya hacia abajo presionando la tecla de flecha hacia abajo con su teclado y luego presione la barra espaciadora para seleccionar la función de alojamiento. Presione el botón Entrar para continuar.
Ahora se le presentará la configuración del proyecto.
Seleccione su proyecto, que creó anteriormente en la consola de Firebase. El nombre del proyecto que creé fue "thenewspaper-tech-demo". También puede crear un nuevo proyecto desde aquí.
En el futuro, se le presentará la configuración de alojamiento. Deberá elegir el directorio de su proyecto. Especifique un directorio para usar como su directorio raíz público. Para especificar, escriba público y presione Entrar. Tenga en cuenta que puede ingresar un nombre diferente (como "mi_primer_proyecto") en lugar de "público". En este punto, especifique su directorio raíz público, pero también puede especificarlo más tarde editando su archivo de configuración firebase.json.
Para configurar más productos de Firebase, puede ejecutar firebase init más tarde. El directorio raíz público predeterminado se llama público y se encuentra aquí "C:\Windows\System32\public". Es interesante notar que Firebase hace un par de cosas inteligentes automáticamente:
1. Crea un directorio público si no lo creas tú.
2. Crea un archivo index.html y un archivo 404.html en el directorio. Abra una carpeta pública para ver ambos archivos.
A continuación, deberá elegir una configuración para su sitio.
Si selecciona crear una aplicación de una página, entonces Firebase agrega automáticamente configuraciones de reescritura para usted. Como no quiero volver a escribir las direcciones URL, elijo N y presiono Intro.
Esto completará el proceso de inicialización de Firebase. Tenga en cuenta que el comando firebse init agrega un par de archivos a la raíz del directorio del sitio local:
– Un archivo json, firebase.json, que muestra la configuración del proyecto.
– Un archivo .firebaserc que proporciona información sobre los alias del proyecto.
Ahora, comencemos el servidor local para el desarrollo. Ejecute el siguiente comando desde la raíz del directorio de su aplicación local:
$ firebase serve
Este comando servirá archivos de alojamiento desde el directorio público e iniciará un servidor local.
Abra su navegador y escriba:http://localhost:5000
Entonces, ha creado su sitio localmente, que contiene el contenido que ve en la captura de pantalla anterior.
Ahora, cambiemos el contenido del sitio y reconstruyamos el sitio para ver los contenidos actualizados. Primero, vaya a la ventana emergente de Windows PowerShell que ya está abierta. Apague el servidor local. Para hacer esto, haga clic en cualquier parte del área emergente y presione el botón CNTRL+C. Se apagará.
Como había mostrado anteriormente, los archivos html se encuentran aquí "C:\Windows\System32\public". Vaya a la carpeta, copie el archivo html del índice y péguelo en su escritorio. Ahora, haga clic derecho y abra el archivo html de índice con cualquier editor de texto. Estoy usando el código de Visual Studio. De forma predeterminada, verá el Bloc de notas en la ventana emergente del clic derecho. Si no ve el bloc de notas, elija otra opción de aplicación, desplácese hacia abajo al final y seleccione Más aplicaciones. Desde allí, seleccione Bloc de notas.
Una vez que se abra el archivo de índice html, cambie la palabra "Bienvenido" a "Hola mundo".
Guarda el archivo. Simplemente presione CNTRL+S para guardar. La salida se verá así:
Ahora, copie el archivo de índice modificado y péguelo en la carpeta pública. Para hacer esto, debe ser el administrador de la computadora. Dar permiso para pegar. Ejecute el siguiente comando nuevamente para iniciar el servidor local
$ firebase serve
Este comando servirá archivos de alojamiento desde el directorio público e iniciará un servidor local. Abra su navegador y escriba:http://localhost:5000. Verá sus cambios.
Paso 4:implemente su sitio
Ahora desplegaremos este proyecto. Pero primero apague el servidor local como le indiqué antes.
Para implementar en nuestro proyecto de Firebase "thenewspaper-tech-demo", ejecute el siguiente comando desde el directorio de su proyecto:
$ firebase deploy
Este comando de implementación de firebase implementa una versión en los sitios de alojamiento predeterminados de su proyecto de Firebase:
project-id.web.app project-id.firebaseapp.com
Por lo tanto, verá sus sitios que se verán similares a estas URL:
https://thenewspaper-tech-demo.web.app https://thenewspaper-tech-demo.firebaseapp.com
También puede ver estas URL cuando vaya a la sección Hosting de Firebase Console.
¡Felicitaciones! Has implementado tu primer sitio estático con firebase, y eso también es gratis.
Nota :Debe tener en cuenta que nuestro proyecto se encuentra en C-drive por ahora. Cuando intentaba implementar mis archivos estáticos por primera vez, seguí el tutorial oficial de Firebase. Y siendo yo mismo un novato, seguí la corriente. Pero cuando traté de inicializar un proyecto real en otra unidad, nunca funcionó para mí. Si tienes el mismo problema, aquí tienes la solución. Dice:"Cuando se ejecuta firebase init, sube por el árbol de directorios en busca de un directorio principal que ya se haya inicializado como un proyecto de Firebase".
- Busque un archivo firebase.json en la ubicación /Users/SEB.
- Eliminar ese archivo, si existe.
- El problema se solucionará
Para evitar todos estos problemas, le sugiero que inicialice un proyecto en la carpeta deseada antes de ejecutar cualquier comando de Firebase. Para esto, primero debe abrir PowerShell en esa carpeta. Aquí está la guía rápida para abrir PowerShell en la carpeta deseada.