Zum Hauptinhalt springen
Die statische Runtime liefert HTML, CSS, JavaScript, Bilder und andere Dateien direkt aus deiner ZIP-Datei aus, über einen Webserver, den Square Cloud verwaltet. Es gibt keinen eigenen Prozess, der laufen muss, deshalb ist sie der schlankeste Weg, eine Website zu veröffentlichen.

​
Bevor du beginnst

  • Ein Texteditor für deine HTML- und CSS-Dateien, zum Beispiel Visual Studio Code.
  • Ein Square Cloud-Konto: Registriere dich mit deiner E-Mail-Adresse oder mit GitHub.
  • Ein aktiver Plan. Sieh dir die Pläne an und wähle den, der zu deinem Projekt passt.

​
Statische Websites und serverseitig gerenderte Apps

Eine statische Website ist eine Sammlung von Dateien, die für alle Besucher gleich ist: einfache HTML-Seiten oder die Build-Ausgabe eines Frameworks wie Vite, React, Vue, Angular, Astro oder Gatsby. Die statische Runtime liefert diese Dateien unverändert aus. Eine serverseitig gerenderte App erzeugt Seiten bei jeder Anfrage mit Servercode, etwa mit Next.js, Nuxt, React Router oder einer API. Sie braucht einen Prozess, der dauerhaft läuft, und läuft deshalb auf einer Sprach-Runtime wie der Node.js-Runtime, mit einer MAIN-Datei oder einem START-Befehl. Wenn dein Framework beides kann, ist ein statischer Build die leichtere Wahl. Jeder Framework-Leitfaden zeigt, welche Optionen er unterstützt.

​
Square Cloud konfigurieren

Wenn du deine Anwendung über das Dashboard hochlädst, kannst du diesen Abschnitt überspringen: Das Dashboard erstellt die Konfigurationsdatei squarecloud.app für dich.

Referenz zur Konfigurationsdatei

Die Datei squarecloud.app sagt Square Cloud, wie deine Anwendung ausgeführt wird: ihre Hauptdatei, ihr Arbeitsspeicher, ihre Runtime-Version, ihr Name und, bei einer Website, ihre Subdomain.
Ein MAIN, das auf eine HTML-Datei zeigt, wählt die statische Runtime:
squarecloud.app
512 MB sind der Mindestspeicher für eine Website und reichen für statische Dateien völlig aus.

​
Wie die statische Runtime Dateien ausliefert

  • Das Stammverzeichnis der ZIP-Datei ist das Stammverzeichnis deiner Website: about.html wird unter /about.html ausgeliefert und blog/index.html unter /blog/.
  • / liefert vite.html, falls vorhanden, sonst index.html.
  • Wenn ein Pfad zu keiner Datei passt, liefert die Runtime vite.html, falls vorhanden. So funktionieren clientseitige Routen von Single-Page-Apps auch nach dem Neuladen, unabhängig vom Framework: Benenne die index.html des Builds in vite.html um.
  • Ohne vite.html liefern unbekannte Pfade deine 404.html oder, falls du keine hast, eine Standard-404-Seite.
  • Dateien werden beim Ausliefern komprimiert, und deine squarecloud.app-Datei wird nie ausgeliefert.
Jede Datei in der ZIP-Datei ist öffentlich. Lade keinen Quellcode, keine .env-Dateien und nichts anderes hoch, das Besucher nicht herunterladen sollen.

​
Projekt vorbereiten

Lege deine Dateien in das Stammverzeichnis der ZIP-Datei, neben squarecloud.app:
  • index.html oder vite.html für eine Single-Page-App.
  • Dein CSS, JavaScript, Bilder und Schriften, in beliebiger Ordnerstruktur.
  • 404.html, optional: die Seite für Pfade, die nicht existieren.
Bei einem Framework-Build zippst du den Inhalt des Ausgabeordners, nicht den Ordner selbst.

​
Framework-Leitfäden

Jeder Leitfaden zeigt den Build-Befehl, den Ausgabeordner und wie du das Ergebnis auf der statischen Runtime veröffentlichst.

Vite

React

Vue

Angular

Astro

Gatsby

Preact

Qwik

SolidJS

Nuxt

​
Fehlerbehebung

Auf der Seite steht “Hi, I’m Square Shield”: Die Runtime hat im Stammverzeichnis der ZIP-Datei weder index.html noch vite.html gefunden. Wahrscheinlich hast du den Build-Ordner selbst gezippt statt seines Inhalts: Zippe die Dateien darin.
Deine Single-Page-App verarbeitet Routen im Browser. Benenne ihre index.html in vite.html um, damit unbekannte Pfade die App laden, und passe MAIN an.
Bei anderen Problemen hilft die Fehlerbehebung.

​
Deployen

​
Über das Dashboard

1

Upload-Seite aufrufen

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

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.
3

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
4

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.
1

CLI installieren

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

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.
3

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:
Um eine selbst erstellte ZIP-Datei hochzuladen, übergib sie mit --file:
4

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:
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.

​
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.

​
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.