Gatsby-Website deployen

Einführung

Um eine Gatsby-Anwendung auf Square Cloud zu entwickeln und zu hosten, ist es wichtig, einer strukturierten Abfolge von Konfigurationen und Voraussetzungen zu folgen. Dieser technische Leitfaden deckt den gesamten Prozess ab, von der anfänglichen Einrichtung bis zum Produktions-Deployment.

Voraussetzungen

Square Cloud Konto: Registriere dich über die Registrierungsseite mit deiner E-Mail-Adresse.
Aktiver Plan: Stellt dedizierte Ressourcen und optimierte Leistung für deine Anwendung sicher. Sieh dir unsere verfügbaren Pläne an und wähle den passendsten für deine Bedürfnisse.

Diese Anleitung nutzt die statische Runtime oder die Node.js-Runtime. Getestet mit Gatsby 5 auf Node.js 24 im September 2026.

Projekt erstellen

Du brauchst Node.js und npm auf deinem Rechner. Falls du sie noch nicht hast, lade sie von der offiziellen Node.js-Website herunter. Erstelle ein Projekt mit dem offiziellen Initializer:

npm create gatsby@latest

Der Initializer fragt nach dem Namen der Website, dem Ordner und Optionen wie TypeScript und einem CMS und installiert dann die Abhängigkeiten. Wechsle in den erstellten Ordner:

cd <your-site-folder>

