GSP747

Visão geral

Neste laboratório, você vai criar um pipeline para implantar sites do Hugo, um criador de sites estáticos. Você vai armazenar o conteúdo do site em um repositório do Git, implantar o site com o Firebase e usar o Cloud Build para criar um pipeline e implantar automaticamente o novo conteúdo confirmado no repositório.

Objetivos

Neste laboratório, você vai realizar o seguinte:

• Ler a visão geral de um site estático.
• Criar um site no Hugo.
• Armazenar o conteúdo do site em um repositório do Git.
• Implantar o site com o Firebase.
• Criar um pipeline com o Cloud Build para automatizar a implantação.

Pré-requisitos

Pode ser útil ter experiência prática com os serviços que serão usados. Confira outros laboratórios úteis:

• Usar o Cloud Run para criar um aplicativo sem servidor que gera arquivos PDF
• Firebase Web

Benefícios dos sites estáticos

Os criadores de sites estáticos, como o Hugo, ficaram famosos por produzirem sites que não precisam de servidores da web. Com plataformas estáticas da web, não é necessário manter sistemas operacionais do servidor nem softwares. No entanto, vários pontos devem ser considerados. Por exemplo, você pode controlar as versões dos posts, hospedar o site em uma rede de fornecimento de conteúdo (CDN) e provisionar um certificado SSL.

Para isso, use um pipeline de integração e implantação contínuas no Google Cloud. Com um pipeline de implantação, os desenvolvedores podem inovar com a automação de todo esse processo. Neste laboratório, você vai aprender a criar um pipeline que demonstra essa automação.

Configuração e requisitos

Antes de clicar no botão Começar o Laboratório

Leia estas instruções. Os laboratórios são cronometrados e não podem ser pausados. O timer é ativado quando você clica em Iniciar laboratório e mostra por quanto tempo os recursos do Google Cloud vão ficar disponíveis.

Este laboratório prático permite que você realize as atividades em um ambiente real de nuvem, e não em uma simulação ou demonstração. Você vai receber novas credenciais temporárias para fazer login e acessar o Google Cloud durante o laboratório.

Confira os requisitos para concluir o laboratório:

• Acesso a um navegador de Internet padrão (recomendamos o Chrome).

Observação: para executar este laboratório, use o modo de navegação anônima (recomendado) ou uma janela anônima do navegador. Isso evita conflitos entre sua conta pessoal e de estudante, o que poderia causar cobranças extras na sua conta pessoal.

• Tempo para concluir o laboratório: não se esqueça que, depois de começar, não será possível pausar o laboratório.

Observação: use apenas a conta de estudante neste laboratório. Se usar outra conta do Google Cloud, você poderá receber cobranças nela.

Como iniciar seu laboratório e fazer login no console do Google Cloud

1. Clique no botão Começar laboratório. Se for preciso pagar por ele, uma caixa de diálogo vai aparecer para você selecionar a forma de pagamento. À direita, você encontra o painel Configuração e acesso ao laboratório com as seguintes informações:

   • O botão Abrir console do Google Cloud
   • As credenciais temporárias (nome de usuário e senha) que você vai usar no laboratório
   • Outros dados, se necessários

   O timer do laboratório fica na parte de cima da página e mostra o tempo restante.

2. Se você estiver usando o navegador Chrome, clique em Abrir console do Google Cloud ou clique com o botão direito do mouse e selecione Abrir link em uma janela anônima.

   O laboratório ativa os recursos e depois abre a página "Login" em outra guia.

   Dica: coloque as guias em janelas separadas lado a lado.

   Observação: se aparecer a caixa de diálogo Escolher uma conta, clique em Usar outra conta.

3. Se necessário, copie o Nome de usuário abaixo e cole na caixa de diálogo Login.

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

   Você também encontra o nome de usuário no painel Configuração e acesso ao laboratório.

4. Clique em Avançar.

5. Copie a Senha abaixo e cole na caixa de diálogo Olá!.

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

   Você também encontra a senha no painel Configuração e acesso ao laboratório.

6. Clique em Avançar.

   Importante: você precisa usar as credenciais fornecidas no laboratório, e não as da sua conta do Google Cloud. Observação: se você usar sua própria conta do Google Cloud neste laboratório, talvez receba cobranças adicionais.

