GSP747

Descripción general

En este lab, crearás una canalización para implementar sitios web basados en Hugo, un creador de sitios web estático. Almacenarás el contenido del sitio web en un repositorio de Git, implementarás el sitio web con Firebase y, luego, usarás Cloud Build para crear una canalización y, así, implementar automáticamente contenido nuevo que se confirme en el repositorio.

Objetivos

En este lab, realizarás las siguientes tareas:

• Leer una descripción general de los sitios web estáticos
• Configurar un sitio web con Hugo
• Almacenar el contenido del sitio web en un repositorio de Git
• Implementar el sitio web con Firebase
• Crear una canalización de compilación con Cloud Build para automatizar la implementación

Requisitos previos

Puede resultarte útil tener experiencia práctica en los servicios que utilizarás. Estos son otros labs que podrían ser de utilidad:

• Cómo usar Cloud Run para compilar una aplicación sin servidores que crea archivos PDF
• Firebase Web

Los beneficios de los sitios web estáticos

Los creadores de sitios estáticos, como Hugo, se volvieron populares debido a su capacidad de producir sitios web que no requieren servidores web. Con las plataformas web estáticas, no hay sistemas operativos ni software del servidor que mantener. Sin embargo, existen varias consideraciones operativas. Por ejemplo, quizá debas controlar la versión de tus publicaciones, alojar tu sitio web en una red de distribución de contenidos ("CDN") y aprovisionar un certificado SSL.

Puedes abordar estas necesidades con una canalización de integración continua/implementación continua en Google Cloud. Una canalización de implementación permite a los desarrolladores innovar rápidamente mediante la automatización de todo el proceso de implementación. En este lab, aprenderás a crear una canalización que demuestre esa automatización.

Configuración y requisitos

Antes de hacer clic en el botón Comenzar lab

Lee estas instrucciones. Los labs cuentan con un temporizador que no se puede pausar. El temporizador, que comienza a funcionar cuando haces clic en Comenzar lab, indica por cuánto tiempo tendrás a tu disposición los recursos de Google Cloud.

Este lab práctico te permitirá realizar las actividades correspondientes en un entorno de nube real, no en uno de simulación o demostración. Para ello, se te proporcionan credenciales temporales nuevas que utilizarás para acceder a Google Cloud durante todo el lab.

Para completar este lab, necesitarás lo siguiente:

• Acceso a un navegador de Internet estándar. Se recomienda el navegador Chrome.

Nota: Usa una ventana del navegador privada o de incógnito (opción recomendada) para ejecutar el lab. Así evitarás conflictos entre tu cuenta personal y la cuenta de estudiante, lo que podría generar cargos adicionales en tu cuenta personal.

• Tiempo para completar el lab (recuerda que, una vez que comienzas un lab, no puedes pausarlo).

Nota: Usa solo la cuenta de estudiante para este lab. Si usas otra cuenta de Google Cloud, es posible que se apliquen cargos a esa cuenta.

Cómo iniciar tu lab y acceder a la consola de Google Cloud

1. Haz clic en el botón Comenzar lab. Si debes pagar por el lab, se abrirá un diálogo para que selecciones la forma de pago. A la derecha, se encuentra el panel Configuración del lab y acceso, que tiene los siguientes elementos:

   • El botón Abrir la consola de Google Cloud
   • Las credenciales temporales (nombre de usuario y contraseña) que debes usar para este lab
   • Otra información para completar el lab (si es necesaria)

   Ten en cuenta que el cronómetro del lab se encuentra cerca de la parte superior de la página y muestra el tiempo restante.

2. Haz clic en Abrir la consola de Google Cloud (o haz clic con el botón derecho y selecciona Abrir el vínculo en una ventana de incógnito si ejecutas el navegador Chrome).

   El lab inicia los recursos y abre otra pestaña, en la que se muestra la página de acceso.

   Sugerencia: Ordena las pestañas en ventanas separadas, una junto a la otra.

   Nota: Si ves el diálogo Elegir una cuenta, haz clic en Usa otra cuenta.

3. De ser necesario, copia el nombre de usuario a continuación y pégalo en el diálogo Acceder.

   {{{user_0.username | "Username"}}}

   También puedes encontrar el nombre de usuario en el panel Configuración del lab y acceso.

4. Haz clic en Siguiente.

5. Copia la contraseña que aparece a continuación y pégala en el diálogo Te damos la bienvenida.

   {{{user_0.password | "Password"}}}

   También puedes encontrar la contraseña en el panel Configuración del lab y acceso.

