Blog

Terug

Sanity.io - een veelzijdig headless CMS

hoofdafbeelding van het artikel
  • CMS
  • JAMstack
  • Sanity
Leestijd 0 min

Sanity kan gerust een van de meest veelzijdige content management systemen genoemd worden in de JAMstack-wereld. Het biedt veel mogelijkheden om het helemaal naar eigen inzicht in te richten.

Sanity is ook de motor onder deze website. Toen ik eind 2020 bezig was met de bouw van een compleet nieuwe website voor Corneel Online stuitte ik op dit platform en ik was snel overtuigd van de mogelijkheden. In dit artikel zal ik mijn ervaring met dit CMS delen.

Wat is Sanity?

Sanity is een flexibel headless CMS. Het bijzondere aan Sanity is dat zij het platform beheren waarin alle content en media worden opgeslagen, maar dat ze een app beschikbaar stellen die je als developer lokaal op je eigen computer kan draaien. De app heet Sanity Studio en hiermee wordt alle content aangemaakt en beheerd. Sanity Studio staat in verbinding met het Sanity.io account en de data wordt gesynchroniseerd tussen het CMS en het "moederschip".

Sanity Studio

Sanity Studio is de front-end laag van het platform en het mooie is: je kan dit CMS helemaal naar je hand zetten. Het is feitelijk een app gebouwd met het React framework dat je naar eigen smaak kan inrichten. Zo kan je content types creëren, de navigatie tussen verschillende onderdelen naar eigen inzicht inrichten, custom velden toevoegen en plugins toevoegen.

Is alles klaar, dan kan je Sanity Studio hosten bij Sanity.io of desgewenst op een andere plek, zodat het beschikbaar is voor degenen die met het CMS gaan werken.

Prettige user interface

Sanity Studio heeft een hele fijne user interface, waardoor het werken met dit CMS overzichtelijk is en lekker intuïtief. Niet zo gek, want je kan tenslotte zelf bepalen hoe je het CMS inricht.

Een waarschuwing is hier op zijn plaats: Sanity is in de basis een heel kaal systeem en het kost tijd en moeite om het in te richten. Eenmaal klaar wordt je beloond met een heel prettig CMS, maar het is iets bewerkelijker en het kost iets meer tijd dan bij een gemiddeld CMS.

Een pluspunt is dat Sanity over zeer uitgebreide documentatie beschikt en een heel actief Slack kanaal heeft, zodat je altijd binnen korte tijd de antwoorden vindt die je nodig hebt.

Belangrijke features

Sanity heeft een paar belangrijke features waarmee ze zicht onderscheiden van de concurrentie:

Portable text

De content die je invoert met de WYSIWYG editor wordt als portable text opgeslagen. Portable Text is een op JSON gebaseerde rich text-specificatie voor moderne platforms voor het bewerken van inhoud. Een uitgebreide (engelstalige) toelichting vind je hier.

Op de front-end (website, app, iets anders...) wordt deze data weer gerenderd in het gewenste formaat. In mijn geval is dat HTML.

Image pipeline

Sanity maakt opgeslagen afbeeldingen beschikbaar op hun CDN (content delivery network). Daarnaast bieden ze de mogelijkheid om in Sanity Studio afbeelding te bewerken en te bewaren in verschillende formaten voor verschillende devices. Hierdoor zijn afbeeldingen geoptimaliseerd en werkt alles heel vlot op de front-end.

Realtime collaboration

Als zelfstandige eenpitter heb ik deze feature niet gebruikt, maar Sanity biedt de mogelijk om samen te werken aan content en om content reviews uit te voeren en aanpassingen in tekst terug te draaien. Een ideale oplossing voor teams die (op verschillende locaties) samenwerken aan dezelfde content. In deze video zie je hoe dat eruit ziet.

API met GraphQL of GROQ

Sanity biedt de content aan via een API via GraphQL of GROQ, een eigen query language. Daarnaast bieden veel static site generators (zoals Gridsome bij deze website) een source plugin waarmee data uit Sanity opgehaald kan worden bij de bron.

Sanity prijzen

Sanity biedt een gratis account voor kleinere projecten met 3 gebruikers en meer dan redelijke gebruiksquota. Groeit de website of het aantal gebruikers, dan ga je betalen. Voor teams wordt het al snel een stuk duurder en een business account is er voor de hoofdprijs.

The Kitchen Sink Studio

Sanity heeft een demo gebouwd waarin alle mogelijkheden van het CMS zijn samengebracht: The Kitchen Sink Studio. Deze demo geeft een goede indruk van wat je met Sanity allemaal kan ontwikkelen.

Corneel Online en Sanity

Zoals ik in de introductie al meldde werkt deze website met Sanity onder de motorkap. En tot groot genoegen! Het is kostte enige moeite om alles in te richten en te configureren, maar als dat eenmaal gedaan is is Sanity heel prettig en stabiel in het gebruik. De user interface is super en een plezier om mee te werken. Hieronder zie je enkele screenshots van mijn Sanity installatie:

Blog artikel

Afbeelding 1: Fragment van een blogartikel in het CMS.

Afbeelding 2: De WYSIWYG editor kan worden vergroot, zodat het schrijven van content een stuk overzichtelijker is.

Afbeelding 3: In de WYSIWYG editor kan je zelf custom velden toevoegen. Bij deze website zijn dat een Afbeelding, YouTube Embed en een Call to Action veld (zoals onderaan dit artikel, kijk maar).

Meer weten?

Ben je je eigen CMS zat en wil je iets beters? Misschien is Sanity wel de oplossing voor jou.

Neem contact op

Wat houdt je bezig?

Heb jij een interessant project?
En wil je erover praten?

Of je nou een starter bent of een doorgewinterd bedrijf, ik hoor het graag als je een leuke uitdaging voor me hebt.

Marco Verheul
T. 06 2846 1106
E. marco@corneelonline.nl