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 na Netlify que é um plataforma com bastantes recursos legais para você hospedar, gerenciar, fazer deploys usando CI/CD e muito mais, e tudo já incluso na versão gratuita.
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 Netlify
Caso não tenha conta, segue o link do serviço para criar a sua
-
Conta no Netlify (É gratuito)
Esse PaaS (plataforma como serviço) é muito amigável e intuitivo, com diversas ferramentas muito úteis, é onde nosso site ficará hospedado
Caso não tenha conta, segue o link do serviço para criar a sua
Enviando site para o Github Link para o cabeçalho
Estando logado no Github, primeiro precisamos criar um repositório.
No seu Github vá em repositories > new.
Dê um nome para o repositório no campo Repository name * e clique em Create repository
No meu caso criei com o nome de first-site
Na tela que aparece, o que é importante para nós é o que está no bloco campo …or create a new repository on the command line
Vamos usar os comandos que você visualizou com alguns adicionais para subir todo o nosso site.
Observação: Se estiver usando o Windows, use o Git bash para não ter problema de enconding no seu site.
Execute o comando abaixo substituindo na parte do git remote, na parte de URL pelo seu usuário e seu repositório.
echo "# first-site" >> README.md
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/SEU-USUARIO/SEU-REPOSITORIO.git
git push -u origin main
Agora volte na tela do Github e dê um refresh, tudo ocorrendo bem, você já vai ver seu código disponível lá.
Hospedando no Netlify Link para o cabeçalho
Precisamos configura a hospedagem do nosso site.
Estando logado, na tela principal, clique no link Add new site depois em Import an existing project
Na tela que aparece, clique na opção Github
Depois clique na opção lá embaixo Configure the Netlify app on GitHub.
Para que possamos dar permissão de acesso do Netlify ao nosso repositório criado no Github.
Na janela que aparece, rola a tela até o bloco Repository access
Selecione a opção Only select repositories, depois pesquise pelo seu repositório criado no Github e selecione, no meu caso foi o first-site, depois clique em Save
Agora o repositório deve aparecer na tela do Netlify, clique nele.
Na tela que aparece, vá para o bloco Build settings e configure:
Veja se o campo Branch to deploy está selecionado main, pois é ela que será sempre usada no processo.
Campo Build command, defina hugo, pois é esse comando que compila nosso site.
Campo publish directory, defina public, pois o site final é armazenado nesse diretório.
No próximo campo precisaremos da versão exata do Hugo Framework, lá no terminal na pasta raiz do seu site, execute:
hugo version
No meu caso a minha versão é a 0.135.0
Clique no botão Add environment variables e defina a key como HUGO_VERSION e valor coloque o que obteve anteriormente.
Sua tela deve ficar bem parecida com essa.
Agora clique no botão de Deploy "nome-seu-site" no fim da tela.
Esse processo demora alguns segundos, o Netlify inicia o processo de deploy (passagem para produção) do seu site.
Tudo ocorrendo bem, você deve ver a seguinte tela.
Veja que o Netlify gerou uma url para o nosso site e fez um registro de log de todo o processo de passagem do site para o ambiente deles.
No meu caso a URL gerada foi https://spontaneous-figolla-d5e343.netlify.app/, mas para você deve ser outra.
Agora você já pode acessar seu site!
E já pode acompanhar os logs de alteração deploy do seu site também.
Agora você já pode criar suas páginas, postagens, envie elas para o Github, o Netlify vai puxar automaticamente e vai disponibilizar cada alteração que você criar🙂!
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
Documentação da Netlify sobre deploy do Hugo
https://docs.netlify.com/frameworks/hugo
Documentação do Hugo sobre deploy no Netlify
https://gohugo.io/hosting-and-deployment/hosting-on-netlify
Documentação oficial do Hugo