Deploy Hugo site to AWS S3

Quando il sito viene generato con Hugo, è il momento di deployarlo su una piattaforma di hosting. Ecco come spingerlo su AWS S3 e servirlo con AWS CloudFront CDN.

Preparare il sito

Non descriverò qui come creare un progetto Hugo o aggiungere articoli o post blog. Assumiamo che tu abbia già fatto questo.

Se non lo hai fatto, ecco un Hugo quickstart

Opzioni di Deployment

Esistono diverse opzioni disponibili per deployare e ospitare un sito generato da Hugo (https://gohugo.io/hosting-and-deployment/). Personalmente preferisco:

• Come ospitare un sito Hugo su GitHub
• AWS Amplify per la costruzione e il deployment.
• e deployare su S3 con il comando hugo deploy e servirlo con AWS CloudFront CDN e AWS Route53 e AWS Lambda.

Di seguito descrivo esattamente questo - l’ultimo - metodo.

1. Creare un bucket S3 con permessi rilassati

Vai a: https://console.aws.amazon.com/s3

1. crea un bucket con un nome simile al nome del sito, ad esempio: “microsoft.com”

2. clicca sul bucket => proprietà, in basso => hosting sito statico

3. clicca su modifica, quindi - abilita, e “ospita un sito statico”

4. inserisci anche lì nell’indice: index.html e nell’errore: 404.html
5. clicca su salva, ricorda “bucket website endpoint”, apparirà così: http://microsoft.com.s3-website-ap-southeast-2.amazonaws.com
6. vai alle autorizzazioni del bucket, vedi le immagini di seguito. l’accesso pubblico non deve essere bloccato.

7. policy del bucket (sostituisci microsoft.com con il tuo nome di dominio):

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

2. Creare un certificato

Vai al gestore certificati AWS https://console.aws.amazon.com/acm scegli la regione corretta.

1. clicca su richiedi
2. certificato pubblico
3. nomi dominio: prendi due come: “microsoft.com” e “www.microsoft.com”
4. puoi richiedere anche altri sottodomini come “blog.microsoft.com”, “xmpp.microsoft.com” ecc
5. fai la validazione DNS. È molto più facile farlo/pusharlo tramite il console Route53 se il tuo registrar è AWS.

3. Deployare una funzione Lambda a Lambda@Edge

La funzione Lambda@Edge prenderà e riscriverà gli URL del progetto Hugo QuickStart per le directory in un oggetto predefinito, index.html. Così Cloudfront serve l’URI ‘/posts/my-post/’ con il contenuto ‘/posts/my-post/index.html’ restituendo 200 invece di 404.

Flavor Cafe (Scotch) Codice Lambda@Edge

// Hugo su Cloudfront, funzione Lambda@Edge 
// Flavor Cafe (Scotch)
// @starpebble su github
//
// Due regole di riscrittura per URI di sottodirectory di Hugo.
// Esempio:
//   1. riscrivi URI /posts/ a /posts/index.html
//   2. riscrivi URI /posts a /posts/index.html
//
// Aggiungi quanti file estensioni ti piacciono per la regola 2.
// Gli URI che terminano con un'estensione conosciuta non vengono riscritti dalla regola 2.

'use strict';

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

4. Creare AWS CloudFront CDN

vai a https://console.aws.amazon.com/cloudfront

1. Creare Distribuzione
2. creare origine puntando al tuo bucket S3

3. Certificato per il tuo sito
4. quando ti offre di convertire in sito statico - accetta
5. creare comportamento puntando alla tua origine, e Redirect Http a Https

6. di seguito nel comportamento/funzioni associazioni - nell’Origine Request - seleziona la tua funzione Lambda

7. Salva
8. Vai alla scheda Generale della tua distribuzione e copia il nome del dominio della distribuzione. Dovrebbe essere simile a: asdfasdfasdf.cloudfront.net

5. Puntare AWS Route53 DNS al tuo CloudFront

vai a https://console.aws.amazon.com/route53/v2/hostedzones

1. crea o clicca sul tuo hosted zone del sito. Dovrebbe essere chiamato come il tuo sito: ad esempio: “microsoft.com”
2. crea un record “A” vuoto puntando al tuo CloudFront distribution (Distribution domain name)
3. crea un record “A” “www” puntando come alias al tuo primo record “A”

6. Installare aws cli

1. Installare gli strumenti di riga di comando aws https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
2. configurare la connessione aws cli
   1. controlla il file ~/.aws/credentials, dovrebbe avere qualcosa come

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

3. testare la connessione, digita qualcosa come di seguito per vedere il tuo bucket s3

aws s3 ls

7. Aggiornare il config.toml

1. apri il tuo hugo.toml o config.toml nel tuo progetto hugo
2. aggiungi alla fine (sostituisci nuovamente microsoft.com con il tuo):

[[deployment.targets]]
# Un nome arbitrario per questo target.
name = "lfs3"

# S3; vedi https://gocloud.dev/howto/blob/#s3
# Per endpoint S3-compatibili, vedi https://gocloud.dev/howto/blob/#s3-compatible
URL = "s3://microsoft.com?region=ap-southeast-2"

# Se stai utilizzando un CDN CloudFront, deploy eliminerà la cache come necessario.
cloudFrontDistributionID = 	""

Se tieni i tuoi configurazioni in config.yml, dovrebbe apparire così

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

3. salva questo file
4. compila il tuo sito

hugo

5. deployalo con comando hugo deploy

hugo deploy

6. apri l’URL del tuo sito nel browser per vedere se tutto è funzionato

Link utili

• Inviare un modulo Google in un sito Hugo
• Aggiungere markup dati strutturati al sito Hugo
• Scheda di riferimento per Hugo
• Utilizzare Gitea Actions per deployare un sito Hugo su AWS S3
• Quickstart di Hugo: https://gohugo.io/getting-started/quick-start/
• Elenco grande di esempi di temi Hugo: https://themes.gohugo.io/
• Hosting e deployment di Hugo: https://gohugo.io/hosting-and-deployment/
• Gestione immagini nel tema Mainroad di Hugo: Gestione immagini nel tema Mainroad
• Installare AWS Command Line Interface (AWS CLI): https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
• Tempi più popolari per Hugo
• Come archiviare immagini miniature nella cartella del bundle pagina per siti Hugo con tema Mainroad

Spero che questo piccolo documento howto ti sia d’aiuto. Buona giornata!