7. Acesse as próximas páginas:

   • Aceite os Termos e Condições.
   • Não adicione opções de recuperação nem autenticação de dois fatores (porque essa é uma conta temporária).
   • Não se inscreva em testes sem custo financeiro.

Depois de alguns instantes, o console do Google Cloud será aberto nesta guia.

Observação: para acessar os produtos e serviços do Google Cloud, clique no Menu de navegação ou digite o nome do serviço ou produto no campo Pesquisar.

Visão geral do processo

Você vai criar o diagrama abaixo:

O objetivo é fazer commit do código e que isso acione o pipeline que vai implantar o site. Sua jornada tem duas etapas. Primeiro você vai criar o site no local e implantá-lo manualmente no Firebase. Depois vai criar um pipeline com o Cloud Build para automatizar o processo.

Tarefa 1: implantação manual

Crie o site manualmente em uma instância do Linux para entender o processo. Você também vai usar essa instância ao realizar algumas das tarefas únicas que são necessárias para o Firebase funcionar.

Conectar-se à instância do Linux

1. No Menu de navegação (), selecione Compute Engine > Instâncias de VM. Uma instância será criada para você.

No fim da linha, há um endereço IP externo e um botão SSH, como mostra a figura abaixo. Se um painel de informações estiver ocultando o IP e o botão, feche o painel para ver a linha inteira.

2. Guarde o endereço IP externo para usá-lo mais tarde.
3. Clique em SSH. Uma janela será aberta, e um comando de shell vai aparecer.

Instalar o Hugo

Instale o Hugo na instância do Linux para testar o site no local antes de implantá-lo com o Firebase. Este laboratório oferece um script de shell para facilitar a instalação.

1. No shell da instância do Linux, analise o arquivo installhugo.sh:

cat /tmp/installhugo.sh

O resultado será parecido com o exemplo abaixo:

Saída:

_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.

O comando wget será usado para baixar o Hugo e o comando tar, para descompactar o arquivo do Hugo. Você vai ver comandos semelhantes mais adiante neste laboratório quando criar o pipeline.

2. Digite os comandos abaixo para executar o script e instalar o Hugo:

cd ~ /tmp/installhugo.sh

Quando concluído, a mensagem que confirma a instalação do Hugo no diretório /tmp é exibida, conforme mostrado abaixo.

Você já pode criar a infraestrutura do site.

Crie um repositório e o site inicial

Clone o repositório Git pré-criado na instância do Linux.

A clonagem cria um espelho do repositório no shell. Dessa forma, você implementa o site enquanto ele está no shell e, depois, só precisa fazer commit das alterações no sistema de arquivos. Mais adiante neste laboratório, você vai configurar um pipeline que responde a esses commits no repositório.

1. Instale o git na VM do Linux e defina o ID do projeto, o número e a região. Salve esses detalhes como as variáveis PROJECT_ID, PROJECT_NUMBER e REGION.

Digite os comandos abaixo no shell da instância do 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. Execute os seguintes comandos para configurar o 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. Insira os comandos a seguir para clonar o repositório pré-criado do servidor Gitea local:

cd ~ git clone http://giteaadmin:GiteaPassword123@localhost:3000/giteaadmin/my_hugo_site.git Observação: o aviso de saída warning: You appear to have cloned an empty repository. é esperado porque o repositório foi inicializado recentemente e ainda não contém commits.

Clique em Verificar meu progresso para conferir o objetivo. Criam um repositório Git

Agora você já pode criar a estrutura do site.

6. Insira os comandos abaixo no shell do Linux:

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

O comando hugo cria o diretório. A opção --force cria o site no diretório do repositório, que já existe. Isso permite manter as informações relacionadas ao Git no diretório que você acabou de clonar.

Quando terminar, você vai receber mensagens confirmando que o site foi criado.

7. Agora instale o tema hello-friend-ng para adicionar um layout ao site. Digite os comandos abaixo no shell da instância do 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

Quando terminar, você vai receber mensagens confirmando a clonagem do tema.

8. Remova os arquivos git do diretório themes:

sudo rm -r themes/hello-friend-ng/.git sudo rm themes/hello-friend-ng/.gitignore Observação: os arquivos git precisam ser removidos para que o repositório Git adicione os arquivos de tema ao controle de versões.