6. Haz clic en Siguiente.

   Importante: Debes usar las credenciales que te proporciona el lab. No uses las credenciales de tu cuenta de Google Cloud. Nota: Usar tu propia cuenta de Google Cloud para este lab podría generar cargos adicionales.

7. Haz clic para avanzar por las páginas siguientes:

   • Acepta los Términos y Condiciones.
   • No agregues opciones de recuperación ni autenticación de dos factores, ya que esta cuenta es temporal.
   • No te registres para obtener pruebas gratuitas.

Después de un momento, se abrirá la consola de Google Cloud en esta pestaña.

Nota: Para acceder a los productos y servicios de Google Cloud, haz clic en el menú de navegación o escribe el nombre del servicio o producto en el campo Buscar.

Descripción general del proceso

Este es un diagrama de lo que crearás:

El objetivo es poder confirmar el código y hacer que active la canalización, que, a su vez, implementa el sitio web. Tu recorrido se divide en dos partes. Primero, crearás el sitio web de forma local y lo implementarás en Firebase de forma manual. Luego, automatizarás el proceso creando una canalización con Cloud Build.

Tarea 1: Implementación manual

Primero, crearás el sitio web de forma manual en una instancia de Linux para conocer el proceso íntegramente. También usarás la instancia de Linux para realizar algunas de las tareas que son necesarias por única vez para poner en marcha Firebase.

Conéctate a la instancia de Linux

1. En el menú de navegación (), selecciona Compute Engine > Instancias de VM. Observa la instancia que se creó para ti.

Al final de la línea, deberías ver una dirección IP externa y un botón SSH, como se muestra en la siguiente figura. Si el panel de información impide que los veas, ciérralo para visualizar la línea completa.

2. Registra la dirección IP externa para usarla más adelante.
3. Haz clic en SSH. Se abrirá una ventana y verás un prompt en la shell.

Instala Hugo

Ahora, instala Hugo en la instancia de Linux para probar el sitio web de forma local antes de implementarlo con Firebase. En este lab, se proporciona una secuencia de comandos de shell para facilitar la tarea.

1. En la shell de la instancia de Linux, examina el archivo installhugo.sh:

cat /tmp/installhugo.sh

El resultado debería ser similar al resultado de muestra que se incluye a continuación:

Resultado:

_HUGO_VERSION=0.96.0 curl -L https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz | tar -xz -C /tmp/ # echo The Hugo binary is now at /tmp/hugo.

Observa que se usó el comando curl para descargar Hugo y el comando tar para descomprimir el archivo de Hugo. Verás comandos similares más adelante en este lab, cuando crees la canalización.

2. Ingresa los siguientes comandos para ejecutar la secuencia de comandos que instalará Hugo:

cd ~ /tmp/installhugo.sh

Cuando se complete, recibirás un mensaje que dice que Hugo se instaló en el directorio /tmp, como se muestra a continuación.

Ya puedes crear la infraestructura del sitio web.

Crea un repositorio y el sitio web inicial

Clona el repositorio de Git creado previamente en la instancia de Linux.

La clonación de un repositorio crea una replicación de este en la shell. Eso te permite implementar el sitio web mientras permanece en la shell y, luego, confirmar los cambios en el sistema de archivos. Más adelante en este lab, configurarás una canalización que responda a esas confirmaciones en el repositorio.

1. Instala git en la VM de Linux y configura el ID del proyecto, el número de proyecto y la región. Guárdalos como variables PROJECT_ID, PROJECT_NUMBER y REGION:

Ingresa los siguientes comandos en la shell de la instancia de Linux:

export PROJECT_ID=$(gcloud config get-value project) export PROJECT_NUMBER=$(gcloud projects describe $PROJECT_ID --format="value(projectNumber)") export REGION=$(gcloud compute project-info describe \ --format="value(commonInstanceMetadata.items[google-compute-default-region])") sudo apt-get update sudo apt-get install -y git

2. Ejecuta los siguientes comandos para configurar Git:

git config --global init.defaultBranch main git config --global user.name "student" git config --global user.email "{{{user_0.username | "filled in at lab start"}}}"

3. Ingresa los siguientes comandos para clonar el repositorio creado previamente desde el servidor local de Gitea:

cd ~ git clone http://giteaadmin:GiteaPassword123@localhost:3000/giteaadmin/my_hugo_site.git Nota: Se espera el resultado de la advertencia warning: You appear to have cloned an empty repository. porque el repositorio se inicializó recientemente y aún no contiene confirmaciones.

Haz clic en Revisar mi progreso para verificar el objetivo. Crear un repositorio de Git

