Hetzner ist ein deutscher Hosting-Anbieter, der eine günstige Einstiegsmöglichkeit für statische Websites bietet. Das ist ideal, um kleine Projekte oder eine persönliche Website zu veröffentlichen. In diesem Beitrag zeige ich dir, wie du eine statische Website bei Hetzner online bringst.

Schritt 1: Hetzner-Konto erstellen

Zuerst benötigst du ein Konto bei Hetzner. Du kannst dich hier registrieren. Nachdem du dein Konto erstellt hast, musst du nur noch deine E-Mail-Adresse bestätigen.

Schritt 2: Ein Projekt anlegen

Sobald dein Konto aktiv ist, geht es an die Bestellung. Gehe dazu auf die Webhosting-Seite und wähle das Einstiegspaket (Level 1). Du wirst dort durch einige Fragen geführt. Soweit ich sehen konnte, ist eine ⁠.de-Domain oft inklusive – für andere Endungen fallen Kosten an. Alternativ kannst du eine bestehende Domain nutzen oder Nameserver einrichten.

Schritt 3: Die statische Website vorbereiten

Gehen wir davon aus, dass du deine Website mit v0.dev erstellt hast. Klicke oben rechts auf den „Export“-Button und wähle „Download ZIP“. Damit lädst du nicht nur das Design, sondern ein vollständiges Next.js-Projekt herunter.

Entpacke den Ordner und öffne ihn in deinem Code-Editor.

💡
Du benötigst Node.js auf deinem Computer und solltest dich ein wenig mit dem Node-Paket-Manager (NPM) auskennen.

Next.js und React sind die Basis moderner Websites. Da diese Technologien komplex sind, kannst du sie nicht einfach so hochladen. Du musst das Projekt erst „bauen“ (builden), damit daraus einfache HTML-, CSS- und JavaScript-Dateien werden.

Bevor du das machst, müssen wir eine kleine Einstellung ändern. Öffne die Datei ⁠next.config.ts und füge folgende Zeilen hinzu:

const nextConfig =a{
  output: "export",
}
module.exports = nextConfig

Damit sagst du Next.js, dass das Projekt als einfache, statische Website erstellt werden soll. Führe nun folgenden Befehl in deinem Terminal aus:

npm run build

Dadurch wird ein neuer Ordner namens ⁠out erstellt. Er enthält alle Dateien, die für deine Website notwendig sind.

Schritt 4: Website hochladen (Deployment)

Gehe nun zurück in dein Hetzner-Konto, öffne dein Webhosting-Projekt und suche den Bereich für webFTP. Starte eine FTP-Sitzung und navigiere in den Ordner ⁠public_html. Lösche alle Dateien, die sich dort befinden, und kopiere stattdessen den Inhalt deines ⁠out-Ordners hinein. Fertig! Deine Website ist nun im Browser erreichbar.

💡
Bei mir hat die Verschlüsselung (SSL) nicht sofort funktioniert. In der Hetzner-Konsole steht, dass es einige Minuten dauern kann, bis alles aktiv ist – vermutlich, weil die Domain erst noch verifiziert werden muss. Ich halte dich auf dem Laufenden, sobald ich mehr weiß.