Meine statische Website
OK, jeder macht es, sogar ich mache es: Statische Websites. Es ist schnell, es ist sicher, es erledigt die Berechnungen dort, wo sie hingehören (solange Sie keine ausgefallene Anpassung benötigen, warum sollte ein Server darüber nachdenken, wie die Seite zur Lesezeit aussieht?). Diese Seite 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.
Daher benötige ich ein anderes Setup. Ich plane, mir einige verschiedene statische Website-Systeme anzusehen und eine Liste von Kriterien zu erstellen, 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 Syntaxhervorhebung
-
Automatisierte Konsistenzprüfung, d.h. die generierte Website ist korrekt, vollständig, die Verweise zeigen nicht ins Nirwana…
-
Fähigkeit, 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 an registrierte Benutzer per E-Mail 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
- Möglichkeit, Dinge hinzuzufügen, z.B. Bildverarbeitungsprozess
- Mindestens eine Programmiersprache, die ich ein wenig 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
Evaluationsmatrix
| 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…), ermöglicht 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 Sie an die Generierung einer statischen Website aus einer Basis von Markdown-Dateien denken, wird es schnell natürlich, nach einem guten Editor zu suchen. Was wir von unserem Editor erwarten:
- Markdown-Vorschau
- Vorschau einschließlich des CSS und anderer Transformationen, die unser Site-Generator verwendet - um sicherzustellen, dass wir das gleiche Ergebnis sehen, wie es in der Produktion angezeigt wird
- Vorschau einschließlich Bilder. Dies könnte nicht trivial sein, da die Bilder möglicherweise in DEV auf einem anderen Pfad als in PROD gespeichert sind… Insgesamt bedeutet dies, dass der Editor einen Kompilierungs-/Kompositionsprozess starten muss, der die Webansicht jedes Mal 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