Ya puedes crear la estructura del sitio.

6. Ingresa los siguientes comandos en la shell de Linux.

cd ~ /tmp/hugo new site my_hugo_site --force

Por lo general, el comando hugo crea el directorio. La opción --force creará el sitio en el directorio del repositorio, que ya existe. Eso te permite mantener la información relacionada con Git en el directorio que acabas de clonar.

Cuando se complete, verás mensajes que indican que se creó el sitio.

7. Ahora, instala el tema hello-friend-ng para proporcionar un diseño para tu sitio. Ingresa los siguientes comandos en la shell de la instancia de Linux:

cd ~/my_hugo_site git clone \ https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng echo 'theme = "hello-friend-ng"' >> config.toml

Cuando se complete, verás mensajes que indican que el tema se clonó.

8. Quita los archivos de Git del directorio de temas:

sudo rm -r themes/hello-friend-ng/.git sudo rm themes/hello-friend-ng/.gitignore Nota: Se deben quitar los archivos de Git para que el repositorio de Git agregue los archivos de tema al control de versiones.

9. Con la estructura del sitio web configurada, puedes obtener una vista previa. Ingresa el siguiente comando para iniciar el sitio en el puerto TCP 8080:

cd ~/my_hugo_site /tmp/hugo server -D --bind 0.0.0.0 --port 8080

Hugo compila el sitio y lo entrega para su acceso en el puerto TCP 8080. El servidor se ejecutará hasta que lo detengas presionando Ctrl+C.

10. Abre una pestaña del navegador y busca la dirección IP externa en el puerto 8080. Usa la siguiente URL y reemplaza [EXTERNAL IP] por la dirección IP externa de tu instancia hugo-dev-vm.

Puedes encontrar la dirección IP externa en la consola de Google Cloud en Compute Engine > Instancias de VM en la columna IP externa. Como alternativa, ejecuta el siguiente comando en la terminal para recuperarla:

curl -s -H "Metadata-Flavor: Google" http://metadata.google.internal/computeMetadata/v1/instance/network-interfaces/0/access-configs/0/external-ip

Navega a:

http://[EXTERNAL IP]:8080

El sitio web debería verse así.

Haz clic en Revisar mi progreso para verificar el objetivo. Iniciar el sitio en el puerto TCP 8080

11. Regresa a la shell de Linux y presiona Ctrl+C para detener el servidor de Hugo.

Implementa el sitio en Firebase

1. Instala Firebase CLI en la shell de la instancia de Linux:

curl -sL https://firebase.tools | bash

2. Es el momento de inicializar Firebase. Ingresa el siguiente comando en la shell:

cd ~/my_hugo_site firebase init

3. Selecciona Hosting: Set up deployments for static web apps con las teclas de flecha y la barra espaciadora, y presiona INTRO.

• Cuando se te solicite una opción de proyecto, selecciona Use an existing project; luego, usa las teclas de flecha, la barra espaciadora y la tecla Intro para seleccionar el ID del proyecto, .

• Para el directorio público, selecciona el valor predeterminado public.

• Para realizar la configuración como una aplicación de una página, escribe N y presiona INTRO.

• Para configurar implementaciones y compilaciones automáticas con GitHub o un Git externo, escribe N, y presiona INTRO.

• Para instalar habilidades de agentes para Firebase, selecciona N.

Si se te solicita autorizar que se reemplacen archivos existentes, selecciona Y.

4. Ya puedes implementar la aplicación. Ingresa los siguientes comandos en la shell de la instancia de Linux para volver a crear el sitio con Hugo y, luego, implementarlo con Firebase:

/tmp/hugo && firebase deploy

5. Una vez que se haya implementado la aplicación, recibirás una URL de hosting. Haz clic en ella para ver el mismo sitio web que se entrega desde la CDN (red de distribución de contenidos) de Firebase.

Si recibes un mensaje de bienvenida genérico, espera unos minutos hasta que se inicialice la CDN y actualiza la ventana del navegador. Guarda la URL de hosting para usarla más adelante.

Ya realizaste la implementación completa de forma local. A continuación, automatiza el proceso de extremo a extremo con Cloud Build.

Tarea 2: Automatiza la implementación

Verifica las variables de entorno

Antes de continuar, verifica que las variables de entorno de tu sesión aún estén definidas. Si reiniciaste tu sesión de terminal o te desconectaste, ejecuta los siguientes comandos en la shell de la instancia de Linux para redefinirlos:

