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 comment le pousser vers AWS S3 et le servir avec AWS CloudFront CDN.

Préparer le site

Je ne décrirai pas ici comment créer un projet de site Hugo ou 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 de Hugo

Options de déploiement

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

• Comment hugo site peut être hébergé sur github
• AWS Amplify pour la construction et le déploiement.
• et le déploiement vers s3 avec la commande hugo deploy et le service avec AWS CloudDront CDN et AWS Route53 et AWS Lambda.

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

1. Créer un s3 bitbucket avec des permissions relaxées

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

1. créer un bucket avec un nom comme le nom du site, par exemple : “microsoft.com”

2. cliquer sur le bucket => propriétés, vers le bas => hébergement de site statique

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

4. mettre également là-dedans en index : index.html et en erreur : 404.html
5. cliquer sur enregistrer, retenir “bucket website endpoint”, il ressemblera à : http://microsoft.com.s3-website-ap-southeast-2.amazonaws.com
6. aller aux permissions du bucket, voir les images ci-dessous. l’accès public ne doit pas être bloqué.

7. politique du bucket (remplacer microsoft.com par le nom de votre 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 choisir la bonne région.

1. cliquer sur demander
2. certificat public
3. noms de domaine : prendre deux comme : “microsoft.com” et “www.microsoft.com”
4. vous pouvez demander d’autres sous-domaines comme “blog.microsoft.com”, “xmpp.microsoft.com” etc
5. faire la validation DNS. C’est beaucoup plus facile de le faire/push via le console Route53 si votre registrateur est AWS.

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

La fonction Lambda@Edge prendra en charge la réécriture des URLs 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 retournant 200 au lieu de 404.

Flavor Cafe (Scotch) Code Lambda@Edge

// Hugo sur Cloudfront, fonction Lambda@Edge 
// Flavor Cafe (Scotch)
// @starpebble sur github
//
// Deux règles de réécriture pour les URI de sous-répertoire 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 se terminant 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) === '/') {
    // 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. Créer un CDN AWS CloudFront

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 - accepter
5. créer un comportement pointant vers votre origine, et Rediriger Http vers Https

6. ci-dessous dans les associations de comportement/fonctions - dans la demande d’origine - sélectionner votre fonction Lambda

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

5. Pointer AWS Route53 DNS vers votre CloudFrount

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

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

6. Installer aws cli

1. Installer les outils de ligne de commande aws https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
2. configurer la connexion aws cli
   1. vérifier le fichier ~/.aws/credentials, il devrait avoir quelque chose comme

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

3. tester la connexion, taper quelque chose comme ci-dessous pour voir votre bucket s3

aws s3 ls

7. Mettre à jour votre config.toml

1. ouvrir votre hugo.toml ou config.toml dans votre projet hugo
2. ajouter à la fin (remplacer à 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 endpoints 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 gardez vos configurations dans config.yml, cela devrait ressembler à

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

3. enregistrer ce fichier
4. compiler votre site

hugo

5. le déployer avec la commande hugo deploy

hugo deploy

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

Liens utiles

• Soumettre un formulaire Google sur un site Hugo
• Ajouter une balise de données structurées au site Hugo
• Feuille de triche Hugo
• Utiliser Gitea Actions pour déployer un site Hugo vers AWS S3
• Démarrage rapide de 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 miniatures dans le dossier de page bundle pour les sites Hugo avec le thème Mainroad

J’espère que ce petit document de procédure vous aidera. Bonne journée !