Voraussetzungen
-
VS Code Ein Texteditor für das Schreiben und Hinzufügen der Webseiteninhalte
-
git Ein Versionsmanager (wird verwendet um die Seite zu veröffentlichen)
-
node Eine Javascript-Laufzeitumgebung
-
yarn Ein Paketmanager für die Installation von Bibliotheken
Webseite erstellen
Damit wir uns nicht zu stark um das Aussehen/Mobile Ansicht/Darkmode etc. kümmern müssen, verwenden wir Docusaurus. Die Schritte zum Erstellen einer neuen Seite sind auf der Docusaurus-Seite erklärt.
Der Befehl
npx create-docusaurus@latest my-website classic --typescript
erzeugt einen neuen Ordner my-website. Diesen öffnen wir nun in VS-Code.
Über Terminal > New Terminal wird ein neues Eingabefenster (direkt in VS Code) erzeugt. Mit dem Befehl yarn run start wird die Webseite gestartet und in einem Browser geöffnet. (Falls nicht, kann sie unter http://localhost:3000 abgerufen werden).
Das Grundgerüst ist vorhanden, aber noch nicht nach unserer Vorstellung. In der Datei docusaurus.config.json können viele Grundeinstellungen festgelegt werden:
Einfacheres Handling
# fügt die Möglichkeit für SASS-Styled css hinzu
yarn add docusaurus-plugin-sass sass
# .css -> .scss
mv ./src/css/custom.css ./src/css/custom.scss
{
/*...*/
plugins: ['docusaurus-plugin-sass'],
/*...*/
}
Github Actions
Erstelle einen neues Dokument .github/__workflows/documentation.yml
Docusaurus