Hugo-Website auf AWS S3 bereitstellen

Hugo ist ein statischer Site-Generator.

Inhaltsverzeichnis

Wenn die Website mit Hugo generiert wurde, ist es Zeit, sie auf einer Hosting-Plattform zu deployen. Hier ist eine Anleitung, wie man sie zu AWS S3 pusht und mit AWS CloudFront CDN bereitstellt.

Hugo-Static-Website, deployed zu AWS

Diese Anleitung ist Teil des Web-Infrastruktur — statische Veröffentlichung, CDN, Indexierung und Domain-Dienste-Clusters.

Für einen vollständigen, auf der CLI basierenden Deployment-Workflow siehe Hugo-Website zu AWS S3 mit AWS CLI deployen.

Website vorbereiten

Ich werde hier nicht beschreiben, wie man ein Hugo Website-Projekt erstellt oder Artikel bzw. Blogbeiträge hinzufügt. Es wird davon ausgegangen, dass Sie dies bereits getan haben.

Falls nicht, finden Sie hier einen Hugo-Quickstart.

Deployment-Optionen

Es gibt mehrere Optionen, um eine mit Hugo generierte Website zu deployen und zu hosten (https://gohugo.io/hosting-and-deployment/). Ich persönlich mag:

Für Alternativen wie Netlify, siehe Netlify für Hugo & statische Websites: Preisgestaltung, Free-Tier und Alternativen.

Im Folgenden beschreibe ich genau diese – letzte – Methode.

1. S3-Bucket mit lockeren Berechtigungen erstellen

gehe zu: https://console.aws.amazon.com/s3

  1. erstelle einen Bucket mit einem Namen wie dem Domainnamen, zum Beispiel: “microsoft.com”

  2. klicke auf den Bucket => Eigenschaften, ganz unten => statische Website-Bereitstellung (static website hosting) Bereich statische Website-Bereitstellung

  3. klicke auf Bearbeiten, dann auf aktivieren und “Statische Website bereitstellen”

Schnittstelle zur Bearbeitung der statischen Website-Bereitstellung

  1. gib dort auch ein: index: index.html und in error: 404.html
  2. klicke auf Speichern, merke dir die “Website-Endpunkt des Buckets”, sie sieht so aus: http://microsoft.com.s3-website-ap-southeast-2.amazonaws.com
  3. gehe zu den Bucket-Berechtigungen, siehe die Bilder unten. Der öffentliche Zugriff darf nicht blockiert sein.

Öffentlicher Zugriff blockiert - aus 1

Öffentlicher Zugriff blockiert - aus 2

  1. Bucket-Richtlinie (ersetze microsoft.com durch deinen Domainnamen):
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::microsoft.com/*"
        }
    ]
}

2. Zertifikat erstellen

gehe zu AWS Certificate Manager https://console.aws.amazon.com/acm wähle die richtige Region.

  1. klicke auf Anforderung (Request)
  2. öffentliches Zertifikat
  3. Domainnamen: nimm zwei wie: “microsoft.com” und “www.microsoft.com”
  4. du kannst nach weiteren Subdomains fragen wie “blog.microsoft.com”, “xmpp.microsoft.com” etc.
  5. führe die DNS-Validierung durch. Es ist viel einfacher, dies über die Route53-Konsole zu tun, wenn dein Registrar AWS ist.

3. Lambda-Funktion zu Lambda@Edge deployen

Die Lambda@Edge-Funktion schreibt die Hugo-Quickstart-Projekt-URLs für Verzeichnisse auf ein Standardobjekt, index.html, um. So dient CloudFront der URI ‘/posts/my-post/’ mit dem Inhalt ‘/posts/my-post/index.html’ und gibt 200 statt 404 zurück.

Flavor Cafe (Scotch) Lambda@Edge Code

// Hugo auf Cloudfront, Lambda@Edge Funktion 
// Flavor Cafe (Scotch)
// @starpebble auf github
//
// Zwei Umbenennungsregeln für Hugo-Subverzeichnis-URIs.
// Beispiel:
//   1. schreibe URI /posts/ um zu /posts/index.html
//   2. schreibe URI /posts um zu /posts/index.html
//
// Füge so viele Dateierweiterungen hinzu, wie du möchtest für Regel 2.
// URIs, die mit einer bekannten Dateierweiterung enden, werden durch Regel 2 nicht umgeschrieben.

'use strict';

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

4. AWS CloudFront CDN erstellen

Dies wird mit der neuen AWS-Konsolen-Benutzeroberfläche nicht funktionieren; Sie müssen den AWS CLI-Befehlszeilenbefehl verwenden – bitte siehe Erstelle AWS CloudFront auf Pay-as-You-Go (nicht der Free-Plan)

gehe zu https://console.aws.amazon.com/cloudfront

  1. Verteilung erstellen (Create Distribution)
  2. Ursprung (Origin) erstellen, der auf deinen S3-Bucket zeigt

Ursprung erstellen

  1. Zertifikat für deine Website
  2. wenn es angeboten wird, in eine statische Website umzuwandeln – stimme zu
  3. verhalte (Behaviour) erstellen, das auf deinen Ursprung zeigt, und Redirect HTTP zu HTTPS

Verhalten bearbeiten

  1. unten in Verhalten/Funktionszuordnungen - in Ursprungsanfrage (Origin Request) - wähle deine Lambda-Funktion

Lambda-Funktion

  1. Speichern
  2. Gehe zum Reiter Allgemein deiner Verteilung und kopiere deinen Verteilungs-Domainnamen. Sollte so aussehen: asdfasdfasdf.cloudfront.net

Beispiel für Verteilungs-Domainnamen

5. AWS Route53 DNS auf deine CloudFront zeigen

gehe zu https://console.aws.amazon.com/route53/v2/hostedzones

  1. erstelle oder klicke auf deine gehostete Zone der Website. Sollte wie deine Website heißen: zum Beispiel: “microsoft.com”
  2. erstelle eine leere “A”-Eintragung, die auf deine CloudFront-Verteilung zeigt (Verteilungs-Domainnamen)
  3. erstelle eine “A”-Eintragung für “www”, die als Alias auf deine erste “A”-Eintragung zeigt

6. AWS CLI installieren

  1. Installiere AWS Client-Befehlszeilentools https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
  2. konfiguriere die AWS CLI-Verbindung
    1. prüfe die Datei ~/.aws/credentials, sie sollte etwas wie Folgendes enthalten
[default]
aws_access_key_id = .......
aws_secret_access_key = .......
  1. teste die Verbindung, gib etwas wie unten ein, um deinen S3-Bucket zu sehen
aws s3 ls

7. config.toml aktualisieren

  1. öffne deine hugo.toml oder config.toml in deinem Hugo-Projekt
  2. füge am Ende hinzu (ersetze wieder microsoft.com durch deine Domain):
[[deployment.targets]]
# Ein willkürlicher Name für dieses Ziel.
name = "lfs3"

# S3; siehe https://gocloud.dev/howto/blob/#s3
# Für S3-kompatible Endpunkte, siehe https://gocloud.dev/howto/blob/#s3-compatible
URL = "s3://microsoft.com?region=ap-southeast-2"

# Wenn du ein CloudFront CDN verwendest, wird deploy den Cache bei Bedarf invalidieren.
cloudFrontDistributionID = 	""

Wenn du deine Konfigurationen in config.yml hältst, sollte es so aussehen:

deployment:
  targets:
    name: "lfs3"
    URL: "s3://microsoft.com?region=ap-southeast-2"
    cloudFrontDistributionID:	"E123123123"
  1. speichere diese Datei
  2. kompiliere deine Website
hugo
  1. deploye sie mit dem hugo deploy Befehl
hugo deploy
  1. öffne deine Website-URL im Browser, um zu sehen, ob alles funktioniert hat

Für weitere Themen zur Web-Infrastruktur, siehe den Web-Infrastruktur-Pfeiler.

Ich hoffe, dieses kleine Howto-Dokument wird dir helfen. Hab einen schönen Tag!