Como Configurar seu Site Pessoal com CloudFront, S3 e GitHub Actions

2025-07-10

Ter um site pessoal online de forma rápida, segura e econômica é mais fácil do que você imagina, e a combinação de Amazon S3, Amazon CloudFront e GitHub Actions é a receita ideal para isso. Vamos detalhar cada passo para você ter seu projeto no ar.

1. Preparando o seu Bucket S3 para Hospedagem Estática

O Amazon S3 (Simple Storage Service) será a casa dos arquivos do seu site – HTML, CSS, JavaScript, imagens e tudo mais que for estático.

Crie seu Bucket S3: No console da AWS, vá em S3 e clique em "Criar bucket". Dê um nome ao seu bucket que corresponda exatamente ao seu domínio (ex: meusitepessoal.com.br ou www.meusitepessoal.com.br). Escolha uma região da AWS que esteja geograficamente próxima aos seus usuários para menor latência.
Desabilite o Bloqueio de Acesso Público: Por padrão, o S3 restringe o acesso. Para um site estático, você precisa permitir que ele seja visível. Vá em "Permissões" do seu bucket, clique em "Editar" em "Bloquear Acesso Público (Configurações do bucket)" e desmarque todas as opções. Confirme a alteração.
Habilite a Hospedagem de Site Estático: Nas "Propriedades" do bucket, role até "Hospedagem de site estático" e clique em "Editar". Selecione "Habilitar" e defina seu documento de índice (normalmente index.html) e, se tiver, um documento de erro (ex: 404.html). Salve as mudanças.
Defina uma Política de Bucket: Para que os usuários possam acessar seu site, adicione uma política de bucket. Em "Permissões", vá em "Política do bucket", clique em "Editar" e insira o JSON abaixo, substituindo seu-nome-do-bucket pelo nome real do seu bucket:

json { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": [ "s3:GetObject" ], "Resource": [ "arn:aws:s3:::seu-nome-do-bucket/*" ] } ] }

Salve a política.

2. Otimizando com CloudFront para Performance e Segurança

O CloudFront é uma CDN (Content Delivery Network) que distribui seu conteúdo globalmente, garantindo que seu site carregue rapidamente para qualquer pessoa no mundo e adicione uma camada extra de segurança.

Crie uma Distribuição CloudFront: No console da AWS, navegue até CloudFront e clique em "Criar distribuição".
Selecione o S3 como Origem: Em "Domínio de origem", selecione o bucket S3 que você acabou de criar. O CloudFront preencherá automaticamente os campos de origem.
Configurações de Cache:
- Para a "Política de cache", "CachingOptimized" geralmente funciona bem.
- Em "Métodos HTTP permitidos", selecione GET, HEAD, OPTIONS.
Otimizações (Recomendado):
- Redirecionar HTTP para HTTPS: Em "Visualizador", escolha "Redirecionar HTTP para HTTPS" para criptografar todo o tráfego.
- Certificado SSL/TLS: Se estiver usando um domínio personalizado, solicite um certificado gratuito via AWS Certificate Manager (ACM) para seu domínio e selecione-o aqui.
- Nomes de domínio alternativos (CNAMEs): Adicione seus domínios personalizados (ex: meusitepessoal.com.br, www.meusitepessoal.com.br).
Crie a Distribuição: Clique em "Criar distribuição". O processo pode levar alguns minutos. Assim que o status mudar para "Implantado", você terá o nome de domínio do CloudFront (ex: d123abc456def.cloudfront.net).

3. Conectando seu Domínio Personalizado (DNS)

Para que seu domínio aponte para o CloudFront, você precisa criar um registro CNAME ou Alias no seu provedor de DNS (ex: Route 53, GoDaddy, Cloudflare).

Se usar AWS Route 53: Crie um registro A com tipo de roteamento "Alias" e aponte para sua distribuição CloudFront.
Para outros provedores de DNS: Crie um registro CNAME para o seu subdomínio (ex: www) e aponte-o para o nome de domínio do CloudFront (ex: d123abc456def.cloudfront.net). Se quiser usar o domínio raiz (ex: meusitepessoal.com.br), consulte seu provedor; alguns permitem CNAME na raiz ou você pode precisar de um redirecionamento.

4. Automatizando o Deploy com GitHub Actions

O GitHub Actions vai automatizar o processo de publicação do seu site toda vez que você enviar uma atualização para o seu repositório no GitHub.

Crie um Repositório no GitHub: Se ainda não tem, crie um novo repositório para o código do seu site.
Configure as Credenciais AWS no GitHub Secrets:
- No seu repositório GitHub, vá em "Settings" > "Secrets and variables" > "Actions".
- Clique em "New repository secret" e adicione dois segredos:
  - AWS_ACCESS_KEY_ID: Sua chave de acesso da AWS.
  - AWS_SECRET_ACCESS_KEY: Sua chave secreta da AWS.
- Importante: Para segurança, crie um usuário IAM com permissões mínimas (apenas upload para S3 e invalidação do CloudFront) para estas credenciais, em vez de usar suas credenciais de usuário root.
Crie um Workflow GitHub Actions: Na raiz do seu repositório, crie uma pasta .github/workflows/ e dentro dela, um arquivo deploy.yml (ou nome de sua preferência). Cole o seguinte código, ajustando os valores:

```yaml name: Deploy Website to S3 and CloudFront

on: push: branches: - main # Ou o nome da sua branch principal

jobs: deploy: runs-on: ubuntu-latest
```
steps:
- name: Checkout code
  uses: actions/checkout@v4

- name: Configure AWS credentials
  uses: aws-actions/configure-aws-credentials@v4
  with:
    aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
    aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
    aws-region: us-east-1 # Substitua pela sua região da AWS

- name: Sync S3 bucket
  run: |
    aws s3 sync . s3://seu-nome-do-bucket --delete --exclude ".git/*" --exclude ".github/*"

- name: Invalidate CloudFront cache
  run: |
    aws cloudfront create-invalidation --distribution-id SEU_ID_DISTRIBUICAO_CLOUDFRONT --paths "/*"
```
```
- aws-region: Substitua pela sua região da AWS (ex: sa-east-1 para São Paulo).
- s3://seu-nome-do-bucket: Substitua pelo nome do seu bucket S3.
- SEU_ID_DISTRIBUICAO_CLOUDFRONT: Substitua pelo ID da sua distribuição CloudFront (você o encontra no console do CloudFront).
- --delete: Este comando garante que arquivos removidos do seu repositório sejam também removidos do S3.
- --exclude: Exclui pastas como .git e .github do upload para o S3.
Envie seu Site para o GitHub: Coloque todos os arquivos do seu site (HTML, CSS, JS, etc.) na raiz do seu repositório.
Commit e Push: Faça um commit das suas alterações e envie (push) para a branch configurada no seu workflow (main no exemplo).

5. Testando seu Site

Depois do push, o GitHub Actions iniciará o workflow de deploy automaticamente. Você pode acompanhar o progresso na aba "Actions" do seu repositório.

Assim que o workflow for concluído com sucesso e o CloudFront tiver invalidado o cache (isso pode levar alguns minutos), seu site estará acessível pelo seu domínio personalizado (ex: www.meusitepessoal.com.br).

Com essa configuração, você tem um site pessoal altamente disponível, performático, seguro e com um processo de deploy automatizado, permitindo que você foque no que realmente importa: criar conteúdo incrível!