Hur deployerar jag en Hugo-webbplats till AWS S3 med hjälp av AWS CLI?

Bygg din Hugo-webbplats med hugo --gc --minify , konfigurera AWS CLI-åtkomstuppgifter, skapa en S3-bucket och synkronisera sedan din public/ -katalog till S3 med aws s3 sync public/ s3://din-bucket-namn/ --delete --cache-control max-age=60 .

Vad är bästa praxis för cachelagring när du distribuerar till S3?

Ange lämpliga Cache-Control-huvuden under synkronisering (t.ex., --cache-control max-age=60 ), konfigurera CloudFronts maximala TTL-värden och använd cache-invalidering för omedelbara uppdateringar. Överväg innehållsversionshantering för kritiska tillgångar.

Hur återkallar jag CloudFront-cache efter distribution?

Använd aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*" för att ogiltiggöra hela cache:n, eller ange specifika sökvägar. De första 1 000 ogiltiggörelserna per månad är kostnadsfria.

Kan jag automatisera distributionen av Hugo till AWS S3?

Ja, du kan automatisera distributioner med CI/CD-pipelines som GitHub Actions, Gitea Actions eller AWS CodePipeline. Dessa kan bygga din Hugo-sida och distribuera den automatiskt vid kodkommitter.

Vilken är skillnaden mellan S3-webbhotell och CloudFront?

S3-webbhotellning erbjuder grundläggande statisk värdtjänst, medan CloudFront är en CDN som cacherar innehåll vid kantnoder världen över, vilket förbättrar prestanda och minskar latens. CloudFront erbjuder också SSL/TLS-avslutning och bättre säkerhetsfunktioner.

Distribuera Hugo-webbplats till AWS S3 med AWS CLI

Automatisera Hugo-distribution till AWS S3

Sidinnehåll

Distribution av en Hugo-statisk sida till AWS S3 med hjälp av AWS CLI ger en robust och skalerbar lösning för att värdas din webbplats. Den här guiden täcker hela distributionsprocessen, från initial konfiguration till avancerad automatisering och cachemanagementstrategier.

färgtetris på bordet

Distribution med AWS CLI blir allt vanligare eftersom hugo-distributionen tog bort deploy-kommandot från standardpaketet. Se om extended och withdeploy i Hur man installerar Ubuntu 24.04 & användbara verktyg om du gör detta lokalt och fortfarande vill anropa hugo deploy.

Förutsättningar

Innan du distribuerar din Hugo-sida till AWS S3, se till att du har:

En redo Hugo-sida för distribution (om du behöver hjälp med att skapa en, se Hugo quickstart guide)
En AWS-konto med lämpliga behörigheter
AWS CLI installerat och konfigurerat
Grundläggande kunskap om kommandoradskommandon

Bygg din Hugo-sida

Första steget i att distribuera din Hugo-sida är att generera de statiska filerna. Använd Hugo Cheat Sheet som referens för tillgängliga kommandon och alternativ.

Bygg din sida med optimeringsflaggor:

hugo --gc --minify

Flaggan --gc tar bort oanvända cachefiler, medan --minify komprimerar din HTML, CSS och JavaScript för optimal prestanda. Detta genererar din statiska sida i public/-katalogen, vilket är det som vi kommer att distribuera till S3.

Konfigurera AWS CLI

Om du inte redan har konfigurerat AWS CLI, kör:

aws configure

Du kommer att uppmanas att ange:

AWS Access Key ID: Din AWS-åtkomstnyckel
AWS Secret Access Key: Din hemliga åtkomstnyckel
Standardregion: Din önskade AWS-region (t.ex. us-east-1, ap-southeast-2)
Standardutdataformat: json (rekommenderat)

För programmatisk åtkomst, se till att din IAM-användare har behörigheter för:

s3:PutObject
s3:GetObject
s3:DeleteObject
s3:ListBucket
cloudfront:CreateInvalidation (om du använder CloudFront)

Skapa och konfigurera S3-bucketen

