Hugo + Firebase: Cómo crear tu propio sitio web estático gratis en minutos

Alguna vez pensó en tener su propio sitio web para poner su cartera de proyectos o currículum o un blog para usted. Al final de este artículo, podrás crear uno.

En general, para desarrollar un sitio web necesita saber HTML, CSS y un poco de JavaScript (a veces). Pero, para esto, no necesita tener ninguna habilidad de codificación. Solo necesitas conocimientos básicos de informática.

Para poner un sitio web, necesita tener un "espacio" (también conocido como hosting) donde se subirán todos sus archivos. Cada vez que alguien escribe su sitio web y hace clic en ingresar, estos son los archivos que se sirven / presentan al usuario en el navegador.

Comencemos con lo que necesita tener / saber:

Cuenta Google

Creo que ya puede tener una cuenta de Gmail, que es suficiente. Si no, crea uno

Dominio

Esto es opcional Hay varios proveedores de nombres de dominio en el mundo, además puedes comprar uno en Google . Puede encontrar una lista de proveedores de nombres de dominio. Es tan simple como ir de compras en Amazon .

Hugo

Hugo es una herramienta basada en el lenguaje Go , que genera sitios web estáticos. Puede usar varias plantillas y crear diferentes tipos de sitios web, como blogs, sitios de portafolio, etc.

Descárgalo desde aquí .

Firebase

Firebase es una plataforma de aplicaciones móviles y web, adquirida por Google hace unos años. Firebase ofrece alojamiento como una de sus características. Sin embargo, muchos desarrolladores de dispositivos móviles lo usan para análisis, notificaciones e informes de fallas de aplicaciones. Vamos a usarlo para alojar nuestro sitio web.

Node.js

Node.js es un tiempo de ejecución de JavaScript de código abierto creado en el motor de JavaScript V8 de Chrome . Para este tutorial, necesita que esté instalado en su máquina para que funcionen las herramientas de Firebase. Puede descargarlo e instalarlo desde aquí .

Paso 1: instala a Hugo en tu máquina

Windows: Obtendrá un archivo ejecutable portátil simple. Puede colocarlo en cualquier lugar y ejecutarlo a través de la línea de comando. Puede agregarlo a su variable de ruta en variables de entorno de Windows para hacer que se haga referencia a él en cualquier lugar.

Mac: puedes instalarlo usando Homebrew. Si no tiene instalado brew en su mac, puede descargar el tarball desde aquí .

De cualquier manera, asegúrese de que puede acceder a Hugo dando el siguiente comando.

Paso 2: crea un sitio de plantilla

Dirígete al lugar donde decidiste crear tu sitio web e ingresa el siguiente comando:

 $ hugo nuevo sitio <path_to_folder> 

En la ubicación dada, puede ver una estructura de carpeta como se muestra en la imagen de abajo.

Imagen tomada en Windows 10

Estas carpetas son solo marcadores de posición para su contenido. Todo el contenido de texto de su sitio va a la carpeta de contenido .

Puede ejecutar debajo de los comandos para agregar nuevos archivos.

 $ hugo nuevo about.md 

Si desea agregar una publicación de blog, cree una carpeta llamada " blog" en la carpeta "contenido" y comience a agregar sus archivos. Estos archivos tienen una extensión de ".md" que son archivos Markdown .

Markdown es un lenguaje de marcado de formato de texto sin formato. Es bonito y fácil. Hay innumerables guías sobre cómo acercarse a Markdown, aquí hay una .

Paso 3: establecer un tema para el sitio

Hugo tiene una gran comunidad. Su sitio de temas está enriquecido con diferentes categorías de temas de sitios web. Dirígete a él y selecciona un tema que se adapte a tus necesidades.

Elegí el tema de Introducción . Al hacer clic en el botón de descarga se redirigirá a GitHub .

Cada tema tendrá su propia manera de configurar las cosas. Este tema en particular no tiene muchos pasos. Simplemente clone o descargue el archivo zip en la carpeta de temas. Copie el archivo config.toml en la carpeta raíz de su sitio web.

Paso 4: configura tus preferencias

Abra el archivo config.toml y comience a editarlo. Indique su nombre y otros detalles que desea mostrar en el sitio web. Algunos temas son compatibles con Google Analytics para que pueda rastrear el recuento de visitas del usuario, etc. Puede otorgarle a su GA Id la recopilación de datos.

Paso 5: configurar un proyecto de alojamiento de Firebase

Como mencioné anteriormente, Firebase es una hermosa plataforma móvil con un montón de características. Utilicé el alojamiento de Firebase para alojar mi sitio web estático generado a través de Hugo.

Para usar los servicios de Firebase usa tu cuenta de Google e inicia sesión en el sitio web de Firebase .

Haga clic en "Ir a la consola". Cree un proyecto dándole un nombre. Se le mostrará una página de resumen en la que debe seleccionar " iniciarse en Hosting".

Paso 6: configura las herramientas de Firebase en tu máquina

Abra su interfaz de terminal / línea de comando en su máquina y escriba el comando a continuación.

 $ npm install -g firebase-tools 

El comando anterior instala el paquete Firebase-tools. Debe ejecutar algunos comandos más para poder implementar su sitio web directamente.

 $ firebase login 

Este comando conecta tu máquina al proyecto de Firebase. Le permite listar y seleccionar el proyecto al que desea enviar sus cambios.

 Lista de $ firebase 

Puede ejecutar el comando anterior para ver el proyecto que ha creado. Un toque final para todo el flujo de trabajo, necesitamos inicializar la carpeta raíz de su sitio web como raíz del proyecto de Firebase.

 $ firebase init 

Te hará algunas preguntas como

  • ¿Qué características de la CLI de Firebase quieres configurar? Respuesta: Alojamiento.
  • Seleccione un proyecto predeterminado de Firebase para este directorio. Respuesta: Seleccione el proyecto de Firebase que ha creado en el Paso 5.
  • ¿Desea usar como su directorio público? Respuesta: Sí.
  • Configurar como una aplicación de una sola página? Respuesta: Sí.

Para evitar confusiones, tengo detalladas capturas de pantalla tomadas en cada paso para su referencia. Se puede descargar aquí

¡Finalmente! La inicialización de Firebase está completa.

Paso 7: verifica tu sitio web localmente

Ejecute el comando debajo para verificar su sitio localmente en su máquina.

 $ hugo servidor -w 

Hugo viene con un servidor web liviano de alto rendimiento, donde puedes verificar todos tus cambios. Asegúrese de que todas sus imágenes estén en la carpeta estática / img . En un proceso iterativo, cambie su config.toml y verifique los que están en el navegador. A continuación se muestra el puerto en el que se ejecutará su servidor.

 http: // localhost: 1313 

Paso 8: implementa tu sitio web

Escriba el siguiente comando para generar su sitio y empújelo al proyecto correspondiente de Firebase que haya configurado en el Paso 5 .

 Despliegue $ hugo && firebase 

Paso 9: conéctelo a su dominio (opcional)

Firebase proporciona una opción para conectar tu dominio a la aplicación de Firebase. Haga clic en connect domain y proporcione su dominio y agregue los registros TXT para verificar la propiedad de su dominio.

Para iniciar sesión en su portal de registro de dominios.

Paso 10: crea una publicación de blog

Crear una publicación de blog es bastante simple. Hugo entiende los archivos de rebajas. Solo diríjase a la carpeta content-> blog (la ubicación de la carpeta depende del tema). Crea un archivo de reducción. Repite el paso 8 para ver los resultados.

Si tiene alguna pregunta o duda, ¡puede enviarme un mensaje de DM en Twitter !

Siempre feliz de ayudar!