Pubblica il sito Hugo su AWS S3

Quando il sito viene generato con Hugo, è il momento di distribuirlo su una piattaforma di hosting. Ecco una guida su come pubblicarlo su AWS S3 e servirlo tramite la CDN AWS CloudFront.

Questa guida fa parte del cluster Infrastruttura Web — pubblicazione statica, CDN, indicizzazione e servizi di dominio.

Per un flusso di lavoro di distribuzione completo basato su CLI, consulta Distribuzione del sito Hugo su AWS S3 con AWS CLI.

Preparazione del sito

Non descriverò qui come creare un progetto di sito Hugo o aggiungere articoli o post al blog. Si dà per scontato che tu abbia già completato queste operazioni.

In caso contrario, ecco una guida rapida di Hugo.

Opzioni di distribuzione

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

• Come un sito Hugo può essere ospitato su GitHub
• Costruzione e distribuzione con AWS Amplify.
• E distribuzione su S3 con il comando hugo deploy e servizio tramite AWS CloudFront CDN, AWS Route53 e AWS Lambda.

Per alternative come Netlify, consulta Netlify per Hugo e siti statici: prezzi, piano gratuito e alternative.

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à, scorri in basso => Hosting sito web statico.

3. Clicca su Modifica, poi su Abilita e “Ospita un sito web statico”.

4. Inserisci anche lì in indice: index.html e in errore: 404.html.
5. Clicca su Salva, ricorda “endpoint del sito web del bucket”, apparirà simile a: http://microsoft.com.s3-website-ap-southeast-2.amazonaws.com
6. Vai alle autorizzazioni del bucket, vedi le immagini sottostante. L’accesso pubblico non deve essere bloccato.

7. Politica 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 il Certificato

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

1. Clicca su Richiedi.
2. Certificato pubblico.
3. Nomi di dominio: inserisci due come: “microsoft.com” e “www.microsoft.com”.
4. Puoi richiedere più sottodomini come “blog.microsoft.com”, “xmpp.microsoft.com” ecc.
5. Esegui la convalida DNS. È molto più facile farlo/spingerlo tramite la console Route53 se il tuo registrar è AWS.

3. Distribuire la funzione Lambda a Lambda@Edge

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

Codice Lambda@Edge Flavor Cafe (Scotch)

// Hugo su Cloudfront, funzione Lambda@Edge 
// Flavor Cafe (Scotch)
// @starpebble su github
//
// Due regole di riscrittura per gli URI di sottodirectory di Hugo.
// Esempio:
//   1. riscrivi uri /posts/ in /posts/index.html
//   2. riscrivi uri /posts  in /posts/index.html
//
// Aggiungi quante estensioni di file desideri per la regola 2.
// Gli URI che terminano con una nota estensione di file 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) === '/') {
    // ad es. /posts/ a /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)$/)) {
    // ad es. /posts a /posts/index.html
    cfrequest.uri += `/${DEFAULT_OBJECT}`;
  }
  callback(null, cfrequest);
  return true;
}; 

4. Creare AWS CloudFront CDN

Questo non funzionerà con la nuova UI della console AWS, dovrai utilizzare il comando riga di comando aws cli - consulta Crea AWS CloudFront su Pay-as-You-Go (non il Piano Gratuito)

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

1. Crea Distribuzione.
2. Crea un’origine che punti al tuo bucket S3.

3. Certificato per il tuo sito.
4. Quando ti offre di convertire in sito web statico – accetta.
5. Crea un comportamento che punti alla tua origine e reindirizza HTTP a HTTPS.

6. Più in basso, nelle associazioni comportamento/funzioni – in Richiesta Origine – seleziona la tua funzione Lambda.

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

5. Puntare DNS Route53 di AWS al tuo CloudFront

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

1. Crea o clicca sulla zona host del tuo sito. Dovrebbe chiamarsi come il tuo sito: ad esempio: “microsoft.com”.
2. Crea un record “A” vuoto che punti alla tua distribuzione CloudFront (nome dominio distribuzione).
3. Crea un record “A” “www” che punti come alias al tuo primo record “A”.

6. Installa aws cli

1. Installa gli strumenti riga di comando del client AWS https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
2. Configura la connessione aws cli
   1. controlla il file ~/.aws/credentials, dovrebbe contenere qualcosa come

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

3. Testa la connessione, digita qualcosa come di seguito per vedere il tuo bucket S3

aws s3 ls

7. Aggiorna il tuo config.toml

1. Apri il tuo hugo.toml o config.toml nel tuo progetto Hugo.
2. Aggiungi alla fine (sostituisci di nuovo 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 compatibili con S3, vedi https://gocloud.dev/howto/blob/#s3-compatible
URL = "s3://microsoft.com?region=ap-southeast-2"

# Se stai usando una CDN CloudFront, deploy invalidherà la cache quando necessario.
cloudFrontDistributionID = 	""

Se mantieni le tue 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. Distribuiscilo con il comando hugo deploy

hugo deploy

6. Apri l’URL del tuo sito nel browser per verificare che tutto abbia funzionato.

Per ulteriori argomenti sull’infrastruttura web, consulta il pilastro dell’infrastruttura web.

Link utili

• Invia Modulo Google in Sito Hugo
• Aggiunta di markup dati strutturati al sito Hugo
• Hugo Cheat Sheet
• Distribuzione del sito Hugo su AWS S3 con AWS CLI
• Utilizzo di Gitea Actions per distribuire il sito Hugo su AWS S3
• Guida rapida Hugo: https://gohugo.io/getting-started/quick-start/
• Grande elenco di esempi di temi Hugo: https://themes.gohugo.io/
• Hosting e distribuzione Hugo: https://gohugo.io/hosting-and-deployment/
• Gestione delle immagini nel tema Mainroad Hugo: Gestione immagini tema Mainroad
• Installa AWS Command Line Interface (AWS CLI): https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
• Temi più popolari per Hugo
• Come memorizzare le immagini miniature nella cartella del bundle di pagina per i siti Hugo con tema Mainroad

Spero che questo piccolo documento di guida ti sia utile. Buona giornata!