bUwUma - Build System für Webseiten

Build Websites using Make

bUwUma ist ein Build-System, welches GNU make und einen Präprozessor verwendet, um statische, mehrsprachige Websites zu erstellen.

bUwUma liefert folgende Funktionen:

Markdown in die HTML Dateien einbinden
Nutzung von Variablen
Konditionale Kontrollstrukturen (if, else)
SASS Unterstützung
Generierung einer XML Sitemap
Generierung von allen notwendigen favicons aus einer Datei
Generierung von Thumbnails für Videos, Audiodateien und PDFs
Generierung Web-Optimierter Versionen von Bildern
Generierung eines (Seiten-)Navigationsmenüs anhand von HTML Überschriften und anpassbaren Links
Einfache Erstellung einer Seite in mehreren Sprachen

Herangehensweise

bUwUma versucht, das Erstellen einer klassischen Webseite (html+css+javascript) nach dem DRY und KISS Prinzip zu ermöglichen. Das bedeutet: Wiederholungen reduzieren und es Simpel halten, damit das Projekt auch in der Zukunft wartbar ist.

Die Erstellung einer Website mit bUwUma ist ähnlich zur Erstellung eines C-Projekts: Man hat ein source (Quell-) und ein build Verzeichnis. Die Quelldateien, also alle HTML-, CSS- und Javascript-Dateien sowie alle Ressourcen wie Bilder und Schriftarten, kommen in das Quellverzeichnis. make baut dann die Webseite und legt sie im build Verzeichnis ab. Dieses kann dann auf den Webserver kopiert werden.

Build-Prozess

Während dem Build-Prozess passiert folgendes:

HTML Dateien werden vom Präprozessor bearbeitet. Dieser setzt dann sämtliche Variablen ein und bindet zusätzliche Dateien in das Dokument ein (zum Beispiel ein Head, Footer, oder Text in Markdown). Zusätzlich kann aus dem Inhalt ein Seitennavigationsmenü generiert und eingefügt werden. Das resultierende HTML-Dokument wird im build Verzeichnis abgelegt.
Eine Sitemap im XML Format wird im build Verzeichnis erstellt. Sie enthält Einträge für alle Dateien, in denen der Präprozessor einen sitemap include Befehl gefunden hat.
SASS Dateien werden von einem SASS-Compiler kompiliert und die resultierenden CSS-Dateien im build Verzeichnis abgelegt.
Favicons werden aus einem einzigen Bild erstellt. Dazu gehören das klassische favicon.ico sowie favicon.png, apple-touch-icon.png, android-chrome.png und mstile.png Varianten.
Thumbnails werden für alle gewünschten Dateien im gewünschten Format im build Verzeichnis erstellt
Web-optimierte Verseionen werden für alle gewünschten Bilder im gewünschten Format im build Verzeichnis erstellt
Alle anderen Quelldateien (CSS, Javascript, Resourcen wie Bilder und Fonts) werden in das build Verzeichnis kopiert.

Wenn ein Feature nicht gebraucht wird, kann es im Makefile abgeschaltet werden.

$ cd ~/Website/src

$ make

Making directory ../www/de/

Making directory ../www/en/

Building html de/kontakt.html at ../www/de/kontakt.html

Building html in lang de: common/index.html at ../www/de/index.html

Building html in lang en: common/index.html at ../www/en/index.html

Making directory ../www/style/

Building: style/style.css at ../www/style/style.css

$ ls ../www

de en style

$ ls ../www/de

index.html kontakt.html

$ make clean

Erste Schritte

Um eine Webseite mit bUwUma zu erstellen, muss man nach der Installation der Abhängigkeiten nur ein paar gut dokumentierte Optionen im Makefile anpassen und eine handvoll Befehle des Präprozessors lernen. Diese sollten ziemlich intuitiv sein.

bUwUma ist für Unix entwickelt, benötigt allerdings nur eine geeignete Terminalumgebung. Dadurch kann im Windows Subsystem für Linux (WSL) oder direkt in Windows genutzt werden, sofern die notwendigen Abhängigkeiten installiert sind.

Abhängigkeiten

GNU Make:

