Hugo + Cloudflare + AWS S3


Depois de muito tempo vendo como fazer e abandonando projetos pela metade, finalmente resolvi fazer um site estático para a empresa que tenho registrado para prestar serviços ao exterior. A maior motivação é de atrair mais clientes para atividades em tempo parcial, e também fazer um portfólio mais "profissional" pro que já fiz até agora em cursos e experimentos.

A idéia de manter um website estático ao invés de algo em Wordpress ou similares é basicamente o custo. Já é mais barato servir arquivos ao invés de manter um servidor próprio, mas quando utilizamos uma CDN ( Content Delivery Network ) como o CloudFlare que possui a funcionalidade de cache e é grátis, os custos realmente ficam muito reduzidos.

Hugo

Existem diversos geradores de sites estáticos disponíveis, como o Jekyll em RoR e o Ghost+Gatsby em JS , mas queria aproveitar a oportunidade pra ter o primeiro contato com Go. Depois de um pouco de pesquisa, achei o Hugo como melhor opção. 

Depois de instalados Go e Hugo, o processo de criação é bem simples: você escolhe o tema que mais te agrada na lista de temas disponíveis e inicializa um novo projeto. Primeiramente, vamos ter certeza que o Hugo está instalado corretamente rodando o comando:

  hugo version
 
Depois, vamos criar um novo projeto. Vale lembrar que o nome do projeto deve ser o mesmo nome da pasta do projeto que você baixou do Github. 

  hugo new site project
 
Finalmente, importamos o tema. No meu caso, escolhi o tema Hero, que já possui umas instruções de como instalar.

  cd project
  git clone https://github.com/zerostaticthemes/hugo-hero-theme.git themes/hugo-hero-theme
 
Agora executamos o comando de gerar as páginas estáticas, e em seguida subimos uma versão local do servidor para ver como ficou.
  hugo
  hugo server
 
Se tudo deu certo, você conseguiu acessar seu site localmente no endereço localhost:1313 . Além disso, o conteúdo estático gerado está na pasta public.

Caso você queira salvar o tema no seu Git, é necessário deletar a pasta .git do diretório themes/hugo-hero-theme , caso contrário você perderá qualquer modificação que fizer no tema.

Agora começa o trabalho de verdade: reestruturar o tema e adicionar seu conteúdo próprio. No meu caso, removi algumas sessões e substitui alguns ícones. Precisei alterar todos os links para twitter e linkedin, email, telefone de contato, etc.

Particularmente eu recomendo usar o VSCode para fazer as alterações.

Conteúdo DRM Free

Se o site que você está fazendo á para sua empresa, a última coisa que você quer é ser surpreendido com uma cobrança por direitos autorais de alguma imagem, vídeo ou áudio, ou no pior dos casos uma notificação judicial. Então qualquer conteúdo que você for utilizar para alterar as imagens deve ser livre de direitos autorais ( DRM Free ). Listei alguns locais que você pode usar para imagens de fundo e ícones.

Imagens: Unsplash    Pexels    Pixabay
Icones: Flaticon   

Bucket no S3 e configuração do AWS CLI

Um detalhe MUITO IMPORTANTE é que se você possui um domínio próprio (como no meu caso, weblogiko.com), o nome do seu bucket deve ser exatamente o endereço que será utilizado no browser. Então, no meu caso, como eu quero que a URL www.weblogiko.com aponte para o bucket, o nome do meu bucket é www.weblogiko.com.
Vamos configurar um bucket no S3 para agir como servidor de conteúdo estático. Primeiramente, criamos o bucket, e configuramos o acesso para "público": 


Além disso, vamos usar a funcionalidade do S3 de ser o host de um site estático:


Guarde o endereço em que seu site está disponível para usar na configuração do Cloudflare, logo mais.
Finalmente, vale a pena verificar as permissões do seu bucket para ter certeza que o acesso público está totalmente liberado:


A melhor maneira de fazer o gerenciamento do conteúdo estático na minha opinião é usando o CLI da AWS para limpar o bucket da versão anterior e fazer o upload do novo conteúdo estático, quando houverem mudanças. Pra isso, é preciso baixar e instalar o CLI na sua máquina.

Se tudo deu certo, você será capaz de rodar o comando aws --version para checar sua versão:



Depois você precisa criar uma conta de acesso programático console em IAM -> User -> Add User, e selecionando Programmatic access :


Salve essas credenciais pois você vai precisar delas (e elas só ficam disponíveis quando são criadas, se você perder é necessário gerar outras e apagar essas). Agora, basta rodar o comando de configuração da AWS pra incluir essas chaves no AWS CLI:


E por fim, eu preparei um script que roda em bash para apagar o conteúdo de um bucket e substituir pelo conteúdo novo que você gerou. Como criei uma pasta chamada "scripts" no projeto, e acabo rodando o script .sh de dentro desta pasta, o código acabou ficando assim (você precisa substituir o NOME_DO_BUCKET pelo seu bucket):
#!/bin/bash
cwd=$PWD
end=${#cwd}-7
publicDir=${cwd:0:end}public
bucketName=NOME_DO_BUCKET
aws s3 rm $bucketName --recursive
aws s3 cp $publicDir $bucketName --recursive

Configurando CloudFlare

Caso você não possua um domínio, é possível conseguir um grátis por 12 meses para algumas extensões específicas. Quais os principais benefícios de usar CloudFlare com um domínio? 
  • O famoso "cadeado" do https que indica um site seguro incluso gratuitamente, sem precisar comprar um certificado digital.
  • Redução de custos: estamos usando sempre conteúdo estático, e a CDN guarda cópias "gratuitamente" (eu acho que os limites para que você seja obrigado a mudar para uma versão paga são muito altos), o que diminui o acesso aos arquivos na AWS.
  • Proteção contra DDoS: como a rede da CloudFlare fornece o conteúdo pelo cache, ela também se responsabiliza por repelir ataques ao seu site de alto volume direcionado.
Basicamente, você vai precisar configurar o DNS, e adicionar uma entrada do tipo CNAME apontando para o endereço do bucket que você configurou anteriormente.

Incluindo a tag do Google Analytics

No caso do tema que escolhi, o id pode ser facilmente configurado no arquivo config.toml , mas dependendo de qual tema você escolheu, pode ser necessário alterar alguns arquivos.

Não esqueça de criar sua conta no Analytics e incluir sua tag pra poder monitorar o tráfego no seu site com informações de país, páginas visitadas, etc.

Conclusão

Espero que você tenha conseguido chegar até o final. Criar o conteúdo e fazer os ajustes de logo e ícones não é uma atividade muito rápida, e provavelmente vai tomar mais de um dia de trabalho.
Porém, você possui agora um site estático, que vai custar alguns reais por mês para manter, e relativamente fácil de modificar.

Depios de alguns meses de uso, o site estático tem me custado aproximadamente 10 centavos de dólar (sim, uma fortuna).

Se você ficou curioso pra ver o resultado do site que eu fiz, ele está disponível em https://www.weblogiko.com .

Comentários

Top 3 em 1 ano: