Distribuera Hugo-webbplats till AWS S3

Hugo är en statisk webbplatsgenerator

Sidinnehåll

När webbplatsen genereras med Hugo är det dags att distribuera den till någon värdplattform. Här är en guide för att skicka den till AWS S3 och serva den med AWS CloudFront CDN.

Hugo statisk webbplats distribuerad till AWS

Förbered webbplats

Jag kommer inte att beskriva här hur man skapar ett Hugo webbplatsprojekt eller lägger till artiklar eller blogginlägg där. Antag att du redan har gjort detta.

Om inte, här är en Hugo snabbstart

Distributionsalternativ

Det finns flera alternativ tillgängliga för att distribuera och värda en Hugo-genererad webbplats (https://gohugo.io/hosting-and-deployment/). Jag gillar personligen:

Nedan beskriver jag exakt detta - det sista - metoden.

1. Skapa s3-bitbucket med avslappnade behörigheter

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

  1. skapa en bucket med namnet som webbplatsens namn, till exempel: “microsoft.com”

  2. klicka på bucketen => egenskaper, längst ner => statisk webbplatsvärdning Avsnitt för statisk webbplatsvärdning

  3. klicka på redigera, sedan - aktivera, och “värd för statisk webbplats”

Redigera statisk webbplatsvärdning

  1. lägg även där i index: index.html och i fel: 404.html
  2. klicka på spara, kom ihåg “bucket webbplats slutpunkt”, det skulle se ut så här: http://microsoft.com.s3-website-ap-southeast-2.amazonaws.com
  3. gå till bucketbehörigheter, se bilderna nedan. Offentlig åtkomst får inte blockeras.

Blockera offentlig åtkomst - av 1

Blockera offentlig åtkomst - av 2

  1. bucketpolicy (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 certifikat

gå till AWS certifikatmanager https://console.aws.amazon.com/acm välj rätt region.

  1. klicka på begäran
  2. offentligt certifikat
  3. domännamn: ta två som: “microsoft.com” och “www.microsoft.com”
  4. du kan begära fler subdomäner som “blog.microsoft.com”, “xmpp.microsoft.com” etc
  5. gör dns-valideringen. Det är mycket enklare att göra/skicka detta via Route53-konsolen om din registrator är AWS.

3. Distribuera Lambda-funktion till Lambda@Edge

Lambda@Edge-funktionen kommer att skriva om Hugo QuickStart-projektets URL:er för kataloger till ett standardobjekt, index.html. Så här serverar Cloudfront URI ‘/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å omskrivningsregler för Hugo-underkatalog-URI:er.
// Exempel:
//   1. omskriv URI /posts/ till /posts/index.html
//   2. omskriv 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 omskrivs inte 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

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

  1. Skapa distribution
  2. skapa ursprung som pekar på din s3-bucket

Skapa ursprung

  1. Certifikat för din webbplats
  2. när det erbjuder att konvertera till statisk webbplats - godkänn
  3. skapa beteende som pekar på ditt ursprung och omdirigera Http till Https

Redigera beteende

  1. nedan i beteende/funktioner-associationer - i Origin Request - välj din Lambda-funktion

Lambda-funktion

  1. Spara
  2. Gå till din distributions allmänna flik och kopiera ditt distributionsdomännamn. Det borde se ut så här: asdfasdfasdf.cloudfront.net

Exempel på distributionsdomännamn

5. Peka AWS Route53 DNS till din CloudFront

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

  1. skapa eller klicka på din webbplats värdzon. Den borde kallas som din webbplats: till exempel: “microsoft.com”
  2. skapa en tom “A”-post som pekar på din CloudFront-distribution (distributionsdomännamn)
  3. skapa en “A” “www”-post som pekar som alias till din första “A”-post

6. Installera aws cli

  1. Installera aws klientkommandoverktyg https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
  2. konfigurera aws cli-anslutning
    1. kontrollera filen ~/.aws/credentials, den borde ha något som
[default]
aws_access_key_id = .......
aws_secret_access_key = .......
  1. 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 denna målpunkt.
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 invalidera cachan som behövs.
cloudFrontDistributionID = ""

Om du håller dina konfigurationer i config.yml, borde det se ut så här

deployment:
  targets:
    name: "lfs3"
    URL: "s3://microsoft.com?region=ap-southeast-2"
    cloudFrontDistributionID: "E123123123"
  1. spara denna fil
  2. kompilera din webbplats
hugo
  1. distribuera den med hugo deploy-kommandot
hugo deploy
  1. öppna din webbplats-URL i webbläsaren för att se om allt fungerade

Användbara länkar

Jag hoppas att denna lilla guide skulle hjälpa dig. Ha en bra dag!