export PROJECT_ID=$(gcloud config get-value project) export PROJECT_NUMBER=$(gcloud projects describe $PROJECT_ID --format="value(projectNumber)") export REGION=$(gcloud compute project-info describe \ --format="value(commonInstanceMetadata.items[google-compute-default-region])")

Configura la compilación

Cloud Build usa un archivo denominado cloudbuild.yaml en el directorio raíz del repositorio para realizar la compilación. El archivo está en formato YAML. Los espacios y las sangrías son importantes, por lo que ya se colocaron en la instancia de Linux para ti.

1. En la shell de Linux, ingresa el siguiente comando. Observa el punto final (".") al final del comando cp:

cd ~/my_hugo_site cp /tmp/cloudbuild.yaml .

2. Ejecuta el siguiente comando para ver cómo es el archivo cloudbuild.yaml.

cat cloudbuild.yaml

Algunas de las líneas del resultado se unieron debido a su longitud.

Resultado:

# Copyright 2020 Google Inc. All rights reserved. # # Licensed under the Apache License, Version 2.0 (the "License"); # you may not use this file except in compliance with the License. # You may obtain a copy of the License at # # http://www.apache.org/licenses/LICENSE-2.0 # # Unless required by applicable law or agreed to in writing, software # distributed under the License is distributed on an "AS IS" BASIS, # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. # See the License for the specific language governing permissions and # limitations under the License. steps: - name: 'gcr.io/cloud-builders/git' args: ['clone', 'http://giteaadmin:GiteaPassword123@${_GIT_SERVER_IP}:3000/giteaadmin/my_hugo_site.git', '.'] - name: 'gcr.io/cloud-builders/curl' args: - '-L' - 'https://firebase.tools/bin/linux/latest' - '-o' - '/workspace/firebase' - name: 'gcr.io/cloud-builders/curl' args: - '-L' - 'https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz' - '-o' - '/workspace/hugo.tar.gz' waitFor: ['-'] - name: 'ubuntu:20.04' args: - 'bash' - '-c' - | tar -xvf /workspace/hugo.tar.gz chmod 755 /workspace/firebase /workspace/hugo /workspace/firebase deploy --project ${PROJECT_ID} --non-interactive --only hosting -m "Build ${BUILD_ID}" substitutions: _HUGO_VERSION: 0.96.0 _GIT_SERVER_IP: '' options: defaultLogsBucketBehavior: REGIONAL_USER_OWNED_BUCKET

3. Estas son algunas observaciones sobre el archivo cloudbuild.yaml:

• Hay cuatro pasos con nombre en este archivo, y cada uno de ellos se realiza con una imagen de contenedor. En el primer paso, se usa Git para clonar el código fuente del sitio desde el repositorio de Gitea. Los dos pasos siguientes utilizan un compilador compatible con Google para usar curl y, así, descargar las herramientas de Hugo y Firebase.
• El cuarto paso usa un contenedor de Ubuntu estándar para instalar Hugo y Firebase. Después de eso, se compila y se implementa el sitio. Instalar Hugo y Firebase para cada implementación te permite cambiar la versión de Hugo cuando lo desees y, al mismo tiempo, usar la última versión de Firebase.
• Los comandos tar y wget son casi idénticos a los que se usaron anteriormente en la secuencia de comandos installhugo.sh.
• El archivo también usa variables de sustitución personalizadas (_HUGO_VERSION y _GIT_SERVER_IP) y una variable de sustitución proporcionada por Google (PROJECT_ID) para permitir el uso de esta plantilla en diferentes entornos.
• Los objetos binarios de Hugo y Firebase se crean y se instalan en un directorio temporal para evitar que se implementen de forma involuntaria en el sitio web.

Realiza la confirmación inicial

El objetivo de crear la canalización es poder activar compilaciones cuando se realicen cambios en el repositorio. Comenzarás con la confirmación inicial en el repositorio para validar tu capacidad de realizar cambios futuros.

1. En la shell de Linux, ingresa los comandos que se indican a continuación para crear un archivo .gitignore y excluir ciertos directorios del repositorio:

cd ~/my_hugo_site echo "resources" >> .gitignore

2. Realiza la confirmación inicial del repositorio:

git add . git commit -m "Add app to Git Repository" git push -u origin main

Ya confirmaste (subiste) la versión inicial del sitio web en Google Cloud.

Nota: Asegúrate de que tu rama sea correcta ejecutando el comando git branch . Si dice master , cambia el nombre a main con este comando: git branch -m master main .

Crea el activador de webhook de Cloud Build

Ahora, crearás un activador de webhook de Cloud Build que responda a los envíos de código del repositorio de Git de Gitea.