9. Você poderá visualizar o site quando a estrutura dele estiver pronta. Digite o comando abaixo para iniciar o site na porta TCP 8080:

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

O Hugo cria o site e disponibiliza o acesso a ele na porta TCP 8080. O servidor só é interrompido quando você pressiona CTRL+C.

10. Abra uma guia do navegador e acesse o endereço IP externo na porta 8080. Use o URL abaixo, substituindo [EXTERNAL IP] pelo endereço IP externo da instância hugo-dev-vm.

O endereço IP externo está no console do Google Cloud em Compute Engine > Instâncias de VM, na coluna IP externo. Como alternativa, execute o seguinte comando no terminal para recuperá-lo:

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

Acesse:

http://[EXTERNAL IP]:8080

O site deve ser semelhante ao seguinte:

Clique em Verificar meu progresso para conferir o objetivo. Lançar o site na porta TCP 8080

11. Volte para o shell do Linux e pressione CTRL+C para interromper o servidor do Hugo.

Implantar o site no Firebase

1. Instale a CLI do Firebase no shell da instância do Linux:

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

2. Agora você precisa inicializar o Firebase. Digite o comando abaixo no shell:

cd ~/my_hugo_site firebase init

3. Selecione Hospedagem: Configure implantações para aplicativos web estáticos usando as teclas de seta e a barra de espaço e pressione "ENTER".

• Quando for solicitada uma opção de projeto, escolha Usar um projeto atual e pressione as teclas de seta, a barra de espaço e a tecla "ENTER" para selecionar o ID do projeto .

• Para o diretório público, selecione o valor padrão público.

• Para configurar como um aplicativo de página única, digite N e pressione ENTER.

• Para configurar builds e implantações automáticas com o GitHub/Git externo, digite N e pressione ENTER.

• Para instalar as habilidades do agente para o Firebase, selecione N.

Se houver solicitação para substituir arquivos, selecione "Y".

4. Você já pode implantar o aplicativo. Digite os comandos abaixo no shell da instância do Linux para recriar o site com o Hugo e implantá-lo com o Firebase:

/tmp/hugo && firebase deploy

5. Após a implantação do aplicativo, você vai receber um URL de hospedagem. Clique no URL para exibir o mesmo site disponibilizado pela CDN (rede de fornecimento de conteúdo) do Firebase.

Se você receber uma mensagem genérica de "boas-vindas", aguarde alguns minutos até que a CDN seja inicializada e atualize a janela do navegador. Salve o URL de hospedagem para usar depois.

Você fez a implantação localmente. Agora automatize todo o processo usando o Cloud Build.

Tarefa 2: automatizar a implantação

Verificar variáveis de ambiente

Antes de continuar, verifique se as variáveis de ambiente da sessão ainda estão definidas. Se você reiniciou a sessão do terminal ou perdeu a conexão, execute os comandos a seguir no shell da instância do Linux para redefini-los:

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])")

Configurar o build

O Cloud Build usa um arquivo chamado cloudbuild.yaml no diretório raiz do repositório para criar o build. Ele está no formato YAML. Como o espaçamento e o recuo são importantes, eles já foram colocados na instância do Linux para você.

1. No shell do Linux, digite o seguinte comando. Observe o ponto (".") ao final do comando cp:

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

2. Execute o comando a seguir para exibir o arquivo cloudbuild.yaml.

cat cloudbuild.yaml

Algumas linhas do resultado foram quebradas por causa do comprimento.

Saída:

# 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. Confira a seguir algumas observações sobre o arquivo cloudbuild.yaml:

• O arquivo tem quatro etapas nomeadas, e cada etapa é executada por uma imagem do contêiner. A primeira etapa usa o git para clonar o código-fonte do site do repositório do Gitea. As duas próximas usam um builder compatível com o Google para baixar as ferramentas Hugo e Firebase com curl.
• A quarta etapa usa um contêiner padrão do Ubuntu para instalar o Hugo e o Firebase. Depois disso, o site é criado e implantado. Se você instalar o Hugo e o Firebase para cada implantação, vai poder mudar a versão do Hugo quando quiser e usar a versão mais recente do Firebase.
• Os comandos tar e wget são quase idênticos aos que você usou antes no script installhugo.sh.
• O arquivo também usa variáveis de substituição personalizadas (_HUGO_VERSION e _GIT_SERVER_IP) e uma variável de substituição fornecida pelo Google (PROJECT_ID) para permitir o uso desse modelo em diferentes ambientes.
• Os binários do Hugo e do Firebase são criados e instalados em um diretório temporário para evitar que sejam implantados por engano no próprio site.