Skapa bucketen

Skapa din S3-bucket med hjälp av AWS CLI:

aws s3 mb s3://your-bucket-name --region us-east-1

Viktigt: Välj en globalt unik bucketnamn. Om du planerar att använda bucketen för webbplatsvärd, måste bucketnamnet matcha din domännamn om du använder en anpassad domän.

Konfigurera bucketen för statisk webbplatsvärd

Aktivera statisk webbplatsvärd:

aws s3 website s3://your-bucket-name \
  --index-document index.html \
  --error-document 404.html

Ange bucketpolicy

För offentlig läsbehörighet (om du inte använder CloudFront), skapa en bucketpolicy:

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

Använd policy:

aws s3api put-bucket-policy \
  --bucket your-bucket-name \
  --policy file://bucket-policy.json

Säkerhetsnotering: Om du använder CloudFront (rekommenderas), kan du begränsa S3-bucketens åtkomst till CloudFront endast, vilket eliminerar behovet av offentlig läsbehörighet.

Distribuera till S3 med AWS CLI

Kärnkommandot för distribution använder aws s3 sync för att ladda upp din sida:

aws s3 sync public/ s3://your-bucket-name/ \
  --delete \
  --cache-control max-age=60

Förklaring av viktiga parametrar

public/: Din lokala Hugo-utdatakatalog
s3://your-bucket-name/: Din S3-bucketdestination
--delete: Tar bort filer i S3 som inte finns lokalt, säkerställer att din bucket speglar din byggversion
--cache-control max-age=60: Ställer in cachehuvud (60 sekunder i detta exempel)

Avancerade synkopalternativ

För mer kontroll över din distribution:

aws s3 sync public/ s3://your-bucket-name/ \
  --delete \
  --cache-control "public, max-age=31536000, immutable" \
  --exclude "*.html" \
  --cache-control "public, max-age=60" \
  --include "*.html" \
  --exclude "*.js" \
  --cache-control "public, max-age=31536000, immutable" \
  --include "*.js"

Detta exempel ställer in olika cachetider för HTML-filer (60 sekunder) jämfört med statiska tillgångar som JavaScript (1 år), vilket är en vanlig optimeringsstrategi.

Konfigurera CloudFront-distribution

Även om S3 kan värdas statiska webbplatser direkt, ger användning av Amazon CloudFront som CDN bättre prestanda, säkerhet och global distribution.

Skapa CloudFront-distribution

aws cloudfront create-distribution \
  --distribution-config file://cloudfront-config.json

En grundläggande CloudFront-konfiguration innehåller:

S3-bucket som källa
Standardcachebeteenden
SSL/TLS-certifikat (från AWS Certificate Manager)
Anpassad domännamnkonfiguration (valfritt)

Cachemanagementstrategier

När du distribuerar via CloudFront, överväg dessa cachestrategier:

Ställ in maximal TTL: Konfigurera CloudFronts maximal TTL för att styra hur länge innehåll cachas vid kantnoder
Innehållsversionshantering: Använd versionidentifierare i filnamn (t.ex. style-v2.css) för att tvinga cachupdateringar
Cache-Control-huvuden: Ställ in lämpliga huvuden under S3-synk (som visas ovan)
Selektivt ogiltiggörande: Ogiltiggör endast ändrade sökvägar istället för hela cachen

Ogiltiggörande av cache

Efter att ha distribuerat uppdateringar, ogiltiggör CloudFront-cachen för att visa färskt innehåll:

aws cloudfront create-invalidation \
  --distribution-id YOUR_DISTRIBUTION_ID \
  --paths "/*"

För mer målriktade ogiltiggöranden:

aws cloudfront create-invalidation \
  --distribution-id YOUR_DISTRIBUTION_ID \
  --paths "/index.html" "/blog/*"

Kostnadshinweis: De första 1 000 ogiltiggöringsvägarna per månad är kostnadsfria. Efter det kostar varje väg 0,005 USD. Använd selektivt ogiltiggörande för att minimera kostnader.

