🚀 Comment créer un site statique HUGO et l'héberger sur AWS

Pour ce premier article de mon blog, je vais commencer par le commencement et expliquer comment j’ai hébergé mon site statique sur le service S3 d’Amazon AWS. Pour ce tutoriel, j’ai utilisé un nom de domaine de démonstration.

Nous devons créer 2 buckets : un pour le “domaine.com” et l’autre pour le sous-domaine “www.domaine.com”

1) Créer le bucket pour “domaine.com”

a. Créer le bucket sur S3

Il est important de réaliser toutes les étapes dans la même région. Dans mon cas, j’ai choisi la région N. Virginia.
Le Bucket name doit correspondre exactement au domaine que vous allez utiliser.

Une fois cette étape terminée, retournez dans Buckets et cliquez sur le nom de votre bucket afin de configurer l’hébergement du site statique. Amazon S3 > Buckets > domaine.com puis dans l’onglet Properties, allez tout en bas Static website hosting

Puis allez dans Bucket policy et copiez/collez exactement ce même code en changeant uniquement le Bucket-Name/ de la dernière ligne.

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

Si vous naviguez vers l’URL fournie par Amazon,(trouvez l’URL sur Static website hosting sous l’onglet Properties) le site fonctionne mais affiche une erreur car il n’y a aucune page à servir. Il manque simplement l’upload d’un fichier index.html

Uploadez un fichier nomé index.html et testez à nouveau.

b. Route53 - Hosted zone

Nous allons maintenant lier notre nom de domaine (identique au bucket) à notre bucket S3. Dans mon cas, le nom de domaine a été acheté chez OVH. Peu importe où vous achetez le nom de domaine, la procédure reste exactement la même.

Pour cela, nous allons créer une Hosted Zone publique sur Route53.

Puis nous creons un enregistrement de type A. avec Route traffic to : Alias to S3website endpoint. Gardez la même région.

Dans Records notez les 4 Names Servers (NS).

Allez sur le site de votre registrat (OVH dans mon cas) et changez les NS actuels de votre nom de domaine par les 4 fournis juste avant 👆.
Dans le cas d’OVH, ils ne fournissent que 2 NS par défaut. Supprimez-les et ajoutez les 4 NS d’Amazon. Enregistrez les modifications. Les NS ne vont pas apparaître immédiatement, il faut un certain temps de propagation.

c. Certificate Manager - SSL

Nous allons maintenant créer des certificats SSL afin que notre site soit accessible en HTTPS.
Allez sur AWS Certrificate Manager > Certificates > Request certificate > Request public certificate

d. Cloudfront

Dernière étape, nous allons configurer Cloudfront afin d’améliorer la sécurité et vitesse de distribution de notre site.

Allez sur Cloudfront > Distributions et sélectionnez le nom de la distribution de votre site.
Cliquez sur Edit dna sla rubrique Settings

Remplissez comme ceci:

Allez sur l’onglet Security.

Edit Origin

Edit behavior

Nous avons finalisé toutes les étapes de création du site avec le nom de domaine exemple.com. Si vous souhaitez que le site s’affiche également lorsqu’on navigue sur www.exemple.com, vous devez créer un autre bucket avec redirection vers exemple.com.
Je détaille cette procédure dans l’étape suivante.👇

2) Créer le bucket pour www

a. Create S3 Bucket:

Allez dans la [console Amazon S3] (https://s3.console.aws.amazon.com/s3/home).
Cliquez sur Create bucket. - Nommez le bucket www.yourdomain.com.
Choisissez la région appropriée. (même que le root).
Cliquez sur Create sans activer les paramètres avancés.
b. Configurer le Bucket pour la Redirection:
- Sélectionnez le Bucket www.yourdomain.com.
- Allez dans l’onglet Properties.
- Descendez jusqu’à la section Static website hosting et cliquez sur Edit.
- Choisissez Redirect requests for an object.
- Dans le champ Host name, entrez votre domaine racine (par exemple, votredomaine.com).
- Dans le champ Protocol, choisissez https.
- Cliquez sur Save changes.

c. Route 53 Alias Record:

Nous allons créer les enregistrements pour la zone DNS (Hosted Zone) comme ceci:

Record name: www
Record type: A (or AAAA) - Alias: Yes
Route traffic to: Alias to S3 website endpoint
Region: Select your S3 bucket's region
S3 bucket endpoint: www.yourdomain.com
Save the record.
Exemple hosted zone. Voici ce que vous devez obtenir à la fin.
Si vous avez suivi ces étapes à la lettre, vous devriez avoir un hébergement opérationnel avec le domaine root et avec le www.
Votre hébergement peut désormais accueillir un site/blog statique tel que HUGO.