Hospedar um site do Hugo framework é algo bem fácil rápido e por ser um site estático existem diversos provedores onde você consegue hospeda-lo de forma gratuita.
Nesse artigo vou mostrar como hospedar no Firebase que é uma plataforma da Google e ainda vou mostrar como fazer o CI/CD usando o Git Actions do Github.
Pré-requisitos:
-
Site em Hugo
Caso não tenha o site em Hugo, nesse tutorial ensino como criar
https://tiagoscosta.com.br/posts/hugo-framework-criando-o-primeiro-site/
Ou você pode clonar esse repositório, com o submódulo, pois é ele que uso nesse tutorial
git clone https://github.com/tiagotsc/hugo-first-site.git --recurse-submodules -
Conta no Github (É gratuito)
Esse serviço que é muito popular para armazenar e compartilhar códigos que servirá de ponte para hospedarmos nosso site no Firebase através de CI/CD.
Caso não tenha conta, segue o link do serviço para criar a sua
-
Conta no Firebase (É gratuito)
Esse PaaS (plataforma como serviço) é bem interessante e com recursos bem legais.
Caso não tenha conta, segue o link do serviço para criar a sua
-
NodeJS
Vou usar a versão 18.
Caso não tenha instalado, segue o link para baixar e instalar
-
Firebase Cli
Faremos uso do Firebase via linha de comando para realizar a configuração do nosso site.
Caso não tenha, instale com o comando abaixo:
npm install -g firebase-tools
Criando projeto no Firebase Link para o cabeçalho
Primeiro vamos criar um projeto no Firebase e para isso siga os passos.
Lá no canto superior direito clique em Go to console e na próxima tela clique em Criar um projeto.
Ensira um nome para o projeto, vou colocar como FirstSite, depois clique em Continuar.
Próxima tela, desative a opção Ativar o Google Analytics neste projeto e clique em Criar projeto.
Aguarde alguns instantes até seu projeto ser criado, depois clique em Continuar.
Configurando o Firebase no site Hugo Link para o cabeçalho
No terminal na raiz do site, execute:
# No meu caso faço uso do fnm para versionar o NodeJs, então preciso rodar
# Talvez na sua máquina não precise desse comando
fnm env --use-on-cd | Out-String | Invoke-Expression
# Se não estiver logado no Firebase, logue e permita acessar sua conta Google
firebase login
# Instala servidor DecapCMS para rodar localmente
firebase init
Coloque as mesmas respostas conforme figura abaixo, se atente as respostas em azul.
Configurando no Github Link para o cabeçalho
Crie um repositório no Github, vou definir com o nome de hugo-first-site-firebase.
Agora atribua e envie o site para o repositório criado no Github com os comandos abaixo:
# Transforma o diretório em um repositório git
git init
# Adiciona todos os arquivos
git add .
# Comita os arquivos
git commit -m "first commit"
# Cria a branch main localmente
git branch -M main
# Adiciona o repositório remoto
git remote add origin https://github.com/tiagotsc/hugo-first-site-firebase.git
# Envia para o repositório remoto
git push -u origin main
O Github vai precisar de um FIREBASE_TOKEN para que seja possível realizar o deploy no Firebase.
No terminal, na raiz do seu site, execute:
# Irá solicitar a geração de token
firebase login:ci
Será solicitado confirmação de autenticação e permissão, após confirmar tudo seu token será gerado.
Agora vá no seu repositório Github, vá em Settings > Secrets and variables > Actions.
Depois clique em New repository secret.
No campo Name * defina:
- FIREBASE_TOKEN
No campo Secret * defina o token que obteve anteriormente conforme figura abaixo:
Depois clique em Add secret.
Ainda no repositório do Github, no menu do topo, clique em Actions, pesquise por manual e clique em Configure.
Coloque o conteúdo abaixo e clique em Commit changes..., depois confirme novamente para concretizar.
name: Deploy-To-Firebase
on:
push:
branches:
- main # Set a branch to deploy
pull_request:
jobs:
deploy:
runs-on: ubuntu-22.04
steps:
- uses: actions/checkout@v4
with:
submodules: true # Fetch Hugo themes (true OR recursive)
fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
- name: Setup Hugo
uses: peaceiris/actions-hugo@v3
with:
hugo-version: '0.135.0'
extended: true
- name: Build
run: hugo
- name: Deploy
uses: w9jds/firebase-action@master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
Lá no menu superior, clique em Actions, aguarde alguns instantes e se aparecer um check verde, é sinal que seu deploy ocorreu com sucesso.
Agora lá no Firebase, no projeto que criou, vá no menu esquerdo Criação > Hosting e depois clique em um das URL fornecida pelo Firebase.
Tudo ok, você verá o site no ar.
Agora você já pode criar suas páginas, postagens, envie elas para o Github, o Git Actions vai automaticamente reconhecer as novas alterações e vai disponibilizar tudo no Firebase hosting🙂!
Em breve abordarei mais recursos sobre o assunto.
Comandos úteis
# COMANDOS HUGO
# Compila o site, o resultado fica diponível na pasta public
hugo
# Sobe o site localmente sem exibir postagens de rascunhos (padrão do Hugo)
hugo server
# Sobe o site localmente exibindo postagens de rascunhos
hugo server -D
# Sobe o site localmente deixando-o acesssível de qualquer dispositivo na rede
# Bom para acessar de outra máquina ou visualizar no celular
hugo server --bind 0.0.0.0 --baseURL http://0.0.0.0 --port 1313 -D
Ou
hugo server --bind=0.0.0.0 --baseURL=http://0.0.0.0:1313 -D
# Cria uma nova postagem
hugo new content content/posts/my-first-post.md
# Listar comandos
hugo -h
# Mais detalhes dos comandos na documentação oficial
https://gohugo.io/commands
Links úteis
Git Actions com Hugo
https://github.com/peaceiris/actions-hugo
Documentação oficial do Hugo