GitHub Pages SEO: Crie seu blog com Hugo

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.

Git - Working with Remotes

Working with 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: