> ## Documentation Index
> Fetch the complete documentation index at: https://docs.squarecloud.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Erste Schritte auf Square Cloud mit HTML/CSS

> Erfahre, wie du auf Square Cloud mit HTML/CSS loslegst

## 🚀 Einführung

* Stelle vor dem Start sicher, dass du einen geeigneten Texteditor zum Erstellen von HTML- und CSS-Dateien hast. Wir empfehlen [Visual Studio Code](https://code.visualstudio.com/) oder einen beliebigen anderen Editor deiner Wahl.
* Anschließend musst du ein Konto bei Square Cloud erstellen, was über die [Anmeldeseite](https://squarecloud.app/de/signup) möglich ist. Du kannst das Konto per E-Mail, GitHub oder beidem erstellen.
* Zuletzt benötigst du einen aktiven kostenpflichtigen Plan in deinem Konto. Du kannst unsere Pläne ansehen und einen passenden [hier](https://squarecloud.app/de/pricing) erwerben.

<Info>Square Cloud bietet native Unterstützung für statische Projekte, wie zum Beispiel HTML/CSS-Seiten. Das bedeutet, dass du dein HTML, CSS und andere statische Ressourcen problemlos auf der Plattform hosten kannst. Dank des integrierten Premium-CDN werden deine Seiten schnell an Nutzer weltweit ausgeliefert.</Info>

<Note>
  Wenn du deine Anwendung über die Square-Cloud-Website hochlädst, kannst du den folgenden Abschnitt ignorieren. Die Website erstellt die Konfigurationsdatei `squarecloud.app` automatisch für dich.
</Note>

## 📄 Erforderliche Dateien

* index.html (Beispiel für eine Hauptdatei).
* vite.html (Beispiel für eine Hauptdatei bei Vite-Projekten).
* 404.html (Datei für die Weiterleitung bei 404-Fehlern, optional).

## 🖥️ Das Projekt vorbereiten

Bevor du dein Projekt auf Square Cloud hostest, prüfe zunächst, ob die Projektdateien korrekt für das Hosting konfiguriert sind.

## 📤 So hostest du dein Projekt

Nachdem du nun alle Dateien für dein HTML/CSS-Projekt vorbereitet hast, besteht der nächste Schritt darin, sie auf Square Cloud hochzuladen und deine Anwendung online zu stellen. Es gibt mehrere Möglichkeiten zum Hochladen, wir behandeln jedoch zwei: über das Dashboard oder über die CLI.

### Über das Dashboard

<Steps>
  <Step title="Upload-Seite aufrufen">
    Rufe die [Upload-Seite](https://squarecloud.app/de/dashboard/new) auf und lade die ZIP-Datei deines Projekts hoch.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/dashboard/uploading.gif" alt="Anwendung wird auf Square Cloud hochgeladen" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Step>
</Steps>

### Über die CLI

Um diese Methode zu nutzen, musst du eine Konfigurationsdatei mit dem Namen `squarecloud.app` im Stammverzeichnis deines Projekts erstellen. Diese Datei enthält die notwendige Konfiguration für dein Projekt.

<Card title="Mehr erfahren: So erstellst du die Konfigurationsdatei für Square Cloud." icon="link" href="/de/getting-started/config-file">
  Die Datei squarecloud.app ist eine Konfigurationsdatei, mit der deine Anwendung konfiguriert wird; sie dient dazu, deine Umgebung zu definieren.
</Card>

<Steps>
  <Step title="CLI installieren">
    Zuerst musst du die CLI in deiner Umgebung installiert haben. Falls du sie noch nicht hast, führe den folgenden Befehl in deinem Terminal aus:

    ```
    npm install -g @squarecloud/cli
    ```

    Falls du sie bereits hast, empfehlen wir, sie zu aktualisieren. Führe dazu den folgenden Befehl in deinem Terminal aus:

    <Tabs>
      <Tab title="Windows">
        ```bash theme={null}
        squarecloud update
        ```
      </Tab>

      <Tab title="Linux, macOS und WSL">
        ```bash theme={null}
        curl -fsSL https://cli.squarecloud.app/install | bash
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Authentifizieren">
    Um dich zu authentifizieren und weitere CLI-Befehle zu nutzen, findest du deinen Autorisierungsschlüssel [hier](https://squarecloud.app/de/account/security), indem du auf "Request API Key" klickst. Nachdem du deinen Autorisierungsschlüssel erhalten hast, führe den folgenden Befehl aus:

    ```bash theme={null}
    squarecloud auth login
    ```
  </Step>

  <Step title="Projekt hochladen">
    Um deine Anwendung schließlich über die CLI auf Square Cloud bereitzustellen, musst du den folgenden Befehl ausführen:

    ```bash theme={null}
    squarecloud upload 
    ```

    Oder falls du die ZIP-Datei manuell erstellt hast, kannst du Folgendes verwenden:

    ```bash theme={null}
    squarecloud upload --file <path/to/zip> 
    ```
  </Step>
</Steps>

## Kontaktiere uns

Falls du weiterhin **technische Schwierigkeiten** hast, steht dir unser **spezialisiertes Support-Team** zur Verfügung. [**Kontaktiere uns**](https://squarecloud.app/de/support) und wir helfen dir gerne, jedes Problem zu lösen.