Publicera Hugo-sajten på AWS S3

När hemsidan har genererats med Hugo är det dags att publicera den på en värdplattform. Här är en guide om hur du pushar den till AWS S3 och serverar den med AWS CloudFront CDN.

Denna guide ingår i klustret Webbinfrastruktur — statisk publicering, CDN, indexering och domäntjänster.

För ett komplett arbetsflöde för publicering baserat på CLI, se Publicera Hugo-hemsida till AWS S3 med AWS CLI.

Förbered hemsidan

Jag kommer inte att beskriva här hur man skapar ett Hugo-projekt eller lägger till artiklar eller inlägg där. Jag antar att du redan har gjort detta.

Om inte, så finns här en Hugo-quickstart

Alternativ för publicering

Det finns flera alternativ för att publicera och värd en Hugo-genererad hemsida (https://gohugo.io/hosting-and-deployment/). Personligen gillar jag:

• Hur hugo-sidor kan värdas på github
• AWS Amplify för bygge och publicering.
• och publicering till S3 med hugo deploy kommandot och servering med AWS CloudFront CDN, AWS Route53 och AWS Lambda.

För alternativ som Netlify, se Netlify för Hugo & statiska webbplatser: priser, gratisnivå och alternativ.

Nedan beskriver jag exakt detta – det sista – metoden.

1. Skapa en S3-bucket med avslappnade behörigheter

Gå till: https://console.aws.amazon.com/s3

1. Skapa en bucket med ett namn som liknar din hemsidas namn, till exempel: “microsoft.com”

2. Klicka på bucketen => Egenskaper, längst ner => Värd för statisk webbplats

3. Klicka på Redigera, sedan - Aktivera och “Värd en statisk webbplats”

4. Sätt även in index: index.html och i error: 404.html
5. Klicka på Spara, kom ihåg “bucket website endpoint”, den kommer att se ut så här: http://microsoft.com.s3-website-ap-southeast-2.amazonaws.com
6. Gå till behörigheter för bucketen, se bilderna nedan. Allmän åtkomst får inte blockeras.

7. Bucket-policy (ersätt microsoft.com med ditt domännamn):

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

2. Skapa ett certifikat

Gå till AWS Certificate Manager https://console.aws.amazon.com/acm Välj rätt region.

1. Klicka på Begär
2. Offentligt certifikat
3. Domännamn: Ta två som: “microsoft.com” och “www.microsoft.com”
4. Du kan be om fler underdomäner som “blog.microsoft.com”, “xmpp.microsoft.com” etc.
5. Gör DNS-valideringen. Det är mycket enklare att göra/pusha detta via Route53-konsolen om din registrant är AWS.

3. Publicera Lambda-funktion till Lambda@Edge

Lambda@Edge-funktionen skriver om URL:erna för Hugo QuickStart-projektet för mappar till ett standardobjekt, index.html. Så det är så Cloudfront serverar URI:en ‘/posts/my-post/’ med innehållet ‘/posts/my-post/index.html’ och returnerar 200 istället för 404.

Flavor Cafe (Scotch) Lambda@Edge-kod

// Hugo på Cloudfront, Lambda@Edge-funktion 
// Flavor Cafe (Scotch)
// @starpebble på github
//
// Två skrivregler för Hugo-undermapp-URI:er.
// Exempel:
//   1. skriv om uri /posts/ till /posts/index.html
//   2. skriv om uri /posts  till /posts/index.html
//
// Lägg till så många filändelser som du vill för regel 2.
// URI:er som slutar med en känd filändelse skrivs inte om av regel 2.

'use strict';

// @starpebble på 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) === '/') {
    // t.ex. /posts/ till /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)$/)) {
    // t.ex. /posts till /posts/index.html
    cfrequest.uri += `/${DEFAULT_OBJECT}`;
  }
  callback(null, cfrequest);
  return true;
}; 

