Minha experiência rodando um blog estático com Hugo

Vocês pediram, eu atendi! Haha.

Lá no meu Instagram, eu sempre recomendo que todo mundo tenha um blog estático. É bonito, leve, não gasta praticamente nada, ajuda no currículo, e de quebra, ajuda a comunidade com seus conteúdos.

Então hoje, vou ir um pouco mais afundo neste assunto de blog estático.

O que é um blog estático?

No wordpress, você precisa de um banco de dados MySQL para armazenar todas as informações do mesmo, além de um servidor web com suporte a linguagem PHP. Isso é bastante coisa para rodar apenas um blog, não acha? Além disso, você terá que pagar a hospedagem, seja de uma VPS que você tem maior controle, seja um wordpress as a service, onde se tem acesso somente a interface do wordpress.

Um blog estático deixa tudo isso de lado e usa apenas arquivos HTML, CSS e JavaScript. Hoje, o meu blog fica hospedado no GitHub (por incrível que pareça). E claro, não pago nada para isso.

Sempre que faço um novo commit no GitHub, ele envia uma notificação para a plataforma de hospedagem que faz o build do blog (geração dos arquivos) e faz o apontamento para o que foi gerado. Muito simples e sem “burocracia”.

Vantagens de usar um blog estático

1. Segurança

A primeira grande vantagem de se utilizar um blog estático é a segurança.

O que causa o maior problema nos sites hoje?

Ter um banco de dados que abre portas para um SQL Injection talvez.

Uma falha grave no servidor web que permite algum tipo de exploit.

Ou até mesmo a versão do wordpress/versão do PHP.

Em um blog estático, todos esses problemas não ocorrem, justamente por eles serem estáticos. São apenas arquivos de front-end, não há nenhuma ligação com algum tipo de back-end. Se essa é uma das suas preocupações, recomendo demais dar uma chance.

2. Migração fácil

Sabe quando você fica irritado com seu provedor de hospedagem? Aí você pensa, vou migrar esse wordpress daqui! E você tem duas opções:

1. Migrar no braço (só se tiver acesso à VPS). E aquela trabalheira de fazer dump de banco, copiar arquivo PHP, reinstalar tudo na outra VPS…

2. Pagar uma nota para um plugin de migração que vai exportar tudo (geralmente quando se usa um wordpress as a service).

Meu blog anterior rodava em wordpress, e foi por esse motivo que comecei a pesquisar alternativas, chegando no blog estático.

Recentemente fiz a migração da plataforma Netlify para o AWS Amplify. E sabe quanto tempo eu demorei para fazer isso? De jogar o blog de um lado para o outro? Em torno de 10 minutos.

Isso acontece porque todo o código de programação do blog fica no GitHub. E o que essas plataformas que citei acima fazem é se conectar no GitHub, baixar o código e fazer o build. Simples assim.

Por isso a migração não tem “dor”. Só tive que esperar meu DNS propagar e em menos de 24h meu blog estava 100% migrado.

3. Desempenho

Não é de ontem que o desempenho de um blog feito em wordpress é ruim. Mesmo utilizando uma CDN, ele não chega nem perto do desempenho de um blog estático.

Pode pegar qualquer blog feito em wordpress, pressionar F12 e abrir o Lighthouse. O desempenho será abaixo de 30% sem sombra de dúvidas. O meu blog era assim, e isso me deixava muito chateado.

Hoje o meu blog bate uma média de 94% nos testes de desempenho. Isso faz com que o usuário não “desista” de ler seu conteúdo porque ele demora para abrir, além de entregar uma experiência muito fluída. Eu adoro um site que tem o desempenho bom. Prefiro isso, do que um site cheio de “frufru” que não te entrega uma experiência boa.

4. Foco no conteúdo

Você deve perceber pelo meu próprio blog que ele não tem muitos efeitos, né?!

Mas ele tem o que é mais importante: Conteúdo de qualidade.

Todo mundo se preocupa em fazer um site bonitinho, mas esquecem que o que atrai e mantém um usuário lendo, é o seu conteúdo.

E eu percebo que removendo esse monte de coisarada do blog, deixa o foco muito mais no contéudo.

