Setup Flow ~ 60 Min

Tooling One-Pager für deinen sauberen Semesterstart

Ziel: Du kannst heute lokal entwickeln, sauber versionieren und zuverlässig auf Hosting deployen – ohne Chaos.

Was am Ende funktionieren muss
  • VS Code ist installiert
  • SFTP in VS Code ist korrekt konfiguriert
  • GitHub + GitHub Desktop sind eingerichtet
  • Hostpoint Credentials sind getestet
  • Projektworkflow ist sauber und nachvollziehbar
Wichtige Regel

Sauber arbeiten ist Teil der Bewertung.
Nicht nur Resultat zählt, sondern auch: Struktur, Versionierung und Deploy-Hygiene.

Projektstart-Bibel (immer gleich starten)
  • Projektordner an einem sinnvollen Ort (nicht Desktop oder Download) lokal erstellen und benennen.
  • Projektordner in VS Code öffnen.
  • GitHub Repository anlegen und publishen.
  • SFTP verbinden und ersten Testupload machen.
Projektvorlage (Download)

Nutze diese Vorlage als Startpunkt für neue Modulprojekte, damit Struktur und Dateien direkt passen.

⬇ Vorlage herunterladen (ZIP)

02 · VS Code 10 Min

Visual Studio Code + Basis Extensions

VS Code muss installiert sein. Danach Erweiterungen sauber nachziehen.

↗ VS Code Download
↗ SFTP Extension (Natizyskunk)
↗ GitHub Copilot (optional mit Education)

  1. Lade VS Code herunter und installiere es.
  2. Öffne VS Code einmal neu nach der Installation.
  3. Gehe links auf Extensions und installiere SFTP (Natizyskunk).
  4. Optional: Melde dich bei VS Code mit GitHub an.
03 · SFTP 15 Min

SFTP Konfiguration (Copy / Paste)

Du wirst hier Schritt für Schritt geführt – damit SFTP im richtigen Projektordner sofort sauber funktioniert.

Was heisst „Projektordner öffnen“?
  • Du öffnest in VS Code genau den von dir angelegten Projektordner mit deiner Website (z. B. mein-im-projekt).
  • Darin liegen deine Dateien und Ordner wie index.html, css/styles.css, js/script.js.
  • Achte darauf, dass du nicht aus Versehen einen übergeordneten Ordner, wie z. B. Desktop, Downloads oder den ganzen Benutzerordner öffnest.
  • Quick-Check: In VS Code links im Explorer siehst du oben den Namen deines Projektordners (z. B. mein-im-projekt).
SFTP-Datei im Projekt erstellen (genau so)
  1. Projektordner öffnen in VS Code (nicht den Desktop, Downloads oder übergeordneten Ordner).
  2. Command Palette öffnen: CMD + SHIFT + P (Mac) / CTRL + SHIFT + P (Windows).
  3. Tippen: SFTP: Config und ausführen.
  4. VS Code erstellt automatisch den Ordner .vscode mit der Datei sftp.json.
  5. Den gesamten Inhalt unten einfügen, Platzhalter ersetzen, speichern.

🔴 Pflicht-Schritt: Ohne diese SFTP-Konfiguration funktioniert dein Upload/Deploy nicht zuverlässig. 

{
  "name": "hostpoint-main",
  "host": "replace-this-hostname",
  "protocol": "ftp",
  "port": 21,
  "username": "replace-this-username",
  "password": "replace-this-password",
  "remotePath": "/",
  "uploadOnSave": true,
  "ignore": [
    ".vscode",
    ".git"
  ]
}
Sauber arbeiten mit SFTP
  • Immer im richtigen Projektordner arbeiten.
  • Vor erstem Sync: kleine Testdatei deployen und URL checken.
  • Nie fremde/alte Projekte überschreiben (remotePath prüfen).
  • Credentials niemals in README/Code committen.
04 · GitHub 20 Min

GitHub Account + GitHub Desktop

FHGR Mail für Education Benefits nutzen, danach in GitHub Desktop ein neues Projekt sauber aufsetzen.

↗ GitHub Education
↗ GitHub Desktop

Projekt in GitHub Desktop erstellen (klick-genau)
  1. GitHub Desktop öffnen
  2. Add ▾ klicken
  3. Create New Repository... wählen
  4. Repository Name setzen (z. B. im1-portfolio-max-muster)
  5. Lokalen Pfad zu deinem Projektordner auswählen.
  6. Create Repository klicken
  7. Publish repository klicken
