Déployer un site Hugo sur AWS S3

Lorsque le site est généré avec Hugo, il est temps de le déployer sur une plateforme d’hébergement. Voici un tutoriel pour le pousser vers AWS S3 et le servir via le CDN AWS CloudFront.

Ce guide fait partie du cluster Infrastructure Web — publication statique, CDN, indexation et services de domaine.

Pour un flux de travail de déploiement complet basé sur la ligne de commande, consultez Déployer un site Hugo vers AWS S3 avec AWS CLI.

Préparer le site

Je ne décrirai pas ici comment créer un projet de site Hugo ni ajouter des articles ou des billets de blog. Je suppose que vous avez déjà fait cela.

Si ce n’est pas le cas, voici un démarrage rapide Hugo

Options de déploiement

Plusieurs options sont disponibles pour déployer et héberger un site généré par Hugo (https://gohugo.io/hosting-and-deployment/). Personnellement, j’aime :

• Comment un site Hugo peut être hébergé sur GitHub
• La construction et le déploiement via AWS Amplify.
• Et le déploiement vers S3 avec la commande hugo deploy et le servir avec le CDN AWS CloudFront, AWS Route53 et AWS Lambda.

Pour des alternatives comme Netlify, consultez Netlify pour Hugo et les sites statiques : tarification, offre gratuite et alternatives.

Ci-dessous, je décris exactement cette dernière méthode.

1. Créer un bucket S3 avec des permissions relâchées

Allez sur : https://console.aws.amazon.com/s3

1. Créez un bucket avec un nom similaire à celui du site, par exemple : “microsoft.com”

2. Cliquez sur le bucket => propriétés, tout en bas => hébergement de site statique

3. Cliquez sur modifier, puis - activer, et “héberger un site statique”

4. Mettez également dans index : index.html et dans error : 404.html
5. Cliquez sur enregistrer, rappelez-vous de l’“endpoint du site du bucket”, cela ressemblera à : http://microsoft.com.s3-website-ap-southeast-2.amazonaws.com
6. Allez dans les permissions du bucket, voir les images ci-dessous. L’accès public ne doit pas être bloqué.

7. Politique du bucket (remplacez microsoft.com par votre nom de domaine) :

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

2. Créer un certificat

Allez sur AWS Certificate Manager https://console.aws.amazon.com/acm Choisissez la bonne région.

1. Cliquez sur demander
2. Certificat public
3. Noms de domaine : prenez deux comme : “microsoft.com” et “www.microsoft.com”
4. Vous pouvez demander plus de sous-domaines comme “blog.microsoft.com”, “xmpp.microsoft.com”, etc.
5. Effectuez la validation DNS. C’est beaucoup plus facile à faire/pousser via la console Route53 si votre registraire est AWS.

3. Déployer une fonction Lambda vers Lambda@Edge

La fonction Lambda@Edge réécrira les URL du projet Hugo QuickStart pour les répertoires vers un objet par défaut, index.html. C’est ainsi que CloudFront sert l’URI ‘/posts/my-post/’ avec le contenu ‘/posts/my-post/index.html’ en renvoyant 200 au lieu de 404.

Code Lambda@Edge Flavor Cafe (Scotch)

// Hugo sur Cloudfront, fonction Lambda@Edge 
// Flavor Cafe (Scotch)
// @starpebble sur github
//
// Deux règles de réécriture pour les URI de sous-répertoires de Hugo.
// Exemple :
//   1. réécrire l'uri /posts/ vers /posts/index.html
//   2. réécrire l'uri /posts vers /posts/index.html
//
// Ajoutez autant d'extensions de fichiers que vous le souhaitez pour la règle 2.
// Les URI qui se terminent par une extension de fichier connue ne sont pas réécrits par la règle 2.

'use strict';

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

4. Créer le CDN AWS CloudFront

Cela ne fonctionnera pas avec la nouvelle interface utilisateur de la console AWS, vous devrez utiliser la commande aws cli - veuillez consulter Créer AWS CloudFront sur Pay-as-You-Go (pas le plan gratuit)

Allez sur https://console.aws.amazon.com/cloudfront

1. Créer une distribution
2. Créer une origine pointant vers votre bucket S3

3. Certificat pour votre site
4. Lorsqu’il propose de convertir en site statique - acceptez
5. Créer un comportement pointant vers votre origine, et Rediriger Http vers Https

6. En bas dans comportement/associations de fonctions - dans Origin Request - sélectionnez votre fonction Lambda

7. Enregistrer
8. Allez dans l’onglet Général de votre distribution et copiez votre nom de domaine de distribution. Cela devrait ressembler à : asdfasdfasdf.cloudfront.net

5. Pointer AWS Route53 DNS vers votre CloudFront

Allez sur https://console.aws.amazon.com/route53/v2/hostedzones

1. Créez ou cliquez sur la zone hébergée de votre site. Elle devrait s’appeler comme votre site : par exemple : “microsoft.com”
2. Créez un enregistrement “A” vide pointant vers votre distribution CloudFront (nom de domaine de distribution)
3. Créez un enregistrement “A” “www” pointant comme alias vers votre premier enregistrement “A”

6. Installer aws cli

1. Installez les outils de ligne de commande du client AWS https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
2. Configurez la connexion aws cli
   1. Vérifiez le fichier ~/.aws/credentials, il devrait contenir quelque chose comme

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

3. Testez la connexion, tapez quelque chose comme ci-dessous pour voir votre bucket S3

aws s3 ls

7. Mettre à jour votre config.toml

1. Ouvrez votre hugo.toml ou config.toml dans votre projet Hugo
2. Ajoutez à la fin (remplacez à nouveau microsoft.com par le vôtre) :

[[deployment.targets]]
# Un nom arbitraire pour cette cible.
name = "lfs3"

# S3 ; voir https://gocloud.dev/howto/blob/#s3
# Pour les points de terminaison compatibles S3, voir https://gocloud.dev/howto/blob/#s3-compatible
URL = "s3://microsoft.com?region=ap-southeast-2"

# Si vous utilisez un CDN CloudFront, le déploiement invalidera le cache si nécessaire.
cloudFrontDistributionID = 	""

Si vous conservez vos configurations dans config.yml, cela devrait ressembler à

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

3. Enregistrez ce fichier
4. Compilez votre site

hugo

5. Déployez-le avec la commande hugo deploy

hugo deploy

6. Ouvrez l’URL de votre site dans le navigateur pour voir si tout a fonctionné

Pour plus de sujets sur l’infrastructure web, consultez le pilier infrastructure web.

Liens utiles

• Soumettre un formulaire Google sur un site Hugo
• Ajout de balises de données structurées au site Hugo
• Fiche de triche Hugo
• Déployer un site Hugo vers AWS S3 avec AWS CLI
• Utilisation de Gitea Actions pour déployer un site Hugo vers AWS S3
• Démarrage rapide Hugo : https://gohugo.io/getting-started/quick-start/
• Grande liste d’exemples de thèmes Hugo : https://themes.gohugo.io/
• Hébergement et déploiement Hugo : https://gohugo.io/hosting-and-deployment/
• Gestion des images dans le thème Mainroad Hugo : Gestion des images du thème Mainroad
• Installer l’interface de ligne de commande AWS (AWS CLI) : https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
• Les thèmes les plus populaires pour Hugo
• Comment stocker des images miniature dans le dossier de bundle de page pour les sites Hugo avec le thème Mainroad

J’espère que ce petit document de tutoriel vous aura aidé. Passez une excellente journée !