Headless CMS razvoj odvaja mjesto na kojem se sadržaj uređuje od web stranice, aplikacije ili kioska koji ga prikazuje. Urednici rade u Strapiju, Sanityju, Contentfulu ili u CMS-u složenom oko njihovog procesa, a svaki kanal taj sadržaj čita preko API-ja. Javni sajt tada može biti brz Next.js ili Astro frontend, sa vlastitim ritmom izdanja, dok model sadržaja ostaje stabilan godinama.
Sadržaj
U CodeWizu taj model dizajniramo, podižemo CMS, gradimo frontend i spajamo preview, webhookove, pretragu i keširanje. Objava treba brzo da se pojavi na živom sajtu, nacrti ostaju privatni, a isti članak može da se koristi na landing stranici, u mobilnoj aplikaciji i u biltenu, bez kopiranja u tri odvojena admina.
Usluga je za marketinške timove kojima tema otežava svaki novi raspored, za kompanije koje web stranicu i aplikaciju održavaju iz dva alata, i za organizacije koje žele strukturiran sadržaj: proizvode, lokacije, autore, FAQ i kampanje kao podatke, spremne za sljedeći kanal.
Strapi setup za headless CMS
Strapi je open-source Node.js CMS koji možete pokrenuti na vlastitom serveru ili na Strapi Cloudu. Admin je poznat: tipovi sadržaja, medijska biblioteka, draft i publish, uloge i API koji nastaje iz modela. Biramo ga kada baza sadržaja i fajlovi treba da stoje na infrastrukturi kojom vi upravljate, uz REST i GraphQL dostupne frontendu.
Šta Strapi setup obuhvata
- Tipove sadržaja složene za ponovnu upotrebu: zajedničku SEO komponentu, veze između autora i članaka i blokove koji se ponavljaju tamo gdje se stranica zaista mijenja.
- Uloge za autore, urednike i programere, uz draft i publish, tako da nedovršena stranica ostane skrivena.
- Locale kada je sajt višejezičan, predviđene u modelu od početka.
- Medije lokalno ili u object storageu, u veličinama koje odgovaraju frontendu.
- API tokene ograničene na čitanje objavljenog sadržaja i poseban token za preview.
- Webhookove koji frontendu javljaju da osvježi putanju nakon objave, povlačenja ili brisanja.
- Docker ili systemd deployment, backup baze i fajlova, i nadogradnje koje možemo vratiti.
Posebno ponašanje ostaje u Strapi policies, kontrolerima i lifecycle hookovima: slug koji mora biti jedinstven po localeu, webhook koji javlja i indeksu pretrage, ili polje koje smiju mijenjati samo određene uloge. Strapi dokumentacija pokriva gradivne dijelove. Projekat predajemo sa kratkim vodičem za urednike, primjerima okruženja i tipovima sadržaja u repozitoriju, da se novo okruženje može ponovo podići.
Sanity konfiguracija i strukturiran sadržaj
Sanity drži sadržaj u hostovanom Content Lakeu, a okruženje za uređivanje, Sanity Studio, kao React aplikaciju u vašem repozitoriju. Šema je kod. To odgovara timovima koji modele sadržaja žele u pull requestovima, strukturiran tekst koji je teško pokvariti i studio koji možemo prilagoditi načinu na koji urednici stvarno rade.
Kako konfiguriramo Sanity
Uobičajen tip članka ima nekoliko polja sa validacijom, slug iz naslova i Portable Text za tijelo. Portable Text čuva pasuse, naslove i posebne blokove kao podatke, pa se isto tijelo može iscrtati na webu i u aplikaciji:
export default {
name: 'article',
title: 'Article',
type: 'document',
fields: [
{ name: 'title', type: 'string', validation: (Rule) => Rule.required() },
{ name: 'slug', type: 'slug', options: { source: 'title' } },
{ name: 'body', type: 'array', of: [{ type: 'block' }] },
],
}- Šeme, desk structure i posebni unosi žive u Gitu, pored frontenda.
- GROQ upiti traže samo polja koja stranica treba, a Sanity CDN kešira objavljena čitanja.
- Perspektive nacrta i objave drže preview iskrenim: urednici vide neobjavljene izmjene, posjetioci posljednje izdanje.
- Presentation mode stavlja živu stranicu pored forme kada se vizualno uređivanje isplati dodatno povezati.
- Webhookovi i GROQ projekcije pokreću rebuild ili revalidaciju na zahtjev.
Sanity dokumentacija je referenca za GROQ, obradu slika i studio. Isporuka je šema, prilagodba studia, upiti koje frontend koristi i raspored dataseta koji odvaja produkciju od staginga.
Contentful integracija za upravljani sadržaj
Contentful je u potpunosti hostovan CMS. Spaceovi drže okruženja, tipove sadržaja, unose, fajlove, locale i uloge. Content Delivery API servira objavljen sadržaj sa CDN-a, Preview API servira nacrte, a Management API je način da modele migriramo bez klikanja kroz admin za svaku izmjenu. Preporučujemo ga kada uređuje mnogo ljudi, locali su bitni, a upravljana platforma vrijedi pretplate.
Integracija je dio koji Contentful čini vašim sistemom. Modelujemo tipove i reference, pišemo migracijske skripte da okruženja ostanu usklađena, locale mapiramo na prekidač jezika na frontendu i webhookove vežemo na događaje objave, povlačenja i arhiviranja. Preview koristi Preview API uz draft tajnu na frontendu. Uloge prate stvarnu organizaciju: agencija može uređivati kampanje, a globalnu navigaciju ne može dirati.
SaaS cijena raste sa korisnicima, localima, ulogama i korištenjem API-ja. Model i keš slažemo tako da plaćate urednike i sadržaj, dok javni sajt čita keširane API odgovore. Unosi koji trebaju samo u trenutku builda ne opterećuju javni sajt.
Headless CMS po mjeri
CMS složen oko vašeg procesa pravi je projekat kada bi gotov proizvod savijao tok rada, ili kada sadržaj treba da živi u bazi koju već vodite. Laravel aplikacija sa Filament adminom može izložiti isti JSON kao Strapi, sa narudžbama, poslovnicama ili zalihama u istom sistemu. WordPress može stajati iza headless frontenda, preko ugrađenog REST API-ja ili WPGraphQL-a, kada urednici već znaju WordPress admin, a javna tema je ono što želite zamijeniti.
Kada CMS po mjeri opravdava cijenu
- Urednicima trebaju ekrani koji prate interni proces: odobri, prevedi, zakaži, pa pošalji na tri sajta.
- Sadržaj i poslovni podaci su isti zapisi, a kopiranje u zaseban SaaS napravilo bi dva izvora.
- Ugovor ili zahtjev o boravku podataka traži bazu na vašem VPS-u, u regionu koji izaberete.
- Licence ili naknade po uredniku prerasle bi cijenu izrade fokusiranog admina.
Isporuka je admin na kojem se ljudi mogu obučiti za jedno poslijepodne, verzionisan API, dozvole, preview i migracija sa starog sajta. Urednički admin držimo jednostavnim, a model sadržaja jasnim, tako da budući Next.js ili Astro frontend može zamijeniti današnji sajt bez nove migracije sadržaja.
Kako biramo CMS
Platforma slijedi ko uređuje, gdje podaci smiju stajati i koliko često će se model mijenjati. Ovo je poređenje kroz koje prolazimo u upoznavanju.
| Strapi | Sanity | Contentful | CMS po mjeri | |
|---|---|---|---|---|
| Gdje radi | Vaš server ili Strapi Cloud | Sadržaj kod Sanityja, Studio u vašem repozitoriju | U potpunosti hostovan | Vaš server |
| Šema | Admin, može se izvesti u kod | Kod, pregled u Gitu | Admin i migracijske skripte | Kod, pored aplikacije |
| API | REST i GraphQL | GROQ i GraphQL | REST i GraphQL | API koji dizajnirate |
| Urednici | Klasičan admin, uloge, nacrti | Studio u realnom vremenu, strukturiran tekst | SaaS admin, locali, uloge | Ekrani za vaš proces |
| Dobar izbor | Open-source kontrola, self-hosting | Modeli koje drže programeri | Mnogo urednika, upravljane operacije | Poseban tok, ili podaci koji ostaju u vašoj bazi |
| Oblik cijene | Hosting i održavanje | SaaS po korištenju | Korištenje i korisnici | Vrijeme izrade, nizak trošak licenci |
Directus i Payload su druge open-source opcije koje gledamo kada su im admin ili model podataka bliži poslu. Izbor pravimo nakon spiska tipova sadržaja i ljudi koji će ih uređivati.
Frontendi, preview i svaki kanal
Sajt i dalje treba frontend koji vrijedi objaviti. Za marketinške sajtove i dokumentaciju često koristimo Astro: uglavnom statički HTML, uz islands, male interaktivne dijelove, tamo gdje stranica treba interakciju. Za proizvode sa nalozima, previewom i čestim izmjenama koristimo Next.js, sa statičkom generacijom gdje je sadržaj stabilan i serverskim renderom gdje je stranica personalizovana. Oba čitaju isti API kao i buduća mobilna aplikacija.
Šta objavu čini pouzdanom
- Preview uz draft token, da urednik otvori pravu stranicu prije objave.
- Webhook koji revalidira samo putanje koje su se promijenile, uz zakazano puno osvježavanje kao osiguranje.
- SEO polja na svakom javnom tipu: naslov, opis, canonical, slika za društvene mreže. Sitemap i preusmjeravanja idu uz frontend.
- Pretraga preko Typesensea kada je CMS pretraga preslaba za katalog ili dokumentaciju.
- HTML keširan na edgeu. Naše bilješke o Cloudflare konfiguraciji i o radu na PageSpeedu isti su standard koji primjenjujemo ovdje. Googleova smjernica je LCP ispod 2.5 sekunde; statička ili na edgeu keširana stranica je način da do toga dođemo.
- Locale mapirani na stvarne URL-ove i hreflang, kada CMS već čuva prijevode.
Više kanala slijedi iz modela. Lokator prodavnica, list proizvoda i članak pomoći mogu hraniti web stranicu, ekran u prodavnici i partnerski feed jer su modelovani kao podaci. Obećavamo samo kanale koje stvarno povežemo, a API ostavljamo stabilnim da sljedeći bude dodatak.
Najčešće greške u CMS projektima
- Stranice modelovane kao jedan komad obogaćenog teksta. Aplikacija i sljedeći redizajn tada nemaju šta strukturirano da ponove. Izdvajamo polja koja su podaci.
- HTML zalijepljen u CMS. Izgled pripada frontendu. CMS čuva naslove, slike, citate i poneki poseban blok.
- Preview ostavljen za sedmicu pokretanja. Urednicima treba od prvog dana, inače će objavljivati da provjere razmake.
- Webhook koji niko ne prati. Ako revalidacija tiho padne, CDN zadržava jučerašnju stranicu. Padove bilježimo i šaljemo upozorenje.
- Jedna admin uloga za sve. Autori, recenzenti i programeri dobijaju odvojene dozvole, uključujući preview tokene.
- Cijelo stablo sadržaja na svakoj stranici. Upiti traže polja koja ta stranica iscrtava, a liste su paginirane.
Od čega zavisi cijena headless projekta
Nakon audita sadržaja procjenjujemo u fazama: model i CMS, frontend za prvi skup šablona, migracija, pa pretraga, jezici ili dodatni kanali. Ovo su faktori koji mijenjaju obim.
- Model: broj tipova, veza, posebnih blokova i pravila validacije.
- Uredničko iskustvo: podrazumijevani admin manji je od posebnih unosa, vizualnog uređivanja i procesa u više koraka.
- Frontend: marketinški sajt sa nekoliko šablona manji je od aplikacije sa nalozima i personalizovanim stranicama.
- Migracija: nekoliko desetina stranica je strukturiran uvoz; višegodišnji WordPress članci, mediji i preusmjeravanja posebna su faza.
- Jezici i integracije: locali, pretraga sajta, commerce, CRM i drugi kanal svaki dodaju jasno određen dio posla.
Kako radimo
- Upoznavanje: popisujemo postojeći sadržaj, ljude koji ga uređuju, kanale na koje objavljujete i pravila koja nacrt mora proći.
- Plan: biramo CMS, crtamo model sadržaja i dogovaramo frontend, preview i hosting, podijeljeno na prvo izdanje i kasniju listu.
- Izrada: CMS, API i frontend idu zajedno na staging URL-u koji urednici već mogu isprobati.
- Testiranje: prolazimo pravi urednički tok: kreiranje, preview, objava, povlačenje, dozvole i provjera performansi ključnih šablona.
- Pokretanje: selimo sadržaj, zadržavamo preusmjeravanja sa starih URL-ova, uključujemo webhookove i keš i prve objave gledamo zajedno sa vama.
- Podrška: izmjene modela, pitanja urednika, nadogradnje CMS-a i frontenda, i sljedeći kanal kada budete spremni.
Zašto CodeWiz
- CMS i frontend u jednom timu: model sadržaja, Next.js ili Astro, hosting, keš i SEO dizajnirani su zajedno, pa su objava i performanse isti projekat.
- Platforma koja prati proces: Strapi, Sanity, Contentful ili admin po mjeri, izabrani nakon audita sadržaja.
- Open-source na prvom mjestu: Strapi, Astro, Laravel i WordPress ostaju prenosivi. Hostovani CMS preporučujemo kada iskustvo uređivanja opravda naknadu. Više o CodeWizu.
- Performanse kao dio izrade: keširan HTML, štedljivi upiti i izmjerene Core Web Vitals vrijednosti, uz LCP kao provjeru prije pokretanja.
- Fer cijene, rad na daljinu: CodeWiz je 2023. godine osnovao Dragan Plavšić u Banjoj Luci i radi sa klijentima lokalno i u svijetu. Vrhunski razvoj bez vrhunskih cijena je način na koji obim dijelimo u faze.
Često postavljana pitanja
Koliko košta headless CMS razvoj?
Zavisi od CMS-a, broja tipova sadržaja, koliko admin mora biti prilagođen i da li gradimo i frontend i selimo postojeći sajt. Fokusiran marketinški sajt na Strapiju ili Sanityju manji je projekat od višejezičnog kataloga sa previewom, pretragom i procesom po mjeri. Nakon audita sadržaja šaljemo pisanu procjenu podijeljenu na faze.
Koliko traje headless izrada?
Prva verzija sa jasnim modelom i nekoliko šablona često stigne na staging za nekoliko sedmica. Migracija velikog arhiva, više jezika ili admin po mjeri to produžava. Urednici rano dobijaju staging okruženje, pa se model može mijenjati dok se ostali šabloni još grade.
Da li je headless CMS bolji od WordPressa?
WordPress ostaje jak izbor kada urednici žele stranice, objave i plugine u jednom adminu. Odvojen model bolje odgovara kada isti sadržaj mora služiti sajtu i aplikaciji, kada frontend treba biti statička ili React aplikacija, ili kada je sadašnja tema postala usko grlo. WordPress može ostati CMS iza frontenda, ako admin želite zadržati.
Koji CMS da izaberemo?
Strapi za open-source self-hosting, Sanity za šemu koju želite u Gitu i jako strukturiran tekst, Contentful za upravljanu platformu sa mnogo urednika i jezika, a CMS po mjeri kada proces ili podaci ne mogu izaći iz vaše aplikacije. Tu odluku donosimo u upoznavanju, nakon što vidimo sadržaj i tim.
Hoće li urednicima novi admin biti teži?
Admin može biti jednostavniji od page buildera, jer svaki tip pokazuje polja koja su bitna i skriva raspored. Nova navika je preview: urednik otvori pravu stranicu, pa objavi. Polja imenujemo njihovim jezikom, napišemo kratak vodič i prođemo prvu pravu sesiju objavljivanja zajedno.
Možete li preseliti naš sadašnji sajt?
Možemo. Stare stranice i objave mapiramo na nove tipove, selimo medije, pravimo preusmjeravanja za URL-ove koji se mijenjaju i uzorak stranica provjeravamo sa vama prije pokretanja. Sadržaj koji je samo raspored, a ne podatak, dobija svjesnu odluku: selimo ga ili tu sekciju ponovo slažemo kao strukturirana polja.
Spremni da odvojite sadržaj od web stranice?
Recite nam šta objavljujete, ko to uređuje i koji kanali moraju ostati usklađeni. Mi ćemo predložiti CMS, model sadržaja i prvo izdanje. Kontaktirajte CodeWiz da počnemo, ili pogledajte našu headless CMS uslugu.