1. Crea un activador de webhook de Cloud Build con el secreto de Secret Manager aprovisionado previamente:

gcloud builds triggers create webhook --name="commit-to-main-branch1" \ --inline-config="cloudbuild.yaml" \ --secret="projects/$PROJECT_ID/secrets/webhook-secret/versions/1" \ --service-account="projects/$PROJECT_ID/serviceAccounts/$(gcloud projects describe $PROJECT_ID --format='value(projectNumber)')-compute@developer.gserviceaccount.com" \ --substitutions=_GIT_SERVER_IP=$(curl -s -H "Metadata-Flavor: Google" http://metadata.google.internal/computeMetadata/v1/instance/network-interfaces/0/access-configs/0/external-ip) \ --region=$REGION

Haz clic en Revisar mi progreso para verificar el objetivo. Crear el activador de Cloud Build

La cuenta de servicio de Cloud Build

La cuenta de servicio de Cloud Build debe tener permisos para usar Firebase si se quiere implementar el sitio web.

Cloud Build	Rol	Descripción
[PROJECT_NUMBER]@cloudbuild.gserviceaccount.com	roles/firebasehosting.admin	Acceso completo de lectura/escritura a los recursos de Hosting

Prueba la canalización

Una vez creada la canalización, puedes hacer un cambio en el sitio y, a continuación, confirmarlo para ver si se propaga.

1. En la shell de Linux, ingresa el comando que se muestra a continuación para desplazarte al directorio del repositorio:

cd ~/my_hugo_site

2. Edita el archivo config.toml y cambia el título.

Puedes usar el editor de texto nano para abrir y editar el archivo:

nano config.toml

Ubica la línea que contiene title y cámbiala por lo siguiente:

title = "Blogging with Hugo and Cloud Build"

Presiona CTRL+O, INTRO para guardar y CTRL+X para salir del editor nano.

Como alternativa, puedes ejecutar el siguiente comando sed en la shell para actualizar automáticamente el título:

sed -i 's/title =.*/title = "Blogging with Hugo and Cloud Build"/g' config.toml

3. Ingresa los siguientes comandos para confirmar los cambios en el repositorio y activar la canalización de Cloud Build:

git add . git commit -m "I updated the site title" git push -u origin main

4. Consulta el historial de compilación para ver el estado de la compilación:

gcloud builds list --region=$REGION

5. Consulta los registros de compilación de la compilación actual:

gcloud builds log --region=$REGION $(gcloud builds list --region=$REGION --limit=1 --format='value(id)')

6. Extrae la URL de la compilación realizada:

gcloud builds log --region=$REGION $(gcloud builds list --region=$REGION --limit=1 --format='value(id)') | grep "Hosting URL"

7. Navega a la URL de hosting para ver los resultados.

También puedes ir a Firebase console y examinar el proyecto para encontrar el nombre del dominio.

Nota: La CDN puede tardar unos minutos en actualizarse y mostrar la información actualizada del sitio. Nota: El sitio tiene un certificado SSL al que se accede a través del protocolo HTTPS (protocolo de transferencia de hipertexto seguro).

Haz clic en Revisar mi progreso para verificar el objetivo. Probar la canalización

¡Felicitaciones!

Ya aprendiste cómo Cloud Build puede organizar una canalización para implementar rápidamente sitios web de Hugo en Firebase, que proporciona una CDN y un certificado SSL. Cloud Build te permite adaptar el proceso a tus necesidades. Los tiempos de implementación cortos te permiten innovar rápidamente y probar las revisiones de tu sitio web de manera sencilla. Consulta la documentación de Cloud Build y Firebase para obtener más información.

Capacitación y certificación de Google Cloud

Recibe la formación que necesitas para aprovechar al máximo las tecnologías de Google Cloud. Nuestras clases incluyen habilidades técnicas y recomendaciones para ayudarte a avanzar rápidamente y a seguir aprendiendo. Para que puedas realizar nuestros cursos cuando más te convenga, ofrecemos distintos tipos de capacitación de nivel básico a avanzado: a pedido, presenciales y virtuales. Las certificaciones te ayudan a validar y demostrar tus habilidades y tu conocimiento técnico respecto a las tecnologías de Google Cloud.

Última actualización del manual: 18 de junio de 2026

Prueba más reciente del lab: 18 de junio de 2026

Copyright 2026 Google LLC. All rights reserved. Google y el logotipo de Google son marcas de Google LLC. Los demás nombres de productos y empresas pueden ser marcas de las respectivas empresas a las que estén asociados.