Implantar site Hugo no AWS S3

O Hugo é um gerador de sites estáticos.

Conteúdo da página

Quando o site é gerado com o Hugo, é hora de implantá-lo em alguma plataforma de hospedagem. Aqui está um tutorial sobre como fazer o push para o AWS S3 e servir com a CDN AWS CloudFront.

Site estático do Hugo implantado na AWS

Este guia faz parte do cluster Infraestrutura Web — publicação estática, CDN, indexação e serviços de domínio.

Para um fluxo de trabalho de implantação completo baseado em CLI, consulte Implantar Site Hugo no AWS S3 com AWS CLI.

Preparar o site

Não será descrito aqui como criar um projeto de site Hugo ou adicionar artigos ou posts de blog lá. Assumimos que você já fez isso.

Se não, aqui está uma inicialização rápida do Hugo

Opções de Implantação

Existem várias opções disponíveis para implantar e hospedar um site gerado pelo Hugo (https://gohugo.io/hosting-and-deployment/). Pessoalmente, gosto de:

Para alternativas como Netlify, consulte Netlify para Hugo e sites estáticos: preços, nível gratuito e alternativas.

Abaixo, descrevo exatamente isto - o último método.

1. Criar bucket S3 com permissões relaxadas

Acesse: https://console.aws.amazon.com/s3

  1. Crie um bucket com um nome como o do site, por exemplo: “microsoft.com”

  2. Clique no bucket => propriedades, mais abaixo => hospedagem de site estático seção de hospedagem de site estático

  3. Clique em editar, depois - ativar, e “hospedar um site estático”

editando hospedagem de site estático

  1. também coloque lá em index: index.html e em error: 404.html
  2. Clique em salvar, lembre-se do “endpoint do site do bucket”, ficará assim: http://microsoft.com.s3-website-ap-southeast-2.amazonaws.com
  3. Acesse as permissões do bucket, veja as imagens abaixo. O acesso público não deve ser bloqueado.

Bloquear acesso público - desativado 1

Bloquear acesso público - desativado 2

  1. Política do bucket (substitua microsoft.com pelo seu nome de domínio):
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::microsoft.com/*"
        }
    ]
}

2. Criar Certificado

Acesse o gerenciador de certificados da AWS https://console.aws.amazon.com/acm Escolha a região correta.

  1. Clique em solicitar
  2. certificado público
  3. nomes de domínio: escolha dois como: “microsoft.com” e “www.microsoft.com”
  4. você pode pedir mais subdomínios como “blog.microsoft.com”, “xmpp.microsoft.com” etc.
  5. faça a validação DNS. É muito mais fácil fazer/pushar isso via console Route53 se o seu registrador for a AWS.

3. Implantar função Lambda no Lambda@Edge

A função Lambda@Edge irá reescrever as URLs do projeto Hugo QuickStart para diretórios para um objeto padrão, index.html. É assim que o Cloudfront serve a URI ‘/posts/my-post/’ com o conteúdo ‘/posts/my-post/index.html’ retornando 200 em vez de 404.

Código Lambda@Edge Flavor Cafe (Scotch)

// Hugo no Cloudfront, função Lambda@Edge 
// Flavor Cafe (Scotch)
// @starpebble no github
//
// Duas regras de reescrita para uri's de subdiretórios do hugo.
// Exemplo:
//   1. reescrever uri /posts/ para /posts/index.html
//   2. reescrever uri /posts para /posts/index.html
//
// Adicione tantas extensões de arquivo quanto desejar para a regra 2.
// uri's que terminam em extensões de arquivo conhecidas não são reescritas pela regra 2.

'use strict';

// @starpebble no github
// hugo flavor cafe (scotch)

const DEFAULT_OBJECT = 'index.html';

exports.handler = (event, context, callback) => {
  const cfrequest = event.Records[0].cf.request;
  if (cfrequest.uri.length > 0 && cfrequest.uri.charAt(cfrequest.uri.length - 1) === '/') {
    // e.g. /posts/ para /posts/index.html
    cfrequest.uri += DEFAULT_OBJECT;
  }
  else if (!cfrequest.uri.match(/.(css|md|gif|ico|jpg|jpeg|js|png|txt|svg|woff|ttf|map|json|html)$/)) {
    // e.g. /posts para /posts/index.html
    cfrequest.uri += `/${DEFAULT_OBJECT}`;
  }
  callback(null, cfrequest);
  return true;
};

4. Criar CDN AWS CloudFront

Isso não funcionará com a nova interface da AWS Console, você precisará usar o comando de linha de comando aws cli - consulte Criar AWS CloudFront no modelo Pay-as-You-Go (não o Plano Gratuito)

Acesse https://console.aws.amazon.com/cloudfront

  1. Criar Distribuição
  2. criar origem apontando para seu bucket s3

Criar Origem

  1. Certificado para seu site
  2. quando oferecer converter para site estático - concorde
  3. criar comportamento apontando para sua origem, e Redirecionar Http para Https

Editar Comportamento

  1. abaixo em comportamentos/associações de funções - em Solicitação de Origem - selecione sua Função Lambda

Função Lambda

  1. Salvar
  2. Acesse a aba Geral da sua distribuição e copie o nome de domínio da sua Distribuição. Deveria parecer com: asdfasdfasdf.cloudfront.net

Exemplo de nome de domínio da distribuição

5. Apontar DNS AWS Route53 para seu CloudFront

Acesse https://console.aws.amazon.com/route53/v2/hostedzones

  1. crie ou clique na zona hospedada do seu site. Deve ser chamada como seu site: por exemplo: “microsoft.com”
  2. crie um registro “A” vazio apontando para sua distribuição CloudFront (nome de domínio da Distribuição)
  3. crie um registro “A” “www” apontando como alias para seu primeiro registro “A”

6. Instalar aws cli

  1. Instale as ferramentas de linha de comando do cliente aws https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
  2. configure a conexão aws cli
    1. verifique o arquivo ~/.aws/credentials, deve ter algo como
[default]
aws_access_key_id = .......
aws_secret_access_key = .......
  1. teste a conexão, digite algo como abaixo para ver seu bucket s3
aws s3 ls

7. Atualize seu config.toml

  1. abra seu hugo.toml ou config.toml em seu projeto hugo
  2. adicione ao final (substitua novamente microsoft.com pelo seu):
[[deployment.targets]]
# Um nome arbitrário para este alvo.
name = "lfs3"

# S3; veja https://gocloud.dev/howto/blob/#s3
# Para endpoints compatíveis com S3, veja https://gocloud.dev/howto/blob/#s3-compatible
URL = "s3://microsoft.com?region=ap-southeast-2"

# Se você estiver usando uma CDN CloudFront, o deploy invalidará o cache conforme necessário.
cloudFrontDistributionID = 	""

Se você mantiver seus configs em config.yml, deve ficar assim

deployment:
  targets:
    name: "lfs3"
    URL: "s3://microsoft.com?region=ap-southeast-2"
    cloudFrontDistributionID:	"E123123123"
  1. salve este arquivo
  2. compile seu site
hugo
  1. implante com o comando hugo deploy
hugo deploy
  1. abra a URL do seu site no navegador para ver se tudo funcionou

Para mais tópicos de infraestrutura web, consulte o pilar de infraestrutura web.

Espero que este pequeno documento de tutorial ajude você. Tenha um ótimo dia!

Assinar

Receba novos artigos sobre sistemas, infraestrutura e engenharia de IA.