Automatisering med CI/CD

Manuella distributioner fungerar för små projekt, men automatisering är avgörande för produktionsarbetsflöden. Du kan integrera detta distributionsprocess med Gitea Actions för att distribuera Hugo-webbplats till AWS S3 eller liknande CI/CD-pipelines.

Grundläggande distributionsskript

Skapa ett enkelt distributionsskript:

#!/bin/bash
set -e

# Bygg Hugo-sidan
echo "Bygger Hugo-sidan..."
hugo --gc --minify

# Distribuera till S3
echo "Distribuerar till S3..."
aws s3 sync public/ s3://your-bucket-name/ \
  --delete \
  --cache-control max-age=60

# Ogiltiggör CloudFront-cachen
echo "Ogiltiggör CloudFront-cachen..."
aws cloudfront create-invalidation \
  --distribution-id YOUR_DISTRIBUTION_ID \
  --paths "/*"

echo "Distributionen är klar!"

Gör den körbar och kör:

chmod +x deploy.sh
./deploy.sh

Exempel på GitHub Actions

För GitHub-repo, skapa .github/workflows/deploy.yml:

name: Deploy to AWS S3

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
      
      - name: Build
        run: hugo --gc --minify
      
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: us-east-1
      
      - name: Deploy to S3
        run: |
          aws s3 sync public/ s3://your-bucket-name/ \
            --delete \
            --cache-control max-age=60          
      
      - name: Invalidate CloudFront
        run: |
          aws cloudfront create-invalidation \
            --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
            --paths "/*"

Övervakning och optimering

Aktivera loggning

Konfigurera S3- och CloudFront-loggning för att spåra åtkomstmönster:

# Aktivera S3-åtkomstloggning
aws s3api put-bucket-logging \
  --bucket your-bucket-name \
  --bucket-logging-status file://logging.json

Ställa in CloudWatch-aviseringar

Övervaka din distribution med CloudWatch:

aws cloudwatch put-metric-alarm \
  --alarm-name high-error-rate \
  --alarm-description "Varning vid hög felfrekvens" \
  --metric-name 4xxError \
  --namespace AWS/CloudFront \
  --statistic Sum \
  --period 300 \
  --threshold 10 \
  --comparison-operator GreaterThanThreshold

Felsökning av vanliga problem

Filerna uppdateras inte

Om ändringar inte visas:

Kontrollera CloudFront-cachen ogiltiggörande status
Verifiera att --delete-flaggan används i synk-kommandot
Rensa webbläsarens cache eller testa i incognito-läge
Kontrollera S3-bucketens behörigheter

Långsam distribution

Optimera synkprestanda:

Använd --exclude och --include för att hoppa över onödiga filer
Överväg att använda --size-only för snabbare jämförelser
Använd parallella uppladdningar med --cli-read-timeout och --cli-write-timeout

Behörighetsfel

Se till att din IAM-användare har:

S3-bucketåtkomstbehörigheter
CloudFront-ogiltiggöringsbehörigheter (om tillämpligt)
Rätt bucketpolicyer konfigurerade

Sammanfattning av bästa praxis

Använd alltid --delete för att hålla S3 i sync med din lokala byggversion
Ställ in lämpliga cachehuvuden beroende på filtyper
Använd CloudFront för produktionsdistributioner
Automatisera distributioner med CI/CD-pipelines
Övervaka kostnader – vara uppmärksam på CloudFront-ogiltiggöringsavgifter
Versionera dina distributioner – tagga versioner för enkel återställning
Testa lokalt först – verifiera din Hugo-byggversion innan distribution

Relaterade resurser

För mer detaljerad information om Hugo-distribution, se den omfattande guiden om distribution av Hugo-genererad webbplats till AWS S3, som täcker ytterligare distributionsalternativ och konfigurationer.

När du skriver din innehåll, påminn dig om att använda korrekt Markdown-kodblock för kodexempel, och referera till Den omfattande Markdown-cheatsheeten för formateringsriktlinjer.