Wie wir unsere Website mit Sanity als CMS aufgesetzt haben

Wie wir Sanity verwendet haben, um unsere Website zu aktualisieren

Wir haben vor Kurzem beschlossen unsere Unternehmenswebsite zu aktualisieren - ja, genau diese Seite, auf der Sie auch gerade diesen Blogbeitrag lesen.

Ich war begeistert, da wir eine aktuellere Website brauchten, die besser präsentiert, welche Leistungen wir anbieten und was wir in der Vergangenheit bereits geleistet haben.

Eine der weiterhin beliebtesten Optionen beim Erstellen einer Website, insbesondere wenn diese einen Blog haben soll, ist WordPress.

Aber die Zeiten haben sich geändert und es gibt heutzutage viel mehr Möglichkeiten, wenn Sie Entwickler sind und eine Website mit einem Content-Management-System (CMS) erstellen möchten.

Also hatte ich ein Gespräch mit unserem Chief Technology Officer (CTO) und mir wurde klar, dass uns viele Optionen zur Verfügung standen. Entsprechend wichtig war es, die richtigen Tools für unsere Bedürfnisse auszuwählen.

Wir hatten zum Beispiel erst kurz zuvor Hygraph zusammen mit Next.js für eines unserer Kundenprojekt verwendet. Wir dachten darüber nach, dieselbe Kombination zu verwenden, kamen jedoch zu dem Schluss, dass Hygraph nicht die richtige Lösung für die Erstellung des CMS für unsere Website ist.

Anstelle von Hygraph standen wir schlussendlich vor der Wahl, entweder Sanity oder Prismic zu verwenden.

Unser CTO überließ mir die endgültige Entscheidung, da ich der Hauptverantwortliche für die Entwicklung der Website sein würde. Nach sorgfältiger Überlegung entschied ich mich für Sanity, da es mehr von den Funktionen zu bieten schien, nach denen ich suchte, und der Einstieg wirklich schnell und einfach war.

Aber was genau ist Sanity?

Was ist Sanity?

Sanity bietet alles, was Sie brauchen, um Ihre eigene Content-Plattform zu erstellen.

Sanity wird mit einem Studio geliefert, einem Open-Source-Content-Management-System (CMS), das mit React.js erstellt wurde und das Sie genau nach Ihren Wünschen anpassen können.

Es ist bei Weitem eines der flexibelsten CMS, das mir begegnet ist, und die Möglichkeiten zur Content Verwaltung sind nahezu endlos.

Studio ermöglicht es Ihnen, Ihre eigenen Datentypen zu definieren und Ihre Daten nach Ihren Wünschen zu strukturieren.

Dann haben Sie den sogenannten “Content Lake”, in dem Ihre Inhalte von Sanity in der Cloud gespeichert und verwaltet werden.

Neben Studio und Content Lake, die bereits ein großartiges Paket sind, gibt es noch eine ganze Reihe an praktischen Plugins, Tutorials und eine sehr hilfreiche und freundliche Entwickler-Community.

Sicher fragen Sie sich, was Sanity kostet? Sie können Sanity für kleine Websites kostenlos nutzen. Erst bei größeren Anwendungsfällen entstehen überhaupt Kosten.

Nun, da Sie wissen, was Sanity ist, bleibt nur noch die Fragen ‘Wie haben wir es verwendet?’, um unsere Marketing-Website zu überarbeiten?

Der für die Website-Aktualisierung verwendete Prozess

Bevor ich mit meiner Arbeit starten konnte, hatten meine Kollegen bereits das Design für die Website erstellt und statische HTML Komponenten der benötigten Elemente vorbereitet. (Wenn Sie mehr über diese Schritte erfahren wollen, dann halten Sie Ihre Augen offen: wir werden in unserem Blog auch über die anderen Arbeitsschritte berichten) Meine erste Aufgabe war es nun die statischen Komponenten zu nehmen und in Next.js zu konvertieren.

Als ich das Next.js-Template mit allen Komponenten fertig hatten, konnte ich damit beginnen, die Datenstrukturen in Sanity Studio zu planen.