Fazer o commit inicial

O objetivo da criação do pipeline é acionar builds quando alterações forem feitas no repositório. Faça um commit inicial no repositório para validar que você vai poder fazer alterações depois.

1. No shell do Linux, digite os comandos abaixo para criar um arquivo .gitignore e excluir certos diretórios do repositório:

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

2. Faça o commit inicial no repositório:

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

Você fez o commit (upload) da versão inicial do site para o Google Cloud.

Observação: execute o comando git branch para verificar se a ramificação está correta. Se o resultado for master, renomeie para main usando este comando: git branch -m master main.

Criar o gatilho de webhook do Cloud Build

Agora você vai criar um gatilho de webhook do Cloud Build que responde a envios de código do repositório Git do Gitea.

1. Crie um gatilho de webhook do Cloud Build usando o secret pré-provisionado do Secret Manager:

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

Clique em Verificar meu progresso para conferir o objetivo. Criar o gatilho do Cloud Build

A conta de serviço do Cloud Build

A conta de serviço do Cloud Build precisa ter permissões para usar o Firebase na implantação do site.

Cloud Build	Papel	Descrição
[PROJECT_NUMBER]@cloudbuild.gserviceaccount.com	roles/firebasehosting.admin	Acesso total de leitura/gravação aos recursos do Hosting

Testar o pipeline

Agora que o pipeline foi criado, edite o site e faça o commit para verificar se a alteração é propagada.

1. No shell do Linux, digite o comando abaixo para acessar o diretório do repositório:

cd ~/my_hugo_site

2. Edite o arquivo config.toml e mude o título.

Use o editor de texto nano para abrir e editar o arquivo:

nano config.toml

Localize a linha que contém title e altere-a para:

title = "Blogging with Hugo and Cloud Build"

Pressione CTRL+O, ENTER para salvar e CTRL+X para sair do editor "nano".

Como alternativa, execute o comando sed a seguir no shell para atualizar o título automaticamente:

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

3. Insira os comandos abaixo para fazer commit das mudanças no repositório e acionar o pipeline do Cloud Build:

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

4. Verifique o histórico do build para saber o status:

gcloud builds list --region=$REGION

5. Verifique os logs do build atual:

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

6. Colete o URL do build realizado:

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

7. Navegue até o URL de hospedagem para acessar os resultados.

Também é possível acessar o console do Firebase e analisar o projeto para encontrar o nome de domínio.

Observação: a CDN pode demorar alguns muitos para atualizar e mostrar as informações do site atualizado. Observação: o site tem um certificado SSL e é acessado pelo Protocolo de Transferência de Hipertexto Seguro (HTTPS).

Clique em Verificar meu progresso para conferir o objetivo. Testar o pipeline

Parabéns.

Você aprendeu a criar um pipeline no Cloud Build para implantar sites produzidos no Hugo usando o Firebase, que oferece uma CDN e um certificado SSL. Com o Cloud Build, é possível adaptar o processo às suas demandas. Como a implantação é feita em menos tempo, você inova rapidamente e testa as revisões do site com facilidade. Consulte a documentação do Cloud Build e do Firebase para saber mais.

Treinamento e certificação do Google Cloud

Esses treinamentos ajudam você a aproveitar as tecnologias do Google Cloud ao máximo. Nossas aulas incluem habilidades técnicas e práticas recomendadas para ajudar você a alcançar rapidamente o nível esperado e continuar sua jornada de aprendizado. Oferecemos treinamentos que vão do nível básico ao avançado, com opções de aulas virtuais, sob demanda e por meio de transmissões ao vivo para que você possa encaixá-las na correria do seu dia a dia. As certificações validam sua experiência e comprovam suas habilidades com as tecnologias do Google Cloud.

Manual atualizado em 18 de junho de 2026

Laboratório testado em 18 de junho de 2026

Copyright 2026 Google LLC. Todos os direitos reservados. Google e o logotipo do Google são marcas registradas da Google LLC. Todos os outros nomes de produtos e empresas podem ser marcas registradas das respectivas empresas a que estão associados.