5. A cara do Tech!

Eu sempre digo no Instagram que um blog é uma ótima forma de ganhar autoridade sobre determinados assuntos, assim como ter um portfólio para mostrar em possíveis entrevistas.

Imagina que você precisa provar que conhece Terraform? Aí chega o entrevistador no blog do caboclo e se depara com um post: Como criar um cluster EKS com Terraform. Você não acha que isso dá um ar de autoridade?

Pois é, um blog estático vai te ajudar no mercado de trabalho também.

E vamos combinar que um blog assim é a cara do profissional de T.I! :)

Desvantagens de usar um blog estático

A única desvantagem que eu vejo é que é necessário ter conhecimentos em T.I para colocar para rodar. Mesmo não conhecendo programação, nós, por sermos profissionais de T.I, conseguimos facilmente entender os conceitos e ir googlando até fazer tudo funcionar.

Entretanto, um usuário final jamais conseguiria fazer isso rodar. Então sim, o wordpress é realmente melhor nesses casos.

Como criar um blog estático?

Se você for um desenvolvedor, provavelmente já deve saber criar um blog, então meu recado aqui é mais para a galera de infraestrutura que não tem muito conhecimento em programação:

Você não precisa saber desenvolvimento front-end para criar um blog estático.

Eu tenho até nojo de JavaScript e consegui colocar pra rodar, então fica tranquilo!

O framework que eu recomendo utilizar é o Hugo.

A ideia é muito simples. Você escolhe um tema aqui, dá uma ajeitada de leve e manda bala!

E não se preocupe, no começo é meio chatinho mesmo. E depois também rsrs. Até hoje eu não sei mexer muito bem nele, e as minhas fontes são basicamente o Google e Stack Overflow.

Fora isso, recomendo assistir essa playlist para aprender o basicão e saber se virar.

Onde hospedar meu blog estático?

Como eu disse, você não paga a hospedagem, justamente por ser algo extremamente leve e que não consome quase nada.

1. Netlify

Clique aqui e veja a parte de pricing.

No primeiro momento eu hospedei meu blog no Netlify e não tenho do que me queixar. Eles tem tudo integrado e você consegue colocar um projeto pessoal para rodar de forma extremamente simples.

Além disso, você pode apontar o seu DNS para os servidor de nomes do próprio Netlify e gerenciar ali. Outra coisa interessante é que ele já gera o certificado Let’s Encrypt para você de forma totalmente automatizada (com redirect pra HTTPS).

De forma resumida, nunca mais vai editar um nginx.conf ou um httpd.conf para configurar servidor web haha.

2. AWS Amplify

Eu sou bastante fã dos serviços da AWS, e por um tempo eu quis experimentar o serviço AWS Amplify.

Meus planos eram migrar meu domínio, ao qual eu compraria na própria AWS também. Então já pensei, por que não colocar tudo para lá, não é mesmo?!

No AWS Amplify você tem os mesmos serviços oferecidos pelo Netlify, tirando o DNS que é gerenciado pelo Route 53.

O certificado é assinado pela própria CA da AWS.

Então o que eu fiz foi comprar o domínio mateusmuller.me no Route 53 e redirecionar o tráfego para o endpoint do AWS Amplify. Easy!

Onde comprar um domínio para meu blog estático?

Se você quiser comprar um domínio “.com.br”, pode usar o registro.br.

Se quiser algum domínio mais cheio de firula como “.io” ou “.me”, eu recomendaria o Route 53 da AWS. Só lembrando que a cobrança vai ser em dólar, mas não é nada absurdo não. E ainda tendo a certeza de que você não vai pagar hospedagem, não tem desculpas!

Agora se quiser apenas um nome aleatório para fins de teste e tal, recomendo o namecheap.

Como migrar do Wordpress para um blog estático?

Vou te falar… Não é fácil!

Eu passei um final de semana inteirinho para conseguir migrar, e ainda não ficou bem 100%.

Primeiro, veja neste link algumas opções de scritps para auxiliar na migração.

