Após testar geradores de páginas estáticas para SEO (leia aqui minha avaliação de Hugo para SEO), segue o passo a passo para você criar seu blog pessoal utilizando o Github Pages e Hugo.
O melhor de tudo: todas as ferramentas utilizadas são inteiramente gratuitas e SEO-friendly :)
Para fazer esse tutorial, eu documentei a minha experiência usando um MacBook (caso você utilize Windows, ChromeOS, Linux ou outro sistema operacional, pode ser que você tenha que buscar por alternativas de plataformas).
Veja abaixo os requisitos e o passo a passo.
Requisitos:
Para seguir esse tutorial, são necessárias algumas ferramentas e pacotes, conforme lista abaixo:
- Acesso a um editor de código (eu utilizo o VS CODE);
- Uma conta pessoal no GitHub;
- Um sistema de versionamento de código Git e acesso a sua conta no GitHub autenticado pelo terminal;
- Gerenciador de pacotes Homebrew instalado na sua máquina;
- Um tema de blog do Hugo que agrade você. Eu vou utilizar o Tania mas você pode escolher o que quiser na lista de temas disponíveis no site do Hugo.
Passo a passo:
Abaixo, o passo a passo para criar e rodar o seu blog localmente na sua máquina:
1. Com os requisitos completos, e tema escolhido, é possível instalar HUGO na sua máquina apenas rodando uma linha de código no terminal:
brew install hugo
2. Depois de instalar hugo, é só gerar os arquivos do site localmente (mais tarde vamos enviar os arquivos para o GitHub). Digite essa frase no seu terminal:
hugo new site <nome-da-pasta-do-site>
# <> será o nome da pasta em que ficarão os arquivos do seu site; você pode substiuir pelo nome que quiser. Exemplo: hugo new site quickstart
3. Agora vamos abrir o diretório do site para instalar o tema escolhido:
cd <nome-da-pasta-do-site> #substituir pelo nome que você usou
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke #substituir pelo link do tema escolhido
4. Abra o diretório do site no seu VS Code e inclua o tema escolhido no arquivo config.toml
5. Com os ajustes realizados você pode iniciar o servidor Hugo do seu terminal:
hugo server -D
O servidor fica disponível para acesso local na sua máquina no link http://localhost:1313/ e todas as mudanças feitas no VS Code podem ser vistas diretamente do seu navegador.
6. Gerar páginas estáticas: para gerar uma pasta public com os arquivos do site a serem publicados é só acessar o terminal e digitar:
hugo -D
Esse último passo é super importante, pois esse comando que gerará os arquivos estáticos que deverão ser hospedados no GitHub Pages.
O seu site estático ficará disponível em uma pasta public junto com o código do seu site. Se você quiser, pode disponibilizar apenas a pasta public no GitHub (onde será configurado o GitHub Pages) e manter todo o código localmente.
Publicação do seu código e site no GitHub Pages
Para compartilhar o seu código e blog com o resto do mundo será necessário trabalhar com repositórios remotos também conhecidos na língua inglesa como remotes.

2. Dentro da sua conta do GitHub, crie dois repositórios: um para publicar o código do seu blog e outro específico para o diretório ou pasta public, onde estão os arquivos estáticos gerados pelo código e que devem ser refletidos no GitHub Pages. No meu caso, eu fiz assim:
- Código foi enviado para o repo oolong;
- Os arquivos estáticos gerados foram enviados para o repo borogodós.
Há outras formas de fazer essa publicação (há integrações com Hugo dentro do GitHub), mas eu preferi seguir este método.
Abaixo estão os links dos repositórios e o arquivo config.toml (é muito importante declarar o domínio do seu GitHub page em baseURL para que o site funcione adequadamente com links absolutos; mas há a opção de usar links relativos também na documentação do Hugo):
Repositório Oolong #Código: https://github.com/carolinescholles/oolong
Repositório Borogodós #Blog no GitHub Pages: https://github.com/carolinescholles/borogodos
Site final no GitHub Pages (lembrando que o nome do repositório vira o diretório e precisa estar declarado no arquivo config.toml): https://carolinescholles.github.io/borogodos/
Arquivo config.toml:
baseURL = "https://carolinescholles.github.io/borogodos/"
languageCode = "pt-br"
title = "Moda Circular"
theme = "hugo-tania"
Para enviar os arquivos locais da sua máquina para o GitHub, você precisa ter o seu terminal com a autenticação certinha. Abaixo, o passo a passo com os comandos para você publicar seus arquivos no GitHub:
cd "diretório do seu código"
git init
git add . # Para enviar todos os arquivos
git commit -m "initial commit" # Salva as mudanças de código ou conteúdo dentro do repositório; por ser a primeira versão a mensagem padrão é initial commit (não há um ajuste específico).
Para adicionar um repositório remoto ao diretório da sua aplicação é só seguir o passo a passo abaixo:
git remote add origin https://...
git remote show origin # Comando para verificar se você está no repo correto
git push -u origin master # Envia os arquivos para a branch master
No repositório da pasta public você deve configurar o GitHub Pages (como eu fiz no repo borogodós). Demora cerca de 2 minutos para o seu site estático ir ao ar.
Conclusão
Eu quis documentar o processo de publicar um site utilizando o GitHub Pages pois esse método é completamente gratuito e fácil para quem está iniciando no desenvolvimento web.
Pode ser uma alternativa para quem quer montar um portfólio ou simplesmente experimentar algumas plataformas de desenvolvimento. O Hugo foi recomendado por Googlers no Twitter e ele, de fato, tem suporte para gestão de conteúdo, localização, além de ser super leve e portanto, uma opção sustentável para os servidores e para o seu bolso.
Conteúdos Relacionados:



