Blog
Vuepress: Hacks on The Harbour Website
arrow_back Zurück zum Blog
title image

Vuepress: Hacks on The Harbour Website

In diesem Blogeintrag klären wir die Vorteile von Vuepress, wann sich die Verwendung von Vuepress lohnt und welche Vorteile es für Unternehmen und ihre technischen Prozesse bietet.

Auch wenn Webseiten heute immer interaktiver und dynamischer werden, gibt es einzelne Seiten, für die eine statische Version absolut ausreicht. So zum Beispiel eine einfache Infoseite über einen Verein, ein Event, ein Blog oder für Dokumentationen. Die Umsetzung als statische Seite kann dabei Aufwand bei der Entwicklung sparen. Für Nutzer ist diese obendrein häufig sehr einfach zu verstehen sowie zu bedienen und die wichtigsten Informationen bekommen auf diese Weise ihre höchste Aufmerksamkeit. Eine lange Orientierung auf diesen Seiten ist daher nicht notwendig.

Mit Vuepess lassen sich einfach statische Seiten generieren, welche nur einmal vor dem Deployment gebaut werden müssen. Demnach ein einfacher “One-pager”, der schnell in seiner Umsetzung erfolgen kann – wie die Vereins- oder Eventseite. Die Seite wird also nicht wie bei Vue sonst üblich erst auf dem Endgerät des Nutzers generiert. Dadurch lädt die Seite schneller und spart auf dem Endgerät Rechenressourcen. Das heißt: Schnelle und einfach Umsetzung ohne lange Verzögerungen!

Vuepress oder statische Seiten? Was ist besser?

Warum sollte man überhaupt Vuepress nutzen, wenn man nicht gleich eine statische Seite schreiben könnte? – Vuepress bietet die Möglichkeit, Komponenten von Vue zu verwenden und somit die strukturierte Programmierung zu vereinfachen, da sich Komponenten immer wieder verwenden lassen und so der Code nicht immer wieder kopiert werden muss. Also eine höhere Flexibilität bei einfacher Erstellung!

Vuepress – Zeitsparend, effizient, schneller Einsatz!

Das Hauptargument, Vuepress zu nutzen, ist aber die Verwendung von Markdown zum Erstellen der statischen Seiten. Markdown ist ein Standard, um Texte inhaltlich zu gliedern – ähnlich wie LaTeX oder reines HTML.

Was bedeutet das für die Inhalte einer Seite genau? Mit Markdown lassen sich mittels einfacher Syntax Überschriften, Aufzählungen, Tabellen, etc. definieren – ohne, dass man viel Zeit für das richtige Formatieren des Textes benötigt. Vuepress rendert beim generieren der Seite die Markdown-Dateien als HTML raus. Für das Hosting wird lediglich ein einfacher Webserver wie Nginx oder Apache benötigt.

Eine Vereins- oder Eventseite ist dadurch nicht nur leicht anzupassen, sondern auch einfach in ihrer Optimierung und Pflege.

Vuepress bei der 54 Grad Software GmbH

Flexibilität und einfach Pflege: Genau deswegen haben wir uns bei der Hacks on the Harbour Website für den gemeinnützigen Chaostreff Flensburg e.V. für diese Lösung entschieden. Mit Vue-Press können die Inhalte auch der nach der Fertigstellung des Design einfach gepflegt und stets erweitert werden.

Der Text-Körper in der Mitte der Seite wird dabei aus einer Markdown-Datei generiert. Der Hintergrund sowie der Header und der Footer sind Vue-Komponenten. Um die Seite etwas interessanter zu gestelten, haben wir im Hintergrund eine Raketen-Animation mit dem Chaostreff-Logo hinzugefügt. Die Richtungs-Vektoren der Raketen werden mit Java-Skript zufällig generiert. Eine einfache technische Umsetzung mit einem nachhaltigen Mehrwert.

Die Website haben wir unentgeltlich für den Verein umgesetzt.

Interessiert an Vuepress?

Die Software der Website steht unter MIT Lizens zur Verfügung und ist auf Github zu finden. Die Website ist unter hoth.info zu erreichen.

Bei Fragen rund um das Thema Vuepress sowie individuelle Einsatzmöglichkeiten speziell für Ihr Anliegen erreichen Sie uns gerne jeder Zeit unter: >Kontakt<


weitere Beiträge:

Landesweiter Veranstaltungskalender

02.03.2026

80 Jahre Schleswig-Holstein – Der Smarte Gemeinschaftskalender

Artikel lesen

tavias.de

20.10.2025

Der Smarte Gemeinschaftskalender
Alle Termine im Blick – für eine starke Gemeinschaft

Artikel lesen

Förderzusage für den smarten Gemeinschaftskalender

09.12.2024

Wir starten in die Entwicklung!

Artikel lesen