Creando un blog para ConstruInspector - ¿Cómo crear un blog gratis usando Firebase y Hugo? (Parte 1)
Después de un largo camino y aprendizaje en ConstruInspector, hemos decidido iniciar un blog, en donde queremos compartir con nuestros clientes información que pueden ayudarlos a crecer en su proceso, pero igualmente queremos compartir nuestra experiencia durante nuestro proceso, con el ánimo de ayudar a cualquiera que se encuentre en un camino similar al nuestro.
A pesar que tenemos mucho que contar, decidimos iniciar este blog precisamente mostrando el proceso de su creación, ya que es un tema del que podemos escribir mientras estamos en l.
Aún no tenemos clara nuestra estrategia de contenido, así que este post en especial estará enfocado principalmente a los aspectos técnicos de este blog.
Si este fuera un blog técnico, probablemente el nombre de este post sería ¿Cómo crear un blog gratis usando Firebase y Hugo?, lo cual será precisamente lo que realizaremos en este post.
La primera pregunta te harías es: ¿Por qué ésta selección de tecnologías? Existen muchas plataformas para desarrollar un blog: WordPress, Ghost, Known, entre otras, pero teníamos una restricción a la hora de desarrollar este blog, y es que debía ser rápido y con un costo de desarrollo muy bajo.
Como para ConstruInspector ya estábamos usando Firebase, tenía mucho sentido continuar usando la misma tecnología para el blog, ya que no queremos ampliar nuestro stack para esto, por lo que plataformas basadas en PHP como WordPress no eran una opción. Por el otro lado Ghost se instala Docker o directamente en una máquina virtual, y configurar una base de datos (o usar una ya configurada), pero no queríamos encargarnos del mantenimiento, ya que queremos enfocarnos netamente en el desarrollo de nuestra app, y no del blog.
Así que después de una corta investigación, descubrimos Hugo, herramienta que se ajustaba justo a lo que necesitábamos. Su contenido se compone de archivos Markdown, su publicación consiste en archivos HTML, no necesita náda más que un servidor de archivos estáticos, lo cual se adecuaba a nuestro requerimiento de tiempo y costo.
Firebase hosting nos permite alojar el contenido estatico generado por Hugo de forma gratuita, por lo que era la mejor solución para nosotros.
Por otro lado, Hugo tiene una gran ventaja respecto a otro tipo de CMS, y es que al ser un generador de sitios estático, es rápido, lo único que realiza es una rápida transpilación, y ya se encuentra listo para publicarse. Al contrario de otros CMS, ningún código corre durante el tiempo de ejecución cuando un usuario visita el blog, al igual que no es necesario configurar ningún tipo de cache, lo cual lo hace ideal para contenido que no varía mucho como lo es un blog.
Configuración del blog
Sin más preámbulo, para empezar lo primero que hay que hacer es instalar hugo y firebase. No voy a ahondar mucho en este tema, ya que la instalación es muy sencilla y está muy bien documentada.
Una vez tengan instaladas ambas herramientas, lo primero que deben hacer será crear un nuevo proyecto:
$ hugo new site construinspector-blog
Este comando creará una nueva carpeta con el blog, pero aún hay que configurarlo. El primer y más importante paso es escoger un tema. Existen varios temas creados para Hugo. Nosotros escogimos tranquilpeak, el cual nos va a permitir personalizarlo más adelante de acuerdo a lo que estamos buscando.
$ cd construinspector-blog/themes
$ git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git
El paso que sigue es muy importante, yo lo olvidé y me costó un poco de tiempo encontrar el error. Hay que copiar el archivo de la configuración del tema al blog:
$ cd ..
$ cp themes/hugo-tranquilpeak-theme/exampleSite/config.toml .
Ahora es necesario realizar unos pequeños cambios en el archivo de configuración, para decirle a Hugo cual será el título y url de nuestro blog. Igualmente se pueden configurar otros campos como el autor del blog:
baseURL = 'https://construinspector.blog/'
title = 'ConstruInspector blog'
[author]
name = "ConstruInspector"
Creando contenido
Ahora que tenemos nuestro sitio configurado, es hora de ver que tal quedó configurado. Para eso corremos el comando
hugo server -D
el cual nos permitirá actualizar en tiempo real el blog a medida que hacemos cambios. La URL por defecto es http://localhost:1313/, donde podemos ver nuestro blog funcionando:
¡Excelente! ya tenemos nuestro blog funcionando, ahora podemos crear nuestro primer post:
hugo new posts/first-post/index.md
Una vez tengamos creado nuestro nuevo post, es hora de agregar contenido:
content/first-post/index.md
---
title: "First Post"
date: 2022-07-12T18:30:20-05:00
draft: true
---
¡Hola Mundo!
El archivo generado tiene unos metadatos en la parte superior para el título, fecha y si el post es un borrador o no. ¡La página se refrescará automáticamente y se verá el nuevo post!
Configurando Firebase
Ahora viene la parte en la que publicamos nuestro blog usando Firebase. Para eso vamos a crear un nuevo proyecto de Firebase. Ingresa a la consola de firebase, y crea un nuevo proyecto:
Le damos un nombre:
Y termina el asistente de creación de proyecto. Si lo deseas, puedes activar Analytics y una vez termines de crear el proyecto, es hora de configurarlo en tu blog. Ve a la carpeta del proyecto del blog y corre:
$ firebase init
Una vez ejecutes el comando, aparecerá un asistente para configurar el blog con Firebase. Para navegar en este asistente, utiliza las flechas, y la barra espaciadora para seleccionar el ítem.
En el primer paso debes escoger ❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys.
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/path/to/your/blog
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to tog
gle all, <i> to invert selection, and <enter> to proceed)
◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default instance
◯ Firestore: Configure security rules and indexes files for Firestore
◯ Functions: Configure a Cloud Functions directory and its files
❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
◯ Hosting: Set up GitHub Action deploys
◯ Storage: Configure a security rules file for Cloud Storage
◯ Emulators: Set up local emulators for Firebase products
En el segundo paso vamos a escoger la opción ❯ Use an existing project.
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: (Use arrow keys)
❯ Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project
Luego selecciona el proyecto que acabaste de crear:
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: Use an existing project
? Select a default Firebase project for this directory:
construinspector-blog (Construinspector Blog)
Ahora preguntará por la carpeta pública del blog. Hugo por defecto utiliza la carpeta public para los archivos generados, por lo que puedes utilizar el valor por defecto.
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? (public)
Ahora preguntará si deseas configurarlo como una single-page app. Le dirás que no (N)
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
Finalmente preguntará si deseas publicar el blog automáticamente cada vez que lo subas a GitHub. En nuestro caso en particular nuestro sistema de integración continua no está configurado con GitHub, por lo que le diremos que no.
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
✔ Wrote public/404.html
✔ Wrote public/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
i Writing gitignore file to .gitignore...
✔ Firebase initialization complete!
¡Hora de publicar nuestro blog!
Una vez terminado el asistente, ¡ya estamos listos para publicar! Para publicar lo primero que tenemos que hacer es transpilar nuestro blog. Para esto usaremos el comando hugo:
$ hugo
Start building sites …
hugo v0.101.0+extended darwin/amd64 BuildDate=unknown
| EN
-------------------+-----
Pages | 3
Paginator pages | 0
Non-page files | 0
Static files | 0
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Total in 18 ms
Al correr este comando, los archivos generados estarán en la carpeta public, por lo que están listos para subirlos a Firebase, para esto correremos el siguiente comando:
$ firebase deploy
=== Deploying to 'construinspector-blog'...
i deploying hosting
i hosting[construinspector-blog]: beginning deploy...
i hosting[construinspector-blog]: found 6 files in public
✔ hosting[construinspector-blog]: file upload complete
i hosting[construinspector-blog]: finalizing version...
✔ hosting[construinspector-blog]: version finalized
i hosting[construinspector-blog]: releasing new version...
✔ hosting[construinspector-blog]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/construinspector-blog/overview
Hosting URL: https://construinspector-blog.web.app
Ahora puedes visitar https://construinspector-blog.web.app y encontrarás tu blog publicado!
Utiliza tu propio dominio para el blog
¡Houston, tenemos un problema, el sitio no se ve correctamente!
Si recuerdas, habíamos configurado nuestro blog con la URL https://construinspector.blog:
baseURL = 'https://construinspector.blog/'
Si deseas, puedes simplemente utilizar la URL que Firebase nos ofrece, pero en nuestro caso, queremos utilizar nuestro propio dominio, por lo que tenemos que tomar un par de pasos adicionales. Para esto, iremos a la sección de Hosting en la consola de Firebase.
Una vez ahí, clickearemos en Add custom domain y llenaremos el campo con el dominio de tu blog.
En el segundo paso, Firebase te pedirá que valides tu dominio:
Para eso deberás agregar un registro a tu DNS. Hay muchas formas de hacer esto, y todas dependen del proveedor de DNS que necesites. En mi caso utilizo CloudFlare, por lo que lo agregamos en su panel de control:
Una vez hagas esto, deberás agregar otro registro a tu DNS, para terminar de configurar tu dominio con Firebase:
Una vez terminado este paso, ya podrás acceder a la URL de tu blog, y ya estará disponible; ya no es necesario ir a la URL que Firebase nos provee.
Conclusión
¡Generar un blog con Hugo y Firebase es muy sencillo, y lo mejor de todo es que es gratis! Probablemente Hugo no sea para todos, pero si llegaste hasta este punto en el post, es porque probablemente te sientas cómodo realizando estas configuraciones, por lo que Hugo pueda ser una opción para ti. Para nosotros fue una muy buena opción, ya que al nosotros ser una empresa de tecnología, tenemos la experiencia para configurar el blog, y se ajusta a nuestros requerimientos.
Pros
- ¡Es gratis! (si lo usas dentro de los límites de Firebase)
- No hay que manejar ninguna infrastructura para publicar el blog, el equipo se puede enfocar en tareas más importantes.
- Se publica con un solo comando.
- Debido a la forma en que está desarrollado, un blog usando Hugo es muy rápido.
Contras
- No es para todos, requiere una mayor configuración para tener ciertas funcionalidades existentes en otros CMS.
- Requiere conocimiento de Markdown, sin embargo, hay frontends que permiten usar un editor WYSIWYG. Personalmente, prefiero usar Typora para escribir Markdown.
En nuestro próximo post, vamos a ver como podemos hacer nuestro blog bilingüe.
