Hugo-site implementeren op AWS S3

Wanneer de website met Hugo is gegenereerd, is het tijd om deze te deployen naar een hostingplatform. Hieronder volgt een handleiding voor het uploaden naar AWS S3 en het serveren via AWS CloudFront CDN.

Deze gids maakt deel uit van de Webinfrastructuur — statische publicatie, CDN, indexering en domeindiensten cluster.

Voor een complete, CLI-gebaseerde deployment-workflow, zie Hugo-website naar AWS S3 deployen met AWS CLI.

Website voorbereiden

Ik zal hier niet beschrijven hoe je een Hugo website-project maakt of artikelen en blogberichten toevoegt. We gaan ervan uit dat je dit al hebt gedaan.

Zo niet, bekijk dan de Hugo-quickstart.

Deployment-opties

Er zijn verschillende opties beschikbaar om een door Hugo gegenereerde website te deployen en te hosten (https://gohugo.io/hosting-and-deployment/). Persoonlijk vind ik het volgende leuk:

• Hoe een Hugo-website op GitHub kan worden gehost
• Bouwen en deployen met AWS Amplify.
• En deployen naar S3 met de hugo deploy opdracht en serveren via AWS CloudFront CDN, AWS Route53 en AWS Lambda.

Voor alternatieven zoals Netlify, zie Netlify voor Hugo & statische websites: prijzen, gratis tier en alternatieven.

Hieronder beschrijf ik precies deze laatste methode.

1. Maak een S3-bucket aan met versoepelde permissies

Ga naar: https://console.aws.amazon.com/s3

1. Maak een bucket aan met een naam die lijkt op je sitenaam, bijvoorbeeld: “microsoft.com”

2. Klik op de bucket => eigenschappen, en scroll naar beneden => statische website-hosting

3. Klik op bewerken, vervolgens op inschakelen en “een statische website hosten”

4. Geef daar ook op: index: index.html en bij fouten: 404.html
5. Klik op opslaan, onthoud het “bucket website-endpoint”, dit ziet er ongeveer zo uit: http://microsoft.com.s3-website-ap-southeast-2.amazonaws.com
6. Ga naar de bucket-permissies, zie de onderstaande afbeeldingen. Publieke toegang mag niet geblokkeerd zijn.

7. Bucket-beleid (vervang microsoft.com door je domeinnaam):

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

2. Maak een certificaat aan

Ga naar AWS Certificate Manager https://console.aws.amazon.com/acm Kies het juiste region.

1. Klik op aanvragen
2. Publiek certificaat
3. Domeinnamen: neem er twee, zoals: “microsoft.com” en “www.microsoft.com”
4. Je kunt ook om meer subdomeinen vragen, zoals “blog.microsoft.com”, “xmpp.microsoft.com” enz.
5. Voer de DNS-validatie uit. Het is veel makkelijker om dit via de Route53-console te doen als je registrar AWS is.

3. Deploy Lambda-functie naar Lambda@Edge

De Lambda@Edge-functie schrijft de Hugo QuickStart-project-URL’s voor mappen om naar een standaardobject, index.html. Zo serveert CloudFront de URI ‘/posts/my-post/’ met de inhoud ‘/posts/my-post/index.html’ en retourneert 200 in plaats van 404.

Flavor Cafe (Scotch) Lambda@Edge Code

// Hugo op Cloudfront, Lambda@Edge functie 
// Flavor Cafe (Scotch)
// @starpebble op github
//
// Twee herschrijfreger voor Hugo-subdirectory URI's.
// Voorbeeld:
//   1. herschrijf uri /posts/ naar /posts/index.html
//   2. herschrijf uri /posts naar /posts/index.html
//
// Voeg zoveel bestandsextensies toe als je wilt voor regel 2.
// URI's die eindigen op een bekende bestandsextensie worden niet herschreven door regel 2.

'use strict';

// @starpebble op 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) === '/') {
    // b.v. /posts/ naar /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)$/)) {
    // b.v. /posts naar /posts/index.html
    cfrequest.uri += `/${DEFAULT_OBJECT}`;
  }
  callback(null, cfrequest);
  return true;
}; 

