{"id":29228,"date":"2021-06-10T20:32:00","date_gmt":"2021-06-10T17:32:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29228"},"modified":"2021-10-17T16:20:56","modified_gmt":"2021-10-17T13:20:56","slug":"implemente-un-sitio-web-estatico-en-firebase-hosting-de-forma-gratuita","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/implemente-un-sitio-web-estatico-en-firebase-hosting-de-forma-gratuita\/","title":{"rendered":"Implemente un sitio web est\u00e1tico en Firebase Hosting de forma gratuita"},"content":{"rendered":"

El alojamiento de Firebase es un servicio ofrecido por Google que aloja sitios web est\u00e1ticos y din\u00e1micos de forma segura. Es el mejor servicio gratuito para desarrolladores. Puede mostrar un dise\u00f1o de sitio, una versi\u00f3n de preproducci\u00f3n de un sitio al cliente al implementarlo en el alojamiento de Firebase.<\/p>\n

Un usuario puede utilizar el plan gratuito de Firebase para alojar un sitio web. El plan gratuito incluye soporte para dominio personalizado y SSL, almacenamiento de 1GB. El almacenamiento de 1 GB es suficiente para sitios web m\u00e1s peque\u00f1os. Para obtener una lista de todas las funciones incluidas en los planes gratuitos y premium, consulte su p\u00e1gina de precios<\/a>.<\/p>\n

Aunque Firebase hosting brinda soporte para ejecutar c\u00f3digo Node.js \/ JavaScript, en este art\u00edculo nos enfocamos solo en implementar el sitio web est\u00e1tico. Para implementar un sitio web din\u00e1mico en Firebase, escribir\u00e9 otro art\u00edculo en el futuro.<\/p>\n

Empezando<\/h3>\n

Para comenzar, debe tener Node.js instalado en su sistema. Puede obtener el paquete Node.js para instalarlo en su sitio web oficial<\/a>.<\/p>\n

Una vez que tenga Node.js instalado en su sistema, dir\u00edjase a la consola de Firebase<\/a> y cree un proyecto haciendo clic en el cuadro ‘Agregar proyecto’. Complete toda la informaci\u00f3n que se le solicite.<\/p>\n

Al crear el proyecto de Firebase, lo redireccionar\u00e1 al panel del proyecto. Haga clic en ‘Alojamiento’ en la barra lateral izquierda y luego en ‘Comenzar’. Se abrir\u00e1 una p\u00e1gina donde encontrar\u00e1 instrucciones para la implementaci\u00f3n. Veremos esto en la siguiente parte del tutorial.<\/p>\n

Implementar un sitio web est\u00e1tico en Firebase Hosting<\/h3>\n

Despu\u00e9s de crear un proyecto en Firebase, con la ayuda de algunos comandos, podemos implementar un sitio web est\u00e1tico en el alojamiento de Firebase. Primero, debe instalar Firebase CLI y luego configurarlo localmente.<\/p>\n

Instalar Firebase CLI<\/h4>\n

Para la implementaci\u00f3n, lo primero que debe hacer es instalar Firebase CLI. Ha instalado Node.js, as\u00ed que use npm para instalar CLI. Abra la terminal e instale Firebase CLI usando npm de la siguiente manera:<\/p>\n

npm install -g firebase-tools<\/code><\/pre>\n
Tenga en cuenta que estamos instalando las herramientas de Firebase a nivel mundial utilizando -g<\/code>. Al hacerlo, puede ejecutar comandos de Firebase desde cualquier directorio de su m\u00e1quina. Ahora desde la terminal ejecuta el siguiente comando:<\/p>\n
firebase login<\/code><\/pre>\n
Puede redirigirle a la p\u00e1gina de inicio de sesi\u00f3n de la cuenta de Google. Simplemente siga los pasos sugeridos. Es solo un proceso de autorizaci\u00f3n con Firebase, por lo que el proyecto se implementar\u00e1 solo en su cuenta.<\/p>\n
Inicializar e implementar<\/h4>\n
Despu\u00e9s de autorizar su cuenta de Google con Firebase CLI, debe inicializar Firebase en el directorio ra\u00edz del proyecto. Para esto, ejecute el siguiente comando en el directorio ra\u00edz de su proyecto.<\/p>\n
firebase init<\/code><\/pre>\n
Al ejecutar el comando anterior, CLI solicita una opci\u00f3n diferente para elegir. Debe seleccionar la opci\u00f3n ‘Alojamiento’ navegando por una flecha y luego presionando la tecla de espacio. Presiona Enter despu\u00e9s de seleccionar la opci\u00f3n ‘Hospedaje’.<\/p>\n
\"Implemente<\/a><\/p>\n
A continuaci\u00f3n, seleccione el proyecto que ha creado en Firebase console. Presiona la tecla Enter. La siguiente pregunta ser\u00eda \u00bfQu\u00e9 desea utilizar como directorio p\u00fablico? (p\u00fablico). No es necesario hacer nada aqu\u00ed. Simplemente presione la tecla Enter.<\/p>\n
Para la siguiente pregunta \u00bfConfigurar como una aplicaci\u00f3n de una sola p\u00e1gina (reescribir todas las URL en \/index.html)? (y \/ N), presione N y presione Enter, ya que no somos una aplicaci\u00f3n de implementaci\u00f3n de una sola p\u00e1gina.<\/p>\n
Despu\u00e9s de este comando, ver\u00e1 un par de archivos creados en su directorio ra\u00edz junto con la public<\/code>carpeta. Este public<\/code>directorio servir\u00e1 como ra\u00edz para la implementaci\u00f3n. En este public<\/code>directorio necesita mantener los archivos de su proyecto.<\/p>\n
Ahora, creemos p\u00e1ginas HTML est\u00e1ticas. Como este tutorial es solo para fines de demostraci\u00f3n, estoy creando p\u00e1ginas HTML b\u00e1sicas.<\/p>\n
public \/ index.html<\/strong><\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Document<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<h1>This is Index Page<\/h1>\n\u00a0\u00a0\u00a0\u00a0<a href=\"index.html\">Home<\/a> | <a href=\"about.html\">About<\/a>\n<\/body>\n<\/html><\/code><\/pre>\n
public \/ about.html<\/strong><\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Document<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<h1>This is About Page<\/h1>\n\u00a0\u00a0\u00a0\u00a0<a href=\"index.html\">Home<\/a> | <a href=\"about.html\">About<\/a>\n<\/body>\n<\/html><\/code><\/pre>\n
public \/ style.css<\/strong><\/p>\n
h1 {\n\u00a0\u00a0\u00a0\u00a0color: blueviolet;\n}<\/code><\/pre>\n
Estas son nuestras p\u00e1ginas est\u00e1ticas que vamos a implementar en el alojamiento de Firebase.<\/p>\n
Si desea probar el proyecto localmente antes de la implementaci\u00f3n, ejecute el comando serve de la siguiente manera:<\/p>\n
firebase serve<\/code><\/pre>\n
Iniciar\u00e1 su servidor local en http: \/\/ localhost: 5000<\/a>. Pruebe su proyecto y si todo est\u00e1 bien, implem\u00e9ntelo usando el comando:<\/p>\n
firebase deploy<\/code><\/pre>\n
Una vez completada la implementaci\u00f3n, deber\u00eda ver la URL de alojamiento en la consola.<\/p>\n
\"Implemente<\/a><\/p>\n
Ejecute la URL de alojamiento en el navegador y deber\u00eda ver que su sitio web se ha implementado correctamente. Tenga en cuenta que puede implementar su proyecto tantas veces. Despu\u00e9s de sus cambios, simplemente ejecute el comando de implementaci\u00f3n y su sitio se implementar\u00e1 con la nueva versi\u00f3n.<\/p>\n
Revertir su versi\u00f3n<\/h3>\n
Firebase mantiene un historial de todas sus versiones de implementaci\u00f3n. Incluso puede volver a la versi\u00f3n anterior. Vaya a la p\u00e1gina de Firebase Hosting donde encontrar\u00e1 una opci\u00f3n de reversi\u00f3n (suponiendo que haya implementado m\u00e1s de una versi\u00f3n).<\/p>\n
\"Implemente<\/a><\/p>\n
Al hacer una reversi\u00f3n a las versiones, puede cambiar entre cada versi\u00f3n de su sitio web directamente. Es simple y \u00fatil durante la etapa de dise\u00f1o y desarrollo.<\/p>\n
Espero que conozcas los conceptos b\u00e1sicos sobre el proceso de implementaci\u00f3n del alojamiento de Firebase. Comparta sus pensamientos y sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n