< s p a n c l a s s = " u n a c c e n t e d " > [M a c O S] (h t t p s : / / f o r m u l a e . b r e w . s h / f o r m u l a / m a k e) - [W i n d o w s] (h t t p s : / / c o m m u n i t y . c h o c o l a t e y . o r g / p a c k a g e s / m a k e) - a u f f a s t a l l e n L i n u x - D i s t r o s b e r e i t s i n s t a l l i e r t] - * * P o s i x k o n f o r m e S h e l l * * : z . B . b a s h o d e r z s h \[< s p a n c l a s s = " u n a c c e n t e d " > b e r e i t s v o r h a n d e n a u f L i n u x u n d M a c O S < / s p a n >] - * * P y t h o n > = 3.10 * * - O p t i o n a l : - [* * d a r t - s a s s * *] (h t t p s : / / s a s s - l a n g . c o m / d a r t - s a s s /) : f ü r d i e K o m p i l i e r u n g v o n s a s s - [* * i m a g e m a g i c k * *] (h t t p s : / / i m a g e m a g i c k . o r g / s c r i p t / d o w n l o a d . p h p) : f ü r d i e G e n e r i e r u n g v o n F a v i c o n s u n d d a s E r s t e l l e n v o n T h u m b n a i l s - [* * p o p p l e r * *] (h t t p s : / / p d f 2 i m a g e . r e a d t h e d o c s . i o / e n / l a t e s t / i n s t a l l a t i o n . h t m l) : f ü r d i e G e n e r i e r u n g v o n T h u m b n a i l s f ü r P D F s - * * f f m p e g * * : f ü r d i e E r s t e l l u n g v o n T h u m b n a i l s f ü r A u d i o d a t e i e n < s p a n c l a s s = " u n a c c e n t e d " > \[[M a c O S] (h t t p s : / / f o r m u l a e . b r e w . s h / f o r m u l a / f f m p e g) - [W i n d o w s] (h t t p s : / / c o m m u n i t y . c h o c o l a t e y . o r g / p a c k a g e s / f f m p e g) - a u f f a s t a l l e n L i n u x - D i s t r o s b e r e i t s i n s t a l l i e r t] < / s p a n > # # # I n s t a l l a t i o n C o D e R e P l A c E m E n T p K N d C w M Z B M L q l n x D Y o i s t a u f [g i t h u b] (h t t p s : / / g i t h u b . c o m / M a t t h i a s Q u i n t e r n / b U w U m a) u n d a u f m e i n e m [g i t e a] (h t t p s : / / g i t . q u i n t e r n . x y z / M a t t h i a s Q u i n t e r n / b U w U m a) v e r f ü g b a r . E s k a n n m i t g i t i n s t a l l i e r t w e r d e n : < c o d e c l a s s = " t e r m i n a l - s p a n " > g i t c l o n e h t t p s : / / g i t h u b . c o m / M a t t h i a s Q u i n t e r n / b U w U m a < / c o d e > A l t e r n a t i v k a n n m a n a u c h e i n f a c h [C o D e R e P l A c E m E n T Z a P U c C J k o h r F b E W B z x] (h t t p s : / / g i t h u b . c o m / M a t t h i a s Q u i n t e r n / b U w U m a) u n d [C o D e R e P l A c E m E n T D q K I R m f J k C X i U i n M P L] (h t t p s : / / g i t h u b . c o m / M a t t h i a s Q u i n t e r n / b U w U m a) v o n d e n o b i g e n L i n k s h e r u n t e r l a d e n . # # # K o n f i g u r a t i o n 1 . P f a d e i m C o D e R e P l A c E m E n T a g i h I e j E c A q W Q Q m u i c a n p a s s e n . D i e V a r i a b l e n i n d e r D a t e i s e l b s t d o k u m e n t i e r t 2 . C o D e R e P l A c E m E n T l H n M K C P b p R Z E x C U m G I a u s f ü h r e n u n d ü b e r p r ü f e n, o b d i e A u s g a b e d e n E r w a r t u n g e n e n t s p r i c h t 3 . C o D e R e P l A c E m E n T a G V J u K l T B b J w L R k j Y h a u s f ü h r e n u n d z u r ü c k l e h n e n! # # # n g i n x I m R e p o l i e g t z u s ä t z l i c h l i e g t e i n e C o D e R e P l A c E m E n T l z q Q A l z r T p d S J o H R L e, i n d e r m a n n u r d i e C o D e R e P l A c E m E n T E U i j U F F A R X U I V i I h G o V a r i a b l e a n p a s s e n m u s s . A n s c h l i e ß e n d k a n n d i e W e b s i t e m i t C o D e R e P l A c E m E n T g n T K T R H e z B k s Q W q z F R l o k a l g e t e s t e t w e r d e n . # # # H T M L - P r ä p r o z e s s o r D e r H T M L - P r ä p r o z e s s o r e r l a u b t d i e V e r w e n d u n g v o n V a r i a b l e n, C o D e R e P l A c E m E n T a L V i d c k l m f w K R w F h Y b u n d C o D e R e P l A c E m E n T Z A B T O D x a g k x B i c Y s D r K o n t r o l l s t r u k t u r e n s o w i e B e f e h l e n w i e C o D e R e P l A c E m E n T H m T w j N D h R Q X I n T W q i g, ä h n l i c h w i e d e r * C * - P r ä p r o z e s s o r . S ä m t l i c h e B e f e h l e s i n d i m [R e a d m e d e s G i t H u b R e p o s] (h t t p s : / / g i t h u b . c o m / M a t t h i a s Q u i n t e r n / b u w u m a) d o k u m e n t i e r t . H i e r d a s w i c h t i g s t e k u r z z u s a m m e n g e f a s s t : - A l l e B e f e h l e b e f i n d e n s i c h i n H T M L - K o m m e n t a r t a g s, d a m i t d a s S y n t a x H i g h l i g t i n g n i c h t d u r c h e i n a n d e r k o m m e n - E i n B e f e h l m u s s e n t w e d e r i n e i n e m e i g e n e n K o m m e n t a r s t e h e n o d e r i n e i n e r e i g e n e n Z e i l e (i n m e h r z e i l i g e n K o m m e n t a r e n) - V a r i a b l e n k ö n n e n ü b e r a l l (o h n e K o m m e n t a r t a g s) b e n u t z t w e r d e n m i t : C o D e R e P l A c E m E n T z K D n l i w k w n O Z Z q I v b P H i e r d i e w i c h t i g s t e n B e f e h l e : - C o D e R e P l A c E m E n T g I F G W r r q F o J G i h c R N e : F ü g t e i n e a n d e r e D a t e i a n d i e s e r S t e l l e e i n . M a r k d o w n D a t e i e n w e r d e n b e i d i e s e m S c h r i t t i n H T M L k o n v e r t i e r t - C o D e R e P l A c E m E n T A U L H a k h B O L z D t Z x Y E c : W e i ß t e i n e r V a r i a b l e e i n e n W e r t z u D e r C o D e R e P l A c E m E n T l D l k Q a F p s p n q y o t z q L B e f e h l e r m ö g l i c h t z u m B e i s p i e l e i n e n e i n z i g e n H T M L - C o D e R e P l A c E m E n T f j P X T z g v I W w f q g j s I L f ü r a l l e D a t e i e n z u v e r w e n d e n, i n d e m d i e s e r i n e i n e m s e p a r a t e n H T M L g e s p e i c h e r t u n d d a n n m i t C o D e R e P l A c E m E n T D B S L N J V m U O G I z r C x c Y e i n g e f ü g t w i r d . W e n n m a n d a n n f ü r j e d e H T M L - D a t e i e i n e n e i g e n e n T i t e l v e r w e n d e n w i l l, k a n n v o r d e m C o D e R e P l A c E m E n T r L T W K D U v h t r m k z g l n x B e f e h l e i n e V a r i a b l e g e s e t z t w e r d e n, w e l c h e d a n n i m C o D e R e P l A c E m E n T C n z k v A y l b K w F b P p q P d T a g g e n u t z t w i r d . <! - - # s i d e n a v n a m e M e h r s p r a c h i g e W e b s e i t e n - - > < h 3 i d = " m u l t i l a n g " > E r s t e l l e n e i n e r W e b s i t e i n m e h r e r e n S p r a c h e n < / h 3 > W e n n m a n e i n e m e h r s p r a c h i g e S e i t e m ö c h t e, k ö n n t e m a n e i n f a c h a l l e D a t e i e n ü b e r s e t z e n a u s e i n e r S p r a c h e ü b e r s e t z e n u n d i n e i n e m a n d e r e n V e r z e i c h n i s s p e i c h e r n . D a s g e h t v i e l l e i c h t r e c h t s c h n e l l, w e n n m a n a b e r s p ä t e r e t w a s b e i d e n S p r a c h e n ä n d e r n m ö c h t e, z . B . d a s L a y o u t, d a s S t y l e s h e e t o d e r B i l d e r, w i r d d a s z i e m l i c h n e r v i g . C o D e R e P l A c E m E n T L X W q V y C D w Q x G h D l k x y b i e t e t e i n e m z w e i b e s s e r e M ö g l i c h k e i t e n : 1 . M a n s c h r e i b t e i n e H T M L - V o r l a g e u n d z w e i o d e r m e h r D a t e i e n, d i e d e n e i g e n t l i c h e n T e x t e n t h a l t e n (d e r a u c h i n * M a r k d o w n * g e s c h r i e b e n w e r d e n k a n n!) u n d f ü g t d i e s e i n d i e V o r l a g e e i n, w o b e i d i e s p e z i e l l e C o D e R e P l A c E m E n T X Y d R C B f q B d P Z T A y A T W V a r i a b l e g e n u t z t w e r d e n k a n n s o d a s s m a n n u r e i n e K o p i e d e r V o r l a g e b e n ö t i g t . 2 . M a n s c h r e i b t j e w e i l s e i n e H T M L - D a t e i f ü r b e i d e S p r a c h e n u n d e i n e, w e l c h e d i e T e i l e e n t h ä l t, d i e b e i d e S p r a c h e n g e m e i n s a m h a b e n (z . B . e i n e R e i h e v o n B i l d e r n), u n d f ü g t d a n n d i e g e m e i n s a m e D a t e i i n d i e a n d e r e n e i n . N a t ü r l i c h k ö n n e n a u c h b e i d e L ö s u n g e n k o m b i n i e r t w e r d e n . R E P L H A S H D O L L A R (l i c e n s e_{g} p l_{d} e)