4. Maak AWS CloudFront CDN aan

Dit werkt niet met de nieuwe AWS Console-UI, je moet de aws cli-opdracht gebruiken - zie AWS CloudFront maken op Pay-as-You-Go (niet het gratis plan)

Ga naar https://console.aws.amazon.com/cloudfront

1. Distributie maken
2. Maak een origin aan die naar je S3-bucket verwijst

3. Certificaat voor je website
4. Als het aanbod wordt gedaan om te converteren naar een statische website - stem toe
5. Maak een gedrag aan dat naar je origin verwijst, en Redirect Http naar Https

6. Beneden in gedrag/functie-associaties - bij Origin Request - selecteer je Lambda-functie

7. Opslaan
8. Ga naar het tabblad Algemeen van je distributie en kopieer je distributie-domeinnaam. Dit moet er ongeveer zo uitzien: asdfasdfasdf.cloudfront.net

5. Wijs AWS Route53 DNS naar je CloudFront

Ga naar https://console.aws.amazon.com/route53/v2/hostedzones

1. Maak een gehost zone aan of klik op de gehost zone van je website. Dit moet zo heten als je site: bijvoorbeeld: “microsoft.com”
2. Maak een “A”-record aan dat leeg is en wijst naar je CloudFront-distributie (Distributie-domeinnaam)
3. Maak een “A”-record “www” aan dat als alias wijst naar je eerste “A”-record

6. Installeer AWS CLI

1. Installeer de AWS CLI-commando tools https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
2. Configureer de AWS CLI-verbinding
   1. Controleer het bestand ~/.aws/credentials, dit moet ongeveer zo zijn

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

3. Test de verbinding, typ iets als hieronder om je S3-bucket te zien

aws s3 ls

7. Update je config.toml

1. Open je hugo.toml of config.toml in je Hugo-project
2. Voeg het volgende toe aan het einde (vervang weer microsoft.com met de jouwe):

[[deployment.targets]]
# Een willekeurige naam voor dit doel.
name = "lfs3"

# S3; zie https://gocloud.dev/howto/blob/#s3
# Voor S3-compatibele endpoints, zie https://gocloud.dev/howto/blob/#s3-compatible
URL = "s3://microsoft.com?region=ap-southeast-2"

# Als je een CloudFront CDN gebruikt, zal deploy de cache invalideren indien nodig.
cloudFrontDistributionID = 	""

Als je je configuraties in config.yml bewaart, moet het er zo uitzien:

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

3. Sla dit bestand op
4. Compileer je website

hugo

5. Deploy het met de hugo deploy opdracht

hugo deploy

6. Open je website-URL in een browser om te zien of dit allemaal werkte

Voor meer onderwerpen over webinfrastructuur, zie de webinfrastructuur-pijler.

Nuttige links

• Google Formulier indienen op Hugo-website
• Gestructureerde datamarkup toevoegen aan de Hugo-website
• Hugo Cheat Sheet
• Hugo-website naar AWS S3 deployen met AWS CLI
• Gebruik Gitea Actions om Hugo-website naar AWS S3 te deployen
• Hugo quickstart: https://gohugo.io/getting-started/quick-start/
• Grote lijst met voorbeelden van Hugo-thema’s: https://themes.gohugo.io/
• Hugo hosting en deployment: https://gohugo.io/hosting-and-deployment/
• Afbeeldingen verwerken in Mainroad Hugo-thema: Afbeeldingsconfiguratie Mainroad-thema
• Installeer AWS Command Line Interface (AWS CLI): https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
• Meest populaire thema’s voor Hugo
• Hoe je miniaturen opslaat in de page-bundle map voor Hugo-sites met Mainroad-thema

Ik hoop dat dit kleine handleiding-document je zal helpen. Have een geweldige dag!