GitHub Desktop Übersicht
GitHub Desktop: Repository-Übersicht mit Changes/History.
GitHub Desktop Create New Repository
Add ▾ → Create New Repository… Genau hier startest du ein neues Projekt.
Repository nach Abgabe auf Public stellen (optional, wenn gefordert)
  1. GitHub im Browser öffnen und ins richtige Repo gehen.
  2. Settings → ganz nach unten zu Danger Zone.
  3. Change repository visibility wählen.
  4. Auf Make public stellen und bestätigen.
  5. Vorher unbedingt Secrets/Passwörter prüfen.
GitHub Repository Settings
Settings: Dort findest du die Sichtbarkeit im Bereich Danger Zone.
GitHub public visibility confirmation
Make public: Letzte Bestätigung der Sichtbarkeit.

🔴 Pflicht-Schritt: .gitignore schützt dich vor peinlichen/leaken Dateien im Repository. 

.DS_Store
config.php
.vscode
.env
node_modules
Sauber arbeiten mit GitHub (Pflicht)
  • Commit-Historie in kleinen, verständlichen Schritten.
  • Klare Commit-Messages (feat:, fix:, chore:).
  • Keine Secrets/API-Keys im Repo.
  • Vor Public-Schaltung immer Secret-Check machen.
05 · Hostpoint 15 Min

Hostpoint Zugang + FTP Credentials holen

Login meist mit vorname.nachname@stud.fhgr.ch, danach FTP Daten in sftp.json eintragen.

Hostpoint Klick-Checklist (genaue Reihenfolge)
  1. Login mit vorname.nachname@stud.fhgr.ch
  2. Hosting / richtigen Service öffnen (Promotion Smart Server)
  3. Server Bereich öffnen
  4. FTP bzw. FTP Accounts öffnen
  5. Falls noch nicht geschehen: neue FTP Account erstellen.
    ACHTUNG: Passwort muss sicher gespeichert werden!
  6. Hostname, Username, Passwort kopieren
  7. Daten in .vscode/sftp.json einsetzen und speichern
  8. In VS Code: SFTP: Sync Local -> Remote ausführen
Kurz-Ausflug: Subdomains (z. B. projektname.deinedomain.ch)
  • Subdomain in Hostpoint unter Domains/Zone verwalten erstellen.
  • Subdomain auf den korrekten Webpfad zeigen lassen.
  • Danach Upload testen und Browser-Cache einmal leeren.
  • Für Modulprojekte: lieber kurze, klare Subdomain-Namen nutzen.
Hostpoint Login und Service Übersicht
Schritt A: Login und richtigen Service/Hosting-Bereich wählen. (Klick zum Vergrössern)
Hostpoint Server Übersicht
Schritt B: Serverübersicht öffnen und zu FTP wechseln. (Klick zum Vergrössern)
Hostpoint FTP Accounts
Schritt C: Host, Username, Passwort übernehmen und in VS Code testen. (Klick zum Vergrössern)
06 · Mac / Windows 8 Min

MacBook Lane vs. Windows Lane

Damit niemand bei Shortcuts oder Menüs hängen bleibt: beide Wege klar nebeneinander.

🍎 MacBook Lane
  • Command Palette: CMD + SHIFT + P
  • Datei speichern: CMD + S
  • Suche im Projekt: CMD + SHIFT + F
  • SFTP Sync: Command Palette → SFTP: Sync Local -> Remote
  • GitHub Desktop: Publish + Commit aus dem App-Fenster
🪟 Windows Lane
  • Command Palette: CTRL + SHIFT + P
  • Datei speichern: CTRL + S
  • Suche im Projekt: CTRL + SHIFT + F
  • SFTP Sync: Command Palette → SFTP: Sync Local -> Remote
  • GitHub Desktop: Publish + Commit aus dem App-Fenster
Wichtigste Punkte für beide Lanes
  • Immer zuerst den korrekten Projektordner öffnen.
  • Kein Copy-Paste von Passwörtern in Code-Dateien.
  • Vor Abgabe: Repo aufräumen, letzte Live-URL prüfen, dann erst final committen.
07 · Workflow 10 Min

Qualitäts-Loop pro Projekt

Diesen Loop pro Arbeitsblock sauber fahren:

Plan
Scope 1 Satz
Build
lokal coden
Commit
klar benannt
Sync
Push + SFTP
Check
Live testen
Checkliste pro Arbeitsblock
  • Plan (1 Satz Ziel) vor dem Start geschrieben
08 · Final 5 Min

Done-Definition

  • VS Code + SFTP + GitHub Desktop laufen
  • Repo ist sauber geführt (Commits nachvollziehbar)
  • Deployment auf Hosting funktioniert reproduzierbar
  • Keine sensiblen Daten im Repo