Starte den Entwicklungsserver mit npm run develop (er lauscht auf http://localhost:8000). Die Seiten liegen in src/pages/: Bearbeite src/pages/index.js (oder index.tsx), um die Startseite zu ändern.

Für die Produktion bauen

npm run build

Gatsby schreibt die Website in den Ordner public/, eine HTML-Datei pro Seite.

Auslieferung wählen

Ein Gatsby-Build ist eine statische Website: HTML-, CSS- und JavaScript-Dateien, die jeder Webserver ausliefern kann. Wähle eine dieser Optionen:

Statische Runtime (empfohlen)
Express-Server
serve-Paket

Die statische Runtime liefert die Dateien deines Builds über einen von Square Cloud verwalteten Webserver aus. Es läuft kein Node.js-Prozess, daher ist sie die schlankeste Art, eine Website ohne serverseitigen Code zu hosten.

Website bauen

Führe npm run build aus. Die Ausgabe landet im Ordner public.

Clientseitige Routen funktionsfähig halten

Wenn deine App die Seiten im Browser ohne Neuladen wechselt (clientseitiges Routing), benenne public/index.html in vite.html um. Die statische Runtime beantwortet jeden Pfad, der keine Datei ist, mit vite.html, sodass auch das Neuladen einer Route wie /about deine App lädt. Eine Website mit einer HTML-Datei pro Seite behält index.html: Unbekannte Pfade liefern dann deine 404.html. Siehe wie die statische Runtime Dateien ausliefert.

Konfigurationsdatei hinzufügen

Erstelle eine Datei squarecloud.app in public. Ein MAIN, das auf eine HTML-Datei zeigt, wählt die statische Runtime aus:

squarecloud.app

MAIN=vite.html
MEMORY=512
VERSION=recommended
DISPLAY_NAME=My website
SUBDOMAIN=mywebsite

Verwende MAIN=index.html, wenn du index.html behalten hast. 512 MB sind der Mindestspeicher für eine Website. Beim Upload über das Dashboard wirst du nach diesen Werten gefragt, und die Datei wird für dich erstellt.

Build-Ausgabe zippen

Zippe den Inhalt von public, nicht den Ordner selbst, damit squarecloud.app im Stammverzeichnis der ZIP-Datei liegt. Mit der CLI führst du squarecloud upload innerhalb von public aus.

Alles in der ZIP-Datei ist auf deiner Website öffentlich. Lade nur die Build-Ausgabe hoch, niemals deinen Quellcode oder .env-Dateien.

Die meisten Build-Tools leeren public bei jedem Build. Lege eine Kopie von squarecloud.app in den Ordner, den dein Framework unverändert in den Build kopiert (public/ in Vite-basierten Projekten), oder wiederhole die letzten drei Schritte nach jedem Build.

Diese Option betreibt einen kleinen Express-Server auf der Node.js-Runtime. Installiere Express als reguläre Abhängigkeit, nicht als devDependency, denn diese installiert Square Cloud nicht:

npm install express

Erstelle eine Datei server.mjs im Stammverzeichnis deines Projekts. Sie liefert den Build-Ausgabeordner public aus und gibt für jeden anderen Pfad index.html zurück, damit das clientseitige Routing weiter funktioniert:

server.mjs

import express from 'express';
import path from 'node:path';

const app = express();
const distPath = path.join(import.meta.dirname, 'public');

app.use(express.static(distPath));

// SPA fallback: serve index.html for any route not matched above
app.use((req, res) => {
  res.sendFile(path.join(distPath, 'index.html'));
});

// Square Cloud sets PORT=80; 0.0.0.0 accepts connections from outside the container
const port = Number(process.env.PORT) || 80;
app.listen(port, '0.0.0.0', () => console.log(`Server running on port ${port}`));

Um den Server auf deinem Rechner auszuprobieren, wähle einen freien Port: PORT=3000 node server.mjs.Erstelle eine Datei squarecloud.app im Stammverzeichnis deines Projekts. Square Cloud startet deine Website mit node server.mjs:

squarecloud.app

MAIN=server.mjs
MEMORY=512
VERSION=recommended
DISPLAY_NAME=My website
SUBDOMAIN=mywebsite

Führe npm run build aus, bevor du deine ZIP-Datei erstellst. Die ZIP-Datei braucht server.mjs, package.json, squarecloud.app und den Ordner public, ohne node_modules: Square Cloud installiert deine Abhängigkeiten beim ersten Start. Build-Tools sind meist devDependencies, die Square Cloud nicht installiert, deshalb muss der Build auf deinem Rechner laufen.

Diese Option betreibt das Paket serve auf der Node.js-Runtime, ganz ohne eigenen Servercode. Installiere es als reguläre Abhängigkeit:

npm install serve

Füge den scripts deiner package.json ein Skript start:prod hinzu, neben den bereits vorhandenen:

package.json

"scripts": {
  "start:prod": "serve -s public"
}

serve -s public liefert den Build-Ausgabeordner public im Single-Page-Modus aus: Jeder Pfad, der keine Datei ist, gibt index.html zurück, damit das clientseitige Routing weiter funktioniert. serve lauscht auf allen Netzwerkschnittstellen, auf dem Port aus der Umgebungsvariable PORT, die Square Cloud auf 80 setzt (lokal fällt er auf 3000 zurück).Erstelle eine Datei squarecloud.app im Stammverzeichnis deines Projekts:

squarecloud.app

RUNTIME=nodejs
START=npm run start:prod
MEMORY=512
VERSION=recommended
DISPLAY_NAME=My website
SUBDOMAIN=mywebsite

RUNTIME=nodejs wählt die Node.js-Runtime ohne MAIN-Datei aus, und START ersetzt den Standard-Startbefehl.Führe npm run build aus, bevor du deine ZIP-Datei erstellst. Die ZIP-Datei braucht package.json, squarecloud.app und den Ordner public, ohne node_modules: Square Cloud installiert deine Abhängigkeiten beim ersten Start. Build-Tools sind meist devDependencies, die Square Cloud nicht installiert, deshalb muss der Build auf deinem Rechner laufen.

Gatsby schreibt eine HTML-Datei pro Seite, behalte auf der statischen Runtime also index.html (keine Umbenennung in vite.html): Deine Seite src/pages/404.js wird zur 404.html, die unbekannte Pfade beantwortet. Damit squarecloud.app Builds übersteht, lege die Datei in den Ordner static/: Gatsby kopiert diesen Ordner unverändert nach public/.

Diese Anleitung behandelt statische Gatsby-Websites. Seiten mit serverseitigem Rendering (getServerData), Deferred Static Generation oder Gatsby Functions brauchen einen Gatsby-Server und werden hier nicht behandelt.

Deployen und prüfen

Erstelle die ZIP-Datei, die in der gewählten Option beschrieben ist, und lade sie dann hoch:

Über das Dashboard

Upload-Seite aufrufen

Rufe die Upload-Seite auf und lade die ZIP-Datei deines Projekts hoch.

Umgebung konfigurieren

Nachdem du deine ZIP-Datei hochgeladen hast, musst du den Namen, die Hauptdatei oder Runtime-Umgebung und weitere Einstellungen für dein Projekt konfigurieren.
Wenn du ein Web-Projekt hochlädst, achte darauf, “Web Publication” auszuwählen und deinem Projekt eine Subdomain zuzuweisen.

Projekt bereitstellen

Klicke abschließend auf die Schaltfläche “Deploy”, um dein Projekt auf Square Cloud zu hosten.
Nach dem Deploy kannst du den Status und die Logs deines Projekts über das Dashboard überwachen.

Anwendung wird auf Square Cloud hochgeladen

Bestätige, dass deine App live ist

Dein erstes Deploy dauert in der Regel weniger als eine Minute. Warte im Dashboard, bis der Status deiner Anwendung als “running” angezeigt wird, und prüfe die Logs auf Startfehler.
Wenn du eine Website oder API bereitgestellt hast, öffne https://<deine-subdomain>.squareweb.app in deinem Browser: du solltest sehen, dass deine Anwendung reagiert. Wenn du einen Bot bereitgestellt hast, sende ihm einen Befehl, um zu bestätigen, dass er online ist.

App startet nicht? Im Leitfaden zur Fehlerbehebung findest du die häufigsten Ursachen und Lösungen.

Über die CLI

Um diese Methode zu nutzen, braucht dein Projekt eine Konfigurationsdatei mit dem Namen squarecloud.app im Stammverzeichnis. Sie teilt Square Cloud mit, wie deine Anwendung ausgeführt wird.

Leitfaden zur Konfigurationsdatei

Erfahre, wie du die Konfigurationsdatei squarecloud.app erstellst, die die Umgebung deiner Anwendung definiert.

CLI installieren

Installiere die Square Cloud CLI. Falls du sie bereits hast, führe denselben Befehl aus, um sie zu aktualisieren:

curl -fsSL https://cli.squarecloud.app/install | bash

npm install -g @squarecloud/cli@latest

Anmelden

Führe den folgenden Befehl aus. Er öffnet deinen Browser: Bestätige dort die Anmeldung, und die CLI ist einsatzbereit. Es gibt keinen API-Schlüssel zu kopieren. Für Skripte und CI siehe CLI-Authentifizierung.

squarecloud auth login

Projekt hochladen

Führe in deinem Projektordner den folgenden Befehl aus. Die CLI packt den aktuellen Ordner als ZIP, lässt dabei weg, was in der squarecloud.ignore steht, und lädt ihn hoch:

squarecloud upload

Um eine selbst erstellte ZIP-Datei hochzuladen, übergib sie mit --file:

squarecloud upload --file <path/to/zip>

Bestätige, dass deine App live ist

Dein erstes Deploy dauert in der Regel weniger als eine Minute. Prüfe den Status und die Logs deiner Anwendung direkt im Terminal:

squarecloud app status
squarecloud app logs

Wenn du eine Website oder API bereitgestellt hast, öffne https://<deine-subdomain>.squareweb.app in deinem Browser: du solltest sehen, dass deine Anwendung reagiert. Wenn du einen Bot bereitgestellt hast, sende ihm einen Befehl, um zu bestätigen, dass er online ist.

App startet nicht? Im Leitfaden zur Fehlerbehebung findest du die häufigsten Ursachen und Lösungen.

Häufige Fehler

Eigene Domain

Um eine eigene Domain (z. B. mysite.com) anstelle der Standard-URL mysite.squareweb.app zu verwenden, benötigst du den Standard-Plan oder höher. Die Standard-URL ergibt sich aus dem Feld SUBDOMAIN in der Konfigurationsdatei. Um deine Domain zu verbinden, folge der Anleitung wie du deine eigene Domain einrichtest.

Mindestanforderungen an den Arbeitsspeicher

Minimum: 512MB RAM für Websites und APIs, genug für einen statischen Build auf der statischen Runtime. Für Apps, die Seiten auf einem Server rendern (Next.js, Nuxt, Angular SSR und ähnliche), empfehlen wir mindestens 1GB RAM. Für größere Anwendungen solltest du mehr RAM zuweisen, damit der Anwendung nicht der Speicher ausgeht und sie abstürzt.

Diese Seite konnte nicht gefunden werden.

Prüfe, ob die Subdomain/Domain mit dem übereinstimmt, was im Feld SUBDOMAIN oder in den Einstellungen der eigenen Domain konfiguriert ist. Wenn du die Seite gerade erst hochgeladen hast, warte bis zu 60 Sekunden, bis Square den ersten Zugriff aktiviert.

Die Seite hat zu lange zum Antworten gebraucht…

Dein Server muss auf Port 80 und Host 0.0.0.0 lauschen. Square Cloud setzt in deiner Anwendung die Umgebungsvariablen PORT (80) und HOST (0.0.0.0): Lies sie in deinem Code aus, statt andere Werte fest einzutragen. Ein Server, der nur auf localhost oder 127.0.0.1 lauscht, erhält nie Anfragen.

Nächste Schritte

Umgebungsvariablen

Halte Geheimnisse und Einstellungen aus deinem Code heraus und lies sie zur Laufzeit.

Eigene Domain

Stelle deine App unter deiner eigenen Domain bereit, ab dem Standard-Plan.

Fehlerbehebung

Behebe Probleme mit einer App, die nicht startet, oder einer Website, die nicht antwortet.

Mehr über Gatsby findest du in der offiziellen Gatsby-Dokumentation.

Kontaktiere uns

Falls du weiterhin technische Schwierigkeiten hast, steht dir unser spezialisiertes Support-Team zur Verfügung. Kontaktiere uns und wir helfen dir gerne, jedes Problem zu lösen: die Qualität unseres Supports ist ein wichtiger Grund, warum Entwickler Square Cloud mit 4,9/5 bei 402 Bewertungen auf Google und Trustpilot bewerten.

Bots

Websites

APIs und Backends

Datenbanken

Selbst gehostete Apps

Anleitungen

Migrationsleitfäden

Gatsby-Website deployen

Einführung

Voraussetzungen

Projekt erstellen

Für die Produktion bauen

Auslieferung wählen

Deployen und prüfen

Über das Dashboard

Über die CLI

Leitfaden zur Konfigurationsdatei

Häufige Fehler

Eigene Domain

Mindestanforderungen an den Arbeitsspeicher

Diese Seite konnte nicht gefunden werden.

Die Seite hat zu lange zum Antworten gebraucht…

Nächste Schritte

Umgebungsvariablen

Eigene Domain

Fehlerbehebung

Kontaktiere uns

​Einführung

​Voraussetzungen

​Projekt erstellen

​Für die Produktion bauen

​Auslieferung wählen

​Deployen und prüfen

​Über das Dashboard

​Über die CLI

Leitfaden zur Konfigurationsdatei

​Häufige Fehler

​Eigene Domain

​Mindestanforderungen an den Arbeitsspeicher

​Diese Seite konnte nicht gefunden werden.

​Die Seite hat zu lange zum Antworten gebraucht…

​Nächste Schritte

Umgebungsvariablen

Eigene Domain

Fehlerbehebung

​Kontaktiere uns

Einführung

Voraussetzungen

Projekt erstellen

Für die Produktion bauen

Auslieferung wählen

Deployen und prüfen

Über das Dashboard

Über die CLI

Häufige Fehler

Eigene Domain

Mindestanforderungen an den Arbeitsspeicher

Diese Seite konnte nicht gefunden werden.

Die Seite hat zu lange zum Antworten gebraucht…

Nächste Schritte

Kontaktiere uns