No meu caso, usei o WordPress to Hugo Exporter. O problema é que eu rodava meu blog em uma plataforma de hospedagem aqui do Brasil, sem acesso a VPS. Era somente um wordpress as a service. Pedi para o time de suporte deles rodar o script, mas não quiseram.

Então tive que pagar uma migração para VPS para que eu tivesse acesso a ela. Depois disso, acessei via SSH e fiz todo o processo.

Esse script te entrega tudo praticamente pronto. Ele migra as imagens e mantém os mesmos links, ou seja, você não perde ranqueamento no Google.

O problema é que na conversão de HTML para Markdown (como o Hugo interpreta os posts), algumas coisas ficam mal configuradas, e então você precisa fazer alguns parsings nos arquivos para arrumar a formatação.

No meu caso, montei uma série de scripts em shell para automatizar o processo. Inclusive, compartilhei aqui eles. Dá uma olhada, vai que ajuda né…

Mas depois de formatado é correr pro abraço e nunca mais se estressar!

Como migrar de plataforma com um blog estático?

Vou explicar o processo de como migrei o blog do Netlify para o AWS Amplify.

Passo 1: Migração de plataforma.

Primeiro de tudo eu comprei o domínio mateusmuller.me no Route 53 da AWS. Demora cerca de 24h para propagar 100% o domínio.

Depois, criei um aplicativo no AWS Amplify, apontei para o meu repositório no GitHub onde está o blog e mandei fazer o build. Uma URL de teste foi retornada pra mim e boom! Funcionando.

Depois foi só adicionar um registro do tipo A na Hosted Zone do meu domínio e estava tudo funcionando. Inclusive o certificado SSL.

Ah, outro detalhe: A AWS já manda seu blog pela CDN dela, então o desempenho é toooop!

Passo 2: Migração dos comentários do Disqus.

O problema é que os comentários estavam atrelados ao meu domínio antigo, 4fasters.com.br, e precisava migrar para o domínio novo, mateusmuller.me.

Para isso eu só segui os passos desse blog.

De forma simples você:

1. Exporta os posts e vai receber uma planilha Excel no seu e-mail.

2. Copia tudo que está nessa coluna e cria outra do lado, porém, com o novo domínio. Use um CTRL+F e substitua em massa.

3. Salva, importa lá na ferramenta e corre pro abraço.

Passo 3: Redirecionamento do domínio velho para o domínio novo.

O passo mais “difícil” era criar um redirecionamento do domínio velho para o novo.

E o que eu queria era…

Se a pessoa acessar o artigo “https://4fasters.com.br/posts/como-criar-cluster-eks-com-terraform/" ele redirecione para “https://mateusmuller.me/posts/como-criar-cluster-eks-com-terraform/". Basicamente, extraíndo o domínio da URL e reescrevendo para o novo domínio.

Isso é bem fácil de fazer se você tiver um proxy no meio, e deverá ser feito onde está armazenado o blog antigo! Então tem que dar uma pesquisada.

No meu caso, estava hospedado na Netlify. Aqui tem uma documentação bastante completa sobre este processo.

A jogada é criar um arquivo chamado de _redirects com a regra de redirecionamento, e de forma que ele vá parar na raíz do projeto após o build.

Então no Hugo, eu coloquei o arquivo _redirects dentro do diretório static. Dentro do diretório static eu tenho os diretórios css, img e js. O arquivo estava fora desses diretórios, ou seja, somente dentro do static.

O conteúdo dele é o seguinte:

https://4fasters.com.br/* https://mateusmuller.me/:splat 301!

Ou seja, se qualquer pessoa acessar o endereço 4fasters.com.br/algumacoisa, redirecione para mateusmuller.me/algumacoisa. O :splat é o que faz a mágica acontecer, extraindo aquela parte da URI depois do /, e adicionando no novo domínio.

E o código 301 significa Moved Permanently, justamente para avisar os navegadores que o redirecionamento é fixo, não temporário. Então da próxima vez eles nem chegam no 4fasters.com.br, já mandam direto pro novo domínio.

E aí, curtiu esse conteúdo? Te ajudou de alguma forma? Te agradeço imensamente se puder compartilhar nas suas redes sociais. Obrigado!

Buy me a coffee