Contentful als CMS aufsetzen, ohne programmieren zu können

Tutorial: Ein Headless-CMS (Contentful) in Verbindung mit einem Static Site Generator (Gatsby) aufsetzen und eine Website (und Progressive Web App) in der Cloud (Netlify) hosten - schnell, kostenlos und ohne programmieren zu können.

Vorweg: Ich habe in der Vergangenheit schon mit Wordpress und frei erhältlichen Themes und Plugins experimentiert, was ja relativ einfach ist. Nichtsdestotrotz wollte ich (auch berufsbedingt) wissen, ob es möglich ist, ein Headless-CMS wie Contentful zum Laufen zu bekommen, ohne programmieren zu können. Es eignet sich als schlanke Alternative für die eher langsamen CMSe Wordpress, Drupal, Joomla & Co. Den kompletten Prozess habe ich mit dieser Website durchgespielt.

Was ist ein Headless-CMS?

Im Gegensatz zu traditionellen Content Management Systemen wie Wordpress, Drupal, Typo3 etc. erfolgt bei einem Headless-CMS eine Trennung zwischen Inhalt und Layout, die Kommunikation mit den Frontends der jeweiligen Plattformen und weiteren Services erfolgt über die API. Weiterer Lesestoff hier, hier und hier.

Was du brauchst

• Zugang zum Terminal (am Mac "terminal" in die Suche eingeben)
• Einen Text-Editor (ich nutze Atom von Github, der kostenlos verfügbar ist)
• Account bei Github
• Account bei Contentful (der Free Plan reicht für kleine Projekte vollkommen aus)
• Account bei Netlify (der Free Plan reicht auch hier aus)
• Node.js und NPM (hier installieren)
• Ein fertiges, vorkonfiguriertes Blog-Template für dieses Setup, das Ryan Wiemer kostenlos bereitstellt (ziemlich cool, danke an Ryan). Es muss an dieser Stelle nicht heruntergeladen werden, mehr dazu weiter unten

Das wirst du am Ende haben

• Eine extrem schnelle responsive Website bestehend aus einer Homepage, Posts im Blog-Style, einem Kontaktformular und einer "Über mich"-Seite
• HTTPS
• Eine Progressive Web App
• Contentful als CMS
• Eine Sitemap
• Optional: Google Analytics

Schritt 1: Template clonen

Terminal öffnen. Über den folgenden Befehl clonen wir Ryans Template in einen neuen Ordner "neueseite":

git clone https://github.com/ryanwiemer/gatsby-starter-gcn.git neueseite

Dann in das neue Verzeichnis wechseln (cd = change directory):

cd neueseite

Im neuen Verzeichnis über folgenden Befehl installieren:

npm install

Schritt 2: Contentful einrichten

Bei Contentful einen neuen Space einrichten:

In dem neu erstellten Space auf Settings > API keys > Add API Key. Dort bekommt man die Space ID sowie die Access Tokens für die Content Delivery API und die Content Preview API. Diese drei Keys zwischenspeichern, wir brauchen sie gleich.

Danach im Reiter "Content management tokens" einen personal token generieren. Auch diesen abspeichern (wichtig: Diesen Token unbedingt dauerhaft an einem gesicherten Ort speichern).

Danach wieder das Terminal öffnen. Den Befehl npm run setup eingeben und die Keys dort eintragen. Nachdem das durch ist, steht die Seite und in Contentful sind diverse Einträge vorhanden.

Im Terminal npm run develop eingeben. Nachdem auch das durch ist, können wir uns die Seite schon lokal im Browser über folgende URL anschauen: localhost:8000

Hinweis 1: Wenn du jetzt Änderungen in Contentful vornimmst (z.B. an einem Blog-Post), musst du im Terminal erst einen neuen Deploy starten. Dazu im Terminal control+c eingeben und danach wieder npm run develop.

Hinweis 2: Beachte, dass du von jedem Content Type (Post, Page, Tag) mindestens einen Eintrag haben musst. Sonst wird der Build-Prozess failen.

Okay, die Seite steht lokal soweit. Als nächstes kannst du deine eigenen Informationen in der siteConfig hinterlegen. Dazu im Text-Editor die Datei siteConfig.js öffnen (zu finden unter neueseite > src > utils > siteConfig.js und dort die Daten updaten.

Als nächstes solltest du bei Github ein neues Repository anlegen und deine lokalen Dateien dort hochladen.

Schritt 3: Die Seite via Netlify ins Netz bringen

Gehe im Netlify-Backend auf „Account settings“ und stelle dort eine Verbindung mit deinem Github-Account her.

Gehe danach auf Sites > New site from Git und wähle unter Continous Deployment Github aus. Dort kannst du dein Repository auswählen. Als nächstes kommst du in die deploy settings. Wähle Advanced build settings aus und gebe folgende Keys aus Contentful ein:

SPACE_ID

ACCESS_TOKEN

Alternativ kannst du hier auch deine Tracking-ID für Google Analytics eingeben, das habe ich an dieser Stelle noch nicht gemacht.

And then: „Deploy site“. Wenn das erfolgreich war, steht die Seite! Über "Trigger deploy" kannst du ab sofort manuell den Deploy anstoßen, wenn du etwas auf deiner Seite geändert hast. Hinweis an dieser Stelle: Beachte, dass in mindestens einem Blog und einer Page die Meta Description ausgefüllt ist. Sonst wird der Build-Prozess failen.

Das ganze sieht jetzt natürlich noch sehr rudimentär und nicht überall optimal aus (z.B. beginnen alle Wörter in Headlines mit Großbuchstaben 🙄 - figured it out -> text-transform: none;). Über Webhooks lassen sich außerdem noch ein paar Sachen komfortabler machen, z.B. lässt sich automatisch ein Deploy anstoßen, sobald in Contentful ein Post gepublished wird. Werde ich mir später anschauen.

Ach ja: Bei Netlify kann man entweder direkt eine Domain buchen, oder trägt eine vorhandene Domain ein (wie in meinem Fall) und schickt die DNS-Einträge von Netlify an seinen Provider mit der Bitte, das umzustellen. Geht auch ohne, dann muss man aber mit einer Subdomain von netlify.com auskommen.

Übrigens: Die Seite ist direkt als PWA verfügbar. Heißt: Wenn du die Seite auf deinem Smartphone im Browser aufrufst, kannst du sie über das Share-Icon zum Startbildschirm hinzufügen. Damit lässt sich die Seite wie eine App nutzen und ist sogar offline verfügbar.

Have fun!