4. Skapa AWS CloudFront CDN

Detta kommer inte att fungera med den nya AWS-konsolgränssnittet, du måste använda aws cli-kommandot - se Skapa AWS CloudFront på Pay-as-You-Go (inte Gratisplanen)

Gå till https://console.aws.amazon.com/cloudfront

1. Skapa Distribution
2. Skapa en origin som pekar mot din S3-bucket

3. Certifikat för din hemsida
4. När den erbjuds att konvertera till statisk webbplats - samtyck
5. Skapa ett beteende som pekar mot din origin, och omdirigera Http till Https

6. Längre ner i beteende/funktioner-associationer - i Origin Request - välj din Lambda-funktion

7. Spara
8. Gå till din distributions Generella flik och kopiera ditt distributionsdomännamn. Det bör se ut så här: asdfasdfasdf.cloudfront.net

5. Peka AWS Route53 DNS mot din CloudFront

Gå till https://console.aws.amazon.com/route53/v2/hostedzones

1. Skapa eller klicka på din hemsidas värdzon. Den bör heta som din hemsida: till exempel: “microsoft.com”
2. Skapa en tom “A”-post som pekar mot din CloudFront-distribution (Distribution domain name)
3. Skapa en “A” “www”-post som pekar som alias till din första “A”-post

6. Installera AWS CLI

1. Installera AWS-klientens kommandoradsverktyg https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
2. Konfigurera AWS CLI-anslutning
   1. Kontrollera filen ~/.aws/credentials, den bör innehålla något liknande

[default]
aws_access_key_id = .......
aws_secret_access_key = .......

3. Testa anslutningen, skriv något som nedan för att se din S3-bucket

aws s3 ls

7. Uppdatera din config.toml

1. Öppna din hugo.toml eller config.toml i ditt Hugo-projekt
2. Lägg till i slutet (ersätt igen microsoft.com med ditt):

[[deployment.targets]]
# Ett godtyckligt namn för detta mål.
name = "lfs3"

# S3; se https://gocloud.dev/howto/blob/#s3
# För S3-kompatibla ändpunkter, se https://gocloud.dev/howto/blob/#s3-compatible
URL = "s3://microsoft.com?region=ap-southeast-2"

# Om du använder en CloudFront CDN, kommer deploy att ogiltigförklara cachen vid behov.
cloudFrontDistributionID = 	""

Om du sparar dina konfigurationsfiler i config.yml, bör det se ut så här

deployment:
  targets:
    name: "lfs3"
    URL: "s3://microsoft.com?region=ap-southeast-2"
    cloudFrontDistributionID:	"E123123123"

3. Spara denna fil
4. Kompilera din hemsida

hugo

5. Publicera den med hugo deploy-kommandot

hugo deploy

6. Öppna din hemsidas URL i webbläsaren för att se om allt fungerade

För mer om webbinfrastruktur, se webbinfrastruktur-pelaren.

Användbara länkar

• Skicka Google-formulär på Hugo-hemsida
• Lägg till strukturerade data-markeringar på Hugo-hemsidan
• Hugo-kortfacket
• Publicera Hugo-hemsida till AWS S3 med AWS CLI
• Använd Gitea Actions för att publicera Hugo-hemsida till AWS S3
• Hugo-quickstart: https://gohugo.io/getting-started/quick-start/
• Stor lista med Hugo-temanexempel: https://themes.gohugo.io/
• Hugo-vert och publicering: https://gohugo.io/hosting-and-deployment/
• Hantering av bilder i Mainroad Hugo-tema: Mainroad-temabildshantering
• Installera AWS Command Line Interface (AWS CLI): https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
• Mest populära teman för Hugo
• Hur man lagrar miniatyrbilder i mapp för sidbundle för Hugo-hemsidor med Mainroad-tema

Jag hoppas att denna lilla howto-dokumentation kommer att hjälpa dig. Ha en fantastisk dag!