website-starterkit

GT 1191 Starterkit

Mit dem Starterkit des Seminars GT 1191 der HAWK Hochschule für angewandte Wissenschaft und Kunst kannst du im Handumdrehen neue Websites entwickeln.

Das Starterkit nutzt das Build-Tool Parcel und ist vorkonfiguriert mit CSS Nesting und Custom media queries sowie PostHTML für die Erstellung von reponsiven websites (mobile first).

Voraussetzungen

Um mit dem Starterkit arbeiten zu können, musst du vorab den Paketmanager Node.js auf deinem Computer installieren:

Zur Installationsanleitung

Ein neues Projekt starten

Um mit dem Starterkit loszulegen, musst du ein neues Projekt anlegen. Führe den folgenden Befehl im Terminal aus:

npm create gt1191-starterkit

Du wirst hier Schritt für Schritt durch den Prozess geführt.

Entwicklung

Ist das Starterkit eingerichtet, kannst du mit der Entwicklung deiner Website anfangen. Der folgende Befehl startet einen Webserver, erstellt einen „Build“ deiner Website im Verzeichnis dist, öffnet diesen im Browser und zeigt Datenänderungen ohne Reload an:

npm run dev

Lässt sich das Starterkit im Fehlerfall – zum Beispiel nach dem Kopieren – nicht starten, gebe einmalig npm run clean in das Terminal ein.

Datei- und Verzeichnisstruktur

Folgende Verzeichnisse sind dabei zu beachten.

• src
  Das ist dein Arbeitsverzeichnis und enthält die das Template der Startseite index.html, sowie deine Unterseiten. Portfolio ist als Beispiel eingebunden.
• src/snippets
  enthält die HTML-Snippets (Codeschnipsel), die du mittels <include> in deine Website einbinden kannst. Praktisch für den Header oder Footer deiner Website, wenn du diese auf jeder Unterseite wiederverwenden möchtest.
• src/styles
  enthält die Stylesheet-Datei main.css, in der alle anderen CSS-Dateien zur besseren Organistation importiert werden. Daraus entsteht am Ende eine große CSS-Datei. Alle Vorgabgen darfst (und solltest) du gern anpassen oder ganz löschen.
• src/images
  enthält ein paar Beispielbilder (u. a. von Unsplash). Diese sind bereits in die Website eingebunden, damit du sehen kannst, wie das funktioniert.

Verwendung von Bildern

Das Starterkit unterstützt von Haus aus die Einbindung und Optimierung von Bildern. Nutze dazu bitte dafür die Beispiele und lese dir die Image-Dokumentation durch.

Vorsicht: Das Beispiel ist nicht responsiv oder mobil-optimiert. Es zeigt dir aber, wie du verschiedene Bildformate nutzen kannst.

Website veröffentlichen/versenden

Wenn du deine Website auf deinem eigenen Webserver veröffentlichen möchtest, muss diese einmal „gebacken” (build) werden. Folgender Befehl startet den Build-Prozess und legt das Ergebnis einer statischen Website im Verzeichnis dist ab. Dessen Inhalt kannst du dann mit FTP oder SSH auf deinen Webserver hochladen.

$ yarn build

Möchtest du deine Website zur Bewertung oder Benotung abgeben, verwende folgenden Befehl, um die Dateigröße vor dem zippen zu minimieren.

$ yarn deliver

Mit yarn install kannst du anschließend wieder weiterarbeiten.

$ npm run build