Mit der wundervollen Welt von JAMstack, die immer größer wird, sind alle Kategorien von Diensten und Tools, die sie unterstützen, wichtiger denn je. Es gibt Static Site Generatoren, headless CMSs und statische Dateihosts.
Ich denke, diese Klassifizierungen sind praktisch und helfen Gesprächen weiter. Aber es gibt einen Punkt, an dem Nuancen notwendig sind und diese Klassifizierungs-Eimer ein wenig undicht werden.
Hinweis: Diese Diagramme sollen nur ein Spektrum abbilden und keine umfassende Liste von Diensten sein.
Headless CMSs
Ein Headless CMS ist ein CMS, das einen Admin-Bereich zum Erstellen und Bearbeiten von Inhalten bereitstellt, aber keine Benutzeroberfläche zum Erstellen der Website bietet. Alle Inhalte werden über APIs abgerufen.
Stellen Sie sich WordPress vor, das einen Admin-Bereich hat, aber auch Themes, mit denen Sie die Website serverseitig erstellen können, mit allen möglichen PHP-Funktionen, mit denen Sie die Inhaltsdaten verwenden können. All diese Theming-Sachen sind der „Kopf“. Ein Headless CMS wäre also wie WordPress mit *nur* dem Admin-Bereich. Und tatsächlich können Sie es so verwenden, da es APIs anbietet.
Es gibt hier noch mehr Nuancen, da es Dienste gibt, die einen Admin-Bereich anbieten, aber die Daten nicht tatsächlich für Sie speichern. Außerdem gibt es CMS, die für Sie gehostet werden, und CMS, bei denen Sie Ihr eigenes Hosting mitbringen müssen. Schauen wir mal.
| Dienst | Headless? | Hosting | Notizen |
|---|---|---|---|
| Contentful | Ja | Cloud | Ein klassisches Headless CMS |
| Sanity | JSON-Datenstruktur, über APIs zugänglich, benutzerdefinierter Admin-Bereich ist selbst gehostet | ||
| Cockpit | Selbst | Kommt mit Admin-UI | |
| Strapi | |||
| KeystoneJS | Alles Code, nicht einmal eine Admin-UI | ||
| WordPress | So lala – Normalerweise mit Kopf verwendet | Selbst oder Cloud | Hat einen Kopf, aber Sie müssen ihn nicht verwenden, Sie wählen, nur APIs zu verwenden, um auf Inhalte zuzugreifen, wenn Sie möchten. |
| Drupal | Selbst | ||
| CraftCMS | Selbst | Hat speziell einen Headless-Modus und eine GraphQL-API. Craft Cloud wird eine Cloud-gehostete Headless-Variante bringen | |
| NetlifyCMS | So lala – Speichert tatsächlich keine Inhalte, hilft nur bei der Bearbeitung. | GUI für Git-gehostetes Markdown | |
| Forestry | Cloud | ||
| Joomla | Nein | Selbst | Ein klassisches CMS mit Kopf |
| Squarespace | Cloud | Site-Builder, gedacht für gehostete/mit Kopf versehene Websites | |
| Wix |
Static Site Hosts
Das ist schwierig zu diskutieren, da buchstäblich jeder Webhost statische Dateien hosten kann und das wahrscheinlich gut macht. Ich denke, es ist am nützlichsten, Hosts zu betrachten, die *nur* statisches Hosting *absichtlich* betreiben, da dies bedeutet, dass sie für diese Situation optimieren und andere nützliche Dinge tun können.
| Dienst | Notizen |
|---|---|
| Netlify | Der Goldstandard unter den Hosts für statische Dateien. Entwicklerfreundliche Annehmlichkeiten in Hülle und Fülle. |
| Cloudflare Workers Sites | CDN-erstes statisches Dateihosting neben einem Cloud-Funktionsdienst. |
| Firebase Hosting | Firebase ist eine ganze Suite von Teilprodukten, aber das Hosting ist insbesondere statisch und über ein CDN. |
| GitHub Pages | Host für statische Dateien, aber führt auch Jekyll und andere Aktionen aus. Ist kein CDN. |
| Neocities | Host für statische Dateien mit Online-Editor und Community. |
| S3 | Rohdatenspeicherung. Kann konfiguriert werden, um ein Webhost zu sein. Kein CDN, es sei denn, Sie stellen CloudFront davor. |
| Bluehost | Nicht wirklich ein Host für statische Dateien. |
| MediaTemple | |
| Hostgator |
Manchmal sieht man Leute, die versuchen, Dienste wie Dropbox oder Google Drive für das Hosten statischer Dateien (für eine Website) zu verwenden, aber ich habe festgestellt, dass diese Dienste das im Allgemeinen letztendlich nicht mögen und die Nutzung dafür verhindern. Wenn es heute funktioniert, ist es gut, aber ich würde mich nicht langfristig auf sie verlassen.
Static Site Generators
Man würde meinen, diese Kategorie wäre unkompliziert und würde nicht viel Spektrum aufweisen. Ein Static Site Generator nimmt Eingaben und erstellt statisch generierte Seiten, die ohne eine Datenbankabfrage gerendert werden können. Aber selbst hier gibt es ein Spektrum.
Die *Sprache*, in der der Generator geschrieben ist, spielt eine Rolle. Sie beeinflusst die Geschwindigkeit. Sie beeinflusst die Installierbarkeit auf verschiedenen lokalen Plattformen. Sie beeinflusst Ihre Fähigkeit, Code zu schreiben, um ihn zu erweitern und zu modifizieren.
Aber vielleicht noch wichtiger: Nicht alle Static Site Generators sind nur Static Site Generators. Einige können seltsamerweise auch auf dem Server ausgeführt werden. Und es gibt einige, die zwar wie Static Site Generators *aussehen*, aber korrekter als Flat-File-CMS klassifiziert werden.
| Software | Sprache | Notizen |
|---|---|---|
| Jekyll | Ruby | Einer der Ursprünge dieser Generation von Static Site Generators. |
| Hugo | Go | Bekannt für Geschwindigkeit. |
| 11ty | Node | Verarbeitet 11 verschiedene Vorlagensprachen out-of-the-box. |
| Gatsby | React | Gatsby ist wirklich ein Static Site Generator, aber im Allgemeinen "hydrieren" die Websites zu SPAs, bleiben aber statisch (nichts serverseitig gerendert). Großes Ökosystem von Plugins, die bei der Verbindung von Datenquellen, der Bildverarbeitung usw. helfen. |
| Next | Next kann Static Site Generation durchführen, aber es kann auch live in Node laufen und serverseitiges Rendering on-the-fly durchführen ("Isomorphic JavaScript"). | |
| Nuxt | Vue | Nuxt ist der spirituelle Begleiter von Next, aber in Vue. Es kann entweder statisch generiert oder isomorph ausgeführt werden. |
| Kirby | PHP | Kirby läuft aus statischen Dateien (keine Datenbank), ist aber nicht wirklich eine statische Website, da die Seiten von PHP gerendert werden. |
| Statamic | Statamic ist Kirby ähnlich, da statische Dateien für Daten verwendet werden, die Seiten selbst aber von PHP gerendert werden. | |
| Perch | Nur ein Beispiel für ein CMS, das Daten in einer Datenbank speichert und überhaupt kein Static Site Generator sein möchte. |
Hallo Chris! Danke, dass du das zusammengestellt hast. Ich dachte, Cloud Cannon wäre eine großartige Ergänzung zu dieser Liste. Es ist ein cloudbasiertes CMS, das sich mit Ihrem Git-Repository verbindet und Commits erstellt, wenn Sie Beiträge speichern. Es ist nur für Jekyll. Sie hosten auch Ihre Website für Sie. Wir verwenden es seit 2 oder 3 Jahren in unserem Unternehmen. Es war ein großartiges Werkzeug, das es Nicht-Entwicklern ermöglicht, Blog-Beiträge über eine schöne GUI zu schreiben... sie erstellen Markdown-Dateien und wissen es nicht einmal.
Hallo,
Keine Worte über Prismic CMS und sein leistungsstarkes Slices-Konzept :(
Wenn Sie es noch hinzufügen möchten, glaube ich, dass es unter Headless CMS + Cloud + Was ist das Besondere daran: Die Slices im CMS, die Makro-Komponenten (Header, Slider, Bildergalerie) in Ihrem Code entsprechen, eingeordnet werden sollte.
Offenlegung: Ich arbeite bei Prismic ;) Ping mich, wenn du es ausprobieren und mehr darüber erfahren möchtest!
Es gibt auch Gridsome, den spirituellen Begleiter von Gatsby, aber in Vue. Es ist noch in der Beta-Phase, aber es ist ziemlich gut.
Ein weiteres Cloud-gehostetes Headless CMS, das erwähnenswert ist, ist Prismic (https://prismic.io/), ich benutze es als Alternative zu Headless WordPress + Advanced Custom Fields.
Vielen Dank für dieses erstaunliche JAMStack-Spektrum!
In diesem Zusammenhang und für Hugo sollten wir zwischen der Codebasis und dem Code, den der Entwickler tatsächlich schreiben wird, unterscheiden.
Obwohl Hugo in Go geschrieben ist, muss kein Hugo-Entwickler eine einzige Zeile Go schreiben (es ist nicht einmal möglich). Es mag sich ändern, aber im Moment ist Go Template die einzige Sprache, um die sich der fortgeschrittenste Hugo-Entwickler jemals kümmern muss.
Wie immer ein toller Artikel!
Ich verstehe, dass Sie diese Tabellen ewig füllen könnten. Aber...
Ich glaube wirklich, Gridsome sollte auf der SSG-Tabelle stehen, so wie Nuxt für Vue Next ist, ist Gridsome für Vue Gatsby.
Außerdem denke ich, Sanity.io verdient es, auf der CMS-Liste zu stehen :D
Danke für den Beitrag! Ich habe mich in den letzten Wochen mit der Welt der Static Site Gens beschäftigt. Ich wollte GetPelican und Lektor hinzufügen. Beide sind Python, wobei letzteres ein statisches CMS ist.
Und auch Hexo. 100% ist ein Site-Generator. Ähnlich wie Hugo
Beachten Sie diese Zeile aus dem Artikel
Es gab viel von "WAS IST MIT MEINEM LIEBLINGSDING", was ich eigentlich liebe, aber dieser Artikel verliert an Wert, wenn es um jeden Dienst auf der Welt geht.
Dafür nehme ich gerne Ihre Pull Requests auf https://serverless.css-tricks.com entgegen
Hallo Chris! Danke für diesen Artikel!
Ich bin Gründer und leitender Entwickler von Flextype CMS.
Es wäre toll, wenn Sie mein Haustierprojekt http://flextype.org ausprobieren und rezensieren könnten
Mit Flextype haben Sie die vollständige Kontrolle. Gestalten Sie Ihre Datenstruktur so, wie Sie möchten. Aktualisieren und teilen Sie Ihre Daten mit anderen und Teams mithilfe der Versionskontrolle. Flextype benötigt keine MySQL-Datenbank, da alle Daten in einfachen Dateien gesammelt werden.