Headless CMS

Wat is een CMS

Wanneer je content op een website wil aanpassen heb je 2 manieren; zelf code schijven of gebruik maken van een CMS (Content management system). Een CMS is een manier om makkelijk informatie aan te passen op een website zonder kennis van code. Een bekent CMS is Wordpress omdat dit veel voor komt in verschillenden website.

Wat is een Headless CMS

Een headless CMS zit niet vast aan de website je kan deze bijvoorbeeld laten draaien op een anderen server. Het voordeel dat het CMS niet vast zit is wanneer je 10 websites maakt deze allemaal de zelfden CMS pagina kunnen gebruiken waardoor de websites kleiner zijn en sneller werken.

Sanity

Ik heb gebruik gemaakt van sanity.io als headless CMS omdat deze goede documentatie heeft je een query makkelijk kan testen voor een beginner en het overzichtelijk is gemaakt voor gebruikers.

CMS inhoud aanpassen

Sanity gebruik objects om data te tonen de CMS wanneer je bijvoorbeeld een een nieuw veld wil maken open je dit met {} en type je de name: 'name' zodat je deze later kan opvragen met een query. Je kan verschillenden types toevoegen die informatie opslaan in het CMS zoals een string, slug of een image. wanneer je type: 'image' gebruikt maakt die een div waarin je een afbeelding in kan plaatsen en kan sturen naar de database.

Testen met vision

Wanneer je gaat naar /vision kom je op een plek waar je een query kan maken en testen of dit werkt. * betekent dat je alles selecteert in de database wanneer je alleen de games wil zien type je *[_type == 'games']. Meestal heb je niet alle data nodig op je website en pak je meestal alleen de belangrijksten informatie. In onze app had ik alleen de titel en de afbeelding url nodig en roep je dit op met:

*[_type == 'games']{name, 'posterUrl': poster.asset->url}

Instaleren sanity

Sanity in terminal installeren.

npm install -g @sanity/cli

Activeren van sanity

sanity init

Ga naar de map.

cd headlesscms

Starten van de server.

npm start

Nu heb je een server gestart waarbij je het CMS kan zien met een eigen poort nummer http://localhost:3333.

Deploy

Wat heel handig is aan sanity is dat je met een regel code het cms kan deployen op de sanity website zodat andere mensen de website ook kunnen aanpassen.

sanity deploy

Wanneer je het command uitvoert moet je een naam kiezen en dan wordt dit gedeployed op de website. In onze website kan je met https://games.sanity.studio/desk het headless CMS bekijken of aanpassen.

Je kan op de live CMS precies zien hoeveel data je gebruikt in een maand en als je over het limiet bent gegaan moet je extra betalen. Het is mogelijk om je eigen server te gebruiken voor het hosten van het CMS hiervoor gebruik je de code:

sanity build public

Keuze sanity

Ik heb een aantal headless CMS systemen bekeken en wat Sanity beter maakt dan de rest is dat je het heel makkelijk kan toevoegen in een project. Ook vind ik het gebruik van json om informatie te tonen handig omdat we tijdens de lessen ook json files moesten gebruiken was het leren van sanity makkelijker.

Een CMS die ik ook goed vond was Directus waarbij je in plaats van in de code de CMS pagina kan aanpassen je het in het CMS zelf kan doen. Ik heb Directus niet gekozen omdat ik nog nieuw ben met het gebruiken van een headless CMS en hierbij had je heel veel functies om aan te passen en bij Sanity het heel minimalistisch is waardoor ik de basis beter kan begrijpen.

Toegevoegde waarden

Ik denk dat mijn topic een goede toegevoegde waarde geeft binnen het project omdat wanneer je bijvoorbeeld elke week een nieuwe film wil toevoegen je dit niet elke keer handmatig wil toevoegen in de database. Door het gebruik van het CMS wordt het product meer gebruiksvriendelijker voor de klant. De volgenden keer dat ik een headless CMS moet kiezen ga ik waarschijnlijk zoeken naar een meer uitgebreid CMS zoals Directus.

bronnen

Traversy Media. (2020, December 7). Sanity.io Crash Course | Headless CMS. YouTube. https://www.youtube.com/watch?v=32RP-sG1njE

Presenting Images. (n.d.). Sanity.Io. Retrieved March 28, 2021, from https://www.sanity.io/docs/presenting-images

Query Cheat Sheet - GROQ. (n.d.). Sanity.Io. Retrieved March 28, 2021, from https://www.sanity.io/docs/query-cheat-sheet

sanity.json. (n.d.). Sanity.Io. Retrieved March 28, 2021, from https://www.sanity.io/docs/sanity-json

Quickstart Guide. (n.d.). Directus Docs. Retrieved March 28, 2021, from https://docs.directus.io/getting-started/quickstart/

Gemaakt door: Tim