Meine statische Website
OK, jeder macht es, sogar ich mache es: Statische Websites. Sie sind schnell, sicher und erledigen die Berechnungen dort, wo sie hingehören (solange du keine ausgefallenen Anpassungen brauchst, warum sollte ein Server darüber nachdenken, wie die Seite zur Lesezeit aussieht?). Diese Seite hier ist statisch (erstellt mit JBake und gehostet auf Github). Es hat Spaß gemacht, sie einzurichten, sie funktioniert großartig - aber ich könnte meiner Mutter nicht erklären, wie man sie benutzt oder wie man Inhalte darauf veröffentlicht. Und darum sollte es bei einem CMS gehen: Es muss in erster Linie benutzbar sein.
Deshalb brauche ich ein anderes Setup. Ich plane, mir einige verschiedene statische Website-Systeme anzusehen und eine Liste von Kriterien aufzustellen, anhand derer ich die verschiedenen Generatoren testen möchte…
Kriterien
- Themes
- Viele
- Schön
-
Responsiv
-
Einfach zu schreiben
- Editor mit Vorschau
- Einfache Handhabung und Referenzierung von Bildern
- Bilder in der Vorschau
- Videos
- Tabellen
- Code mit Syntax-Highlighting
-
Automatisierte Konsistenzprüfung, d.h. die generierte Website ist korrekt, vollständig, die Verweise zeigen nicht ins Nirwana…
-
In der Lage sein, eine Accelerated Mobile Page zu erstellen
- Funktionale Features & Seiten
- Tags, Tag-Seiten, Tag-Cloud (könnte auch eine Erweiterung sein)
- Veröffentlichbar auf Github (es ist sehr schnell, kostenlos und zuverlässig)
- Website privat machen, d.h. nur für registrierte Mitglieder zugänglich
- Veröffentlichung per E-Mail
- Kommentare per E-Mail
- Nachrichten per E-Mail an registrierte Benutzer senden
- Bilder für schnelle Lieferung verkleinern
- Einfach neue Themes erstellen, Themes sollten nur CSS sein
-
Basierend auf anderem HTML, z.B. Bootstrap-Themes
-
Erweiterbare Architektur
- Kann Dinge hinzufügen, z.B. Bildgrößenänderungsprozess
- Mindestens eine Programmiersprache, die ich ein bisschen kenne - oder die ich neugierig bin zu lernen (das reduziert es im Grunde auf Java und JavaScript)
- Das generierte HTML sollte so einfach wie möglich sein. Alle Formatierungen befinden sich im CSS
Generatoren
Beim Durchsuchen der Literatur (und Github) ist dies die Liste der Generatoren, die ich mir wahrscheinlich ansehen sollte:
- Jekyll - Erledigt
- Harp JS - Erledigt
- Hugo - Erledigt
- Metalsmith - Erledigt
- Nikola - Erledigt
- Octopress - Erledigt
- Hexo - Erledigt
- Hyde - Erledigt
- Pelican - Erledigt
- Nanoc - Erledigt
- Middleman - Erledigt
- Lektor - Erledigt
- Gatsby - Erledigt
- Expose - Erledigt
- Wintersmith - Erledigt
- Doc pad - Erledigt
- kirby - Erledigt
Bewertungsmatrix
| Generator | Programmiersprache | Themes | Formate | Kommentar |
|---|---|---|---|---|
| Jekyll | Ruby — | Viele ++ | Markdown, Textile, Liquid ++ | |
| Harp JS | NodeJS ++ | Einige 00 | Markdown, EJS, Jade, LESS, Stylus… ++ | |
| Hugo | GO — | Einige 00 | Markdown, asciidoc, reStructure ++ | |
| Metalsmith | Node JS — | Sieht sehr flexibel aus. Siehe auch http://dbushell.com/2015/05/11/wordpress-to-metalsmith/ | ||
| Nikola | Python — | Wenige — | reStructuredText, Markdown, | Sieht nur so lala aus… |
| Octopress | Python — | Einige 00 | Ist nur ein Paket um Jekyll. | |
| Hexo | Node JS ++ | Einige 00 | Markdown, verschiedene Geschmacksrichtungen, Jekyll Plugins ++ | Sieht sehr flexibel aus, verwendet Standard-Template-Engines (EJS, Jade, Swig…), erlaubt die Integration von Skripten und Plugins. ++ |
| Hyde | Python — | Wenige — | ||
| Pelican | Python — | |||
| Nanoc | Ruby — | |||
| Moddleman | Python — | |||
| Lektor | Python — | |||
| Gatsby | Node JS, React | Keine — | Markdown 00 | Sieht sehr flexibel aus, aber ziemlich komplex… |
| Expose | Shell-Skripte — | Markdown und Bilderordner | Speziell für Bilderseiten. | |
| Wintersmith | Node JS, CoffeeScript ++ | Wenige — | Markdown, Jade, … | Sieht sehr flexibel aus, LESS, Sass, Stylus. Könnte etwas komplex sein… |
| DocPad | Node JS ++ | Keine — | Markdown und andere ++ | Sieht flexibel, aber komplex aus |
| kirby | PHP — | Markdown |
Als Ergebnis sollte ich mir Harp JS, Metalsmith, Hexo und Wintersmith genauer ansehen.
Nach einem schnellen Durchlesen der Websites der oben genannten Tools habe ich mich entschieden, es mit Metalsmith zu versuchen.
Editoren
Wenn du an die Generierung einer statischen Seite aus einer Basis von Markdown-Dateien denkst, wird es schnell natürlich, nach einem guten Editor zu suchen. Was wir von unserem Editor wollen:
- Markdown-Vorschau
- Vorschau inklusive CSS und anderer Transformationen, die unser Site-Generator verwendet - um sicherzustellen, dass wir dasselbe Ergebnis sehen, wie es in der Produktion angezeigt wird
- Vorschau inklusive Bilder. Dies könnte nicht trivial sein, da die Bilder in DEV möglicherweise auf einem anderen Pfad als in PROD liegen… Insgesamt bedeutet dies, dass der Editor einen Kompilierungs-/Kompositionsprozess starten muss, der jedes Mal die Webansicht erzeugt, wenn die Markdown-Quelle geändert wurde.
Editoren, die wir uns ansehen
| Editor | Markdown / HTML Vorschau | Kommentare |
|---|---|---|
| Visual Code | ? | Könnte etwas Passendes haben |
| Atom | ||
| Brackets | ||
| Caret.io | ||
| IA Writer | Behauptet es… |
… wahrscheinlich noch einige mehr…
Geschichte
- August 2016: Diese Seite gestartet
- Jan 2017: Fortgesetzt während des Aufenthalts in Thailand mit der Familie, Tomi & Beate