Insgesamt würde ich sagen, dass dieser Schritt die meiste Zeit in Anspruch nahm, da wir sehr viele einzigartige Komponenten hatten, die alle ihre eigenen Datenstrukturen benötigten.

Nachdem unsere Datenstruktur und unser CMS bereit waren, konnte ich damit beginnen die Daten aus dem CMS mit der Next.js-Vorlage zusammenzuführen.

Sanity verfügt dafür über eine eigene Abfragesprache namens GROQ. Es hat etwas gedauert, mich damit vertraut zu machen, aber nachdem man eine Weile damit gearbeitet hat, ist sie schnell und einfach zu verwenden.

Und wenn man doch einmal mit Fragen oder Problemen zu kämpfen hat, dann ist die Entwickler-Community immer für einen da und hilft weiter.

Sobald wir "echte" Daten aus Sanity in unserem Next.js-Template hatten, konnten wir damit beginnen die Website nach Bedarf zu optimieren und anzupassen.

Dabei machten wir nicht nur Änderungen am Frontend, sondern verbesserten auch die Erfahrung in Sanity - zum Beispiel durch das hinzufügen von Icons und einer Vorschau Funktion.

Zusammenfassend war der Ablauf wie folgt:

1. Website Design
2. Ertstellung des statischen HTML
3. Konvertierung des HTML zu Next.js
4. Planung der Datenstrukturen für Next.js
5. Verknüpfung von Sanity mit Next.js
6. Optimierung & Änderungen nach Bedarf

Wie bei jedem Prozess oder Projekt muss man natürlich reflektieren und sich fragen, ob man die richtigen Entscheidungen getroffen hat.

Wurden die richtigen Entscheidungen getroffen?

Ich bin der Meinung, dass wir uns definitiv für das richtige CMS entschieden haben, was die Aktualisierung unserer Unternehmenswebsite angeht.

Nachdem ich Next.js bereits in anderen Projekten verwendet habe, scheint es definitiv das richtige Framework für eine Vielzahl von Anwendungsfällen zu sein, egal ob es sich um eine Content-Plattform oder eine Website handelt.

Da ich Sanity zum ersten Mal benutzte, kann ich ehrlich sagen, dass ich beeindruckt bin von dem, was man damit machen kann. Und dabei habe ich noch nicht einmal die Entwicklungsunterstützung erwähnt, die wirklich hervorragend ist. Es war eine spaßige und angenehme Erfahrung für mich als Entwickler mit Sanity zu arbeiten, was genau das ist was man sich wünscht, wenn man ein neues Tool zum ersten Mal ausprobiert.

Sie können die beste Technologie zur Verfügung haben, aber wenn der Prozess nicht funktioniert, hilft das auch nichts. Ich kann mit Überzeugung sagen, dass das bei uns nicht der Fall war.

Aber es gibt natürlich auch immer Raum für Verbesserungen. Also habe ich mir auch überlegt, was beim nächsten Mal hätte verbessert werden können.

Was könnte verbessert werden?

Für mich gibt es nur eine Sache, die verbessert werden könnte (und das ist eine recht technische Angelegenheit): Im statischen HTML-Code waren auch JavaScript Elemente enthalten. Bei der Umwandlung zu Next.js hätte ich dieses entweder in React oder React-Komponenten übernehmen können, da das JavaScript als externe Quelle enthalten war. Das führte später zu ein paar Problemen aufgrund der Art und Weise, wie ein Next.js aufgebaut ist und gerendert wird.

Ansonsten verlief alles reibungslos, was angesichts der Tatsache, dass wir Sanity zum ersten Mal verwendet haben, beeindruckend ist.

Abschluss

Ich hoffe, Ihnen hat dieser Beitrag gefallen und Sie haben etwas daraus gelernt.

Wenn Sie entweder nach einem neuen CMS suchen, das robuster und flexibler als WordPress ist, oder wenn Sie denken, es sei an der Zeit, sich von WordPress zu verabschieden, kann ich Sanity nur empfehlen.