Hugo-Website auf AWS S3 bereitstellen

Hugo ist ein statischer Seiten-Generator

Inhaltsverzeichnis

Wenn die Website mit Hugo generiert wird, ist es an der Zeit, sie auf eine Hosting-Plattform zu deployen.
Hier ist ein HowTo, um sie auf AWS S3 zu pushen und mit AWS CloudFront CDN zu servieren.

Hugo static site deployed to AWS

Vorbereitung der Website

Ich werde hier nicht erklären, wie man ein Hugo Projekt erstellt oder Artikel oder Blogposts hinzufügt.
Es wird angenommen, dass dies bereits erfolgt ist.

Wenn nicht, hier ist ein 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/). Persönlich bevorzuge ich:

Unten beschreibe ich genau diese – letzte – Methode.

1. Erstellen Sie einen S3-Bucket mit lockeren Berechtigungen

Gehen Sie zu: https://console.aws.amazon.com/s3

  1. Erstellen Sie einen Bucket mit einem Namen wie den Namen der Website, z. B.: “microsoft.com”

  2. Klicken Sie auf den Bucket => Eigenschaften, unten => statisches Website-Hosting statisches Website-Hosting-Bereich

  3. Klicken Sie auf Bearbeiten, dann – aktivieren und „statische Website hosten“

Bearbeiten des statischen Website-Hostings

  1. Geben Sie dort auch in Index: index.html und in Fehler: 404.html ein
  2. Klicken Sie auf Speichern, merken Sie sich den „Bucket-Website-Endpunkt“, es sieht ungefähr so aus: http://microsoft.com.s3-website-ap-southeast-2.amazonaws.com
  3. Gehen Sie zu den Bucket-Berechtigungen, siehe die untenstehenden Bilder. Öffentlicher Zugriff darf nicht blockiert sein.

Block public access - off 1

Block public access - off 2

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

2. Zertifikat erstellen

Gehen Sie zu AWS Certificate Manager https://console.aws.amazon.com/acm Wählen Sie die richtige Region aus.

  1. Klicken Sie auf Anfordern
  2. Öffentliches Zertifikat
  3. Domain-Names: Nehmen Sie zwei, z. B.: “microsoft.com” und “www.microsoft.com”
  4. Sie können weitere Unterdomänen anfordern, z. B.: “blog.microsoft.com”, “xmpp.microsoft.com” usw.
  5. Führen Sie die DNS-Validierung durch. Es ist viel einfacher, dies über die Route53-Konsole durchzuführen, wenn Ihr Registrar AWS ist.

3. Lambda-Funktion für Lambda@Edge deployen

Die Lambda@Edge-Funktion wird die URLs des Hugo QuickStart-Projekts für Verzeichnisse in einen Standardobjekt, index.html, umschreiben. So serviert Cloudfront den 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 Umschreibungsregeln für Hugo-Unterverzeichnis-URIs.
// Beispiel:
//   1. Umschreiben von URI /posts/ zu /posts/index.html
//   2. Umschreiben von URI /posts zu /posts/index.html
//
// Fügen Sie so viele Dateierweiterungen wie gewünscht für Regel 2 hinzu.
// URIs, die mit einer bekannten Dateierweiterung enden, werden von 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

Gehen Sie zu https://console.aws.amazon.com/cloudfront

  1. Erstellen Sie eine Verteilung
  2. Erstellen Sie einen Ursprungspunkt, der auf Ihren S3-Bucket zeigt

Ursprungspunkt erstellen

  1. Zertifikat für Ihre Website
  2. Wenn es anbietet, statische Website zu konvertieren – stimmen Sie zu
  3. Erstellen Sie ein Verhalten, das auf Ihren Ursprungspunkt zeigt, und leiten Sie Http zu Https um

Verhalten bearbeiten

  1. Unten in den Verhaltens- und Funktionen-Assoziationen – in Ursprungsanfrage – wählen Sie Ihre Lambda-Funktion

Lambda-Funktion

  1. Speichern
  2. Gehen Sie zur Allgemeinen Registerkarte Ihrer Verteilung und kopieren Sie den Namen der Verteilung. Sollte ungefähr so aussehen: asdfasdfasdf.cloudfront.net

Beispiel für Verteilungsnamen

5. AWS Route53 DNS auf CloudFront verweisen

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

  1. Erstellen Sie oder klicken Sie auf den Hosted Zone Ihres Sites. Sollte so heißen wie Ihr Site: z. B.: “microsoft.com”
  2. Erstellen Sie einen leeren “A”-Eintrag, der auf Ihre CloudFront-Verteilung (Verteilungsnamen) zeigt
  3. Erstellen Sie einen “A”-Eintrag für “www”, der als Alias auf Ihren ersten “A”-Eintrag verweist

6. AWS CLI installieren

  1. Installieren Sie die AWS Client-Befehlszeilentools https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
  2. Konfigurieren Sie die AWS CLI-Verbindung
    1. Prüfen Sie die Datei ~/.aws/credentials, sie sollte etwas wie folgt enthalten:
[default]
aws_access_key_id = .......
aws_secret_access_key = .......
  1. Testen Sie die Verbindung, geben Sie etwas wie unten ein, um Ihren S3-Bucket anzuzeigen
aws s3 ls

7. Update Ihre config.toml

  1. Öffnen Sie Ihre hugo.toml oder config.toml in Ihrem Hugo-Projekt
  2. Fügen Sie am Ende hinzu (ersetzen Sie erneut microsoft.com durch Ihren eigenen):
[[deployment.targets]]
# Ein beliebiger 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 Sie ein CloudFront CDN verwenden, wird deploy den Cache entsprechend invalidieren.
cloudFrontDistributionID = 	""

Wenn Sie Ihre Konfigurationen in config.yml haben, sollte es so aussehen:

deployment:
  targets:
    name: "lfs3"
    URL: "s3://microsoft.com?region=ap-southeast-2"
    cloudFrontDistributionID:	"E123123123"
  1. Speichern Sie diese Datei
  2. Erstellen Sie Ihre Website
hugo
  1. Deployen Sie sie mit hugo deploy Befehl
hugo deploy
  1. Öffnen Sie die URL Ihrer Website im Browser, um zu prüfen, ob alles funktioniert hat

Ich hoffe, dieser kleine HowTo-Dokumentation hilft Ihnen. Haben Sie einen schönen Tag!