Astro + CloudCannon: Savršen stack za višejezične web stranice koje klijenti mogu uređivati

Autor: Goran Stimač
Datum: 24. lipnja 2026.
Vrijeme čitanja: 8 minuta

---

Uvod: kada klijenti trebaju uređivati, a vi želite brzinu

Kao web developeri često stvaramo predivne Astro stranice — brzine koje se ne mogu nadmašiti, savršene SEO rezultate i čistu kod bazu. No kad predamo projekt klijentu, dolazi problem: kako oni mijenjaju tekstove, slike ili cijene bez da moraju pozivati developera?

Još gore — što ako klijent posluje na više tržišta? U Hrvatskoj sve više tvrtki vodi baze u engleskom, njemačkom i hrvatskom jeziku. Tradicionalni CMS-ovi poput WordPressa rješavaju problem uređivanja, ali ubijaju performanse koje ste toliko gradili. Ručno ažuriranje sadržaja ne skalira.

Rješenje? Kombinacija Astro kao statičnog generatora stranica i CloudCannon kao headless CMS-a — arhitektura koja vam daje potpunu kontrolu nad kodom, a klijentima omogućuje jednostavno uređivanje višejezičnog sadržaja bez tehničkog znanja.

Zašto je ovo posebno važno za hrvatsko tržište

Hrvatske tvrtke sve češće nude usluge stranim klijentima, što zahtijeva višejezične web stranice. Ovaj stack omogućuje jednostavno upravljanje engleskim, njemačkim i lokalnim sadržajem bez da developer mora biti uključen u svako ažuriranje.

---

Arhitektura: kako Astro i CloudCannon rade zajedno

Statičke stranice s Astronom

Astro je statički generator stranica (SSG) koji preraduje sve stranice tijekom build procesa. To znači:

• Nema JavaScripta po defaultu — što bolje utječe na Core Web Vitals i Google rangiranje
• Automatsko dijeljenje koda — svaka se komponenta optimizira zasebno
• Optimizirana isporuka slika — automatski AVIF/WebP formati

Zamislite stranicu koja se učitava u 0.5 sekundi, bez ikakvog JavaScripta koji koči preglednik. To je Astro.

CloudCannon kao headless CMS

CloudCannon nije WordPress s bazom podataka. Umjesto toga:

• Direktna integracija s Astro build procesom — sadržaj se učitava automatski
• Sadržaj u Markdownu — pisci i copywriteri već znaju ovaj format
• Suradnja u stvarnom vremenu — više autora, jedan prostor

CloudCannon (Uređivanje sadržaja) → Markdown datoteke → Astro Build → Statika na CloudFlare/Vercel

Ovaj tok podataka je jednostavan i pouzdan.

---

Ključne prednosti: što svaka strana dobiva

Za developere

1. Potpuna kontrola nad kodom — nema napuhanih baza, čista statička arhitektura
2. Performanse — Lighthouse scoreovi obično 95+ na svim metrikama
3. Git-friendly — sav sadržaj u Gitu, lako praćenje i audit trail
4. Jednostavno hostanje — CloudFlare Pages, Vercel ili Netlify

Za netehničke klijente

1. WYSIWYG uređivanje — vizualno sučelje bez učenja Markdowna ili koda
2. Nema zastoja — uređujte kad god želite, pregledajte prije objavljivanja
3. Uloge i dozvole — razdvojene dozvole za različite članove tima
4. Višejezična nadzorna ploča — mijenjajte jezike dok uređujete

Za agencije

1. Skalabilan workflow — predajte uređivanje klijentima bez gubitka vlasništva nad kodom
2. Brži onboarding — klijenti uče editor za sat vremena, ne tjednima
3. Manje upita podrške — manje “kako ovo promijeniti?” poziva nakon lansiranja

---

Višejezični pristup: kako upravljati više jezika

Astrova ugrađena i18n podrška

Astro 4.0+ ima nativnu internacionalizaciju:

• Routing po lokali — /hr/, /en/, /de/
• Automatsko otkrivanje jezika — prema URL-u ili postavkama preglednika
• Kolekcije sadržaja organizirane po lokali

CloudCannon višejezično uređivanje

Klijenti mogu:

1. Odabrati jezik u bočnoj traci nadzorne ploče
2. Vidjeti sve prijevode stranice istovremeno
3. Uređivati jedan jezik bez utjecaja na druge
4. Pregledati promjene prije objavljivanja na produkcijsku granu

Preporuke za URL strukturu

1. Poddirektoriji (preporučeno) — goranstimac.com/hr/what-i-do/ za hrvatske usluge, goranstimac.com/what-i-do/ za engleske. Ovaj pristup je SEO-prijateljski, drži sav sadržaj pod jednom domenom i jasno označava jezik kroz URL putanju.

2. Poddomene — hr.goranstimac.com/ za potpuno odvojena tržišta koja zahtijevaju različito hostanje ili pravne zahtjeve. Iako pruža izolaciju između tržišta, dijeli autoritet domene i zahtijeva složenije DNS upravljanje.

3. Parametri (nije preporučeno) — URL-ovi poput goranstimac.com?lang=hr štete SEO-u stvaranjem dupliciranog sadržaja i zbunjuju tražilice oko kanonske verzije.

Hrvatska lokalizacija: kulturne prilagodbe

1. Smjer teksta — hrvatski koristi LTR kao engleski, ali planirajte RTL za arapske/perzijske klijente
2. Format datuma — koristite DD.MM.YYYY format poznat hrvatskim korisnicima
3. Valuta — EUR formatiranje s pravilnim razmacima (€ 199,95, ne €199.95)
4. Tipografija — razmislite o ćirilici za regije gdje su srpski i hrvatski službeni
5. Pravna usklađenost — GDPR zahtjevi za upravljanje sadržajem unutar EU-a

---

Tehnička implementacija: postupak korak po korak

Potrebni koraci postavljanja

1. Instalirajte CloudCannon CLI: npm install -g @cloudcannon/cli
2. Inicijalizirajte u Astro projektu: cloudcannon init --project moja-stranica
3. Konfigurirajte lokale u astro.config.mjs:

export default defineConfig({
  integrations: [cloudcannon()],
  i18n: {
    locales: ['en', 'hr', 'de'],
    defaultLocale: 'en'
  }
});

Struktura kolekcije sadržaja

Primjer organizacije mapa:

src/
├── content/
│   ├── en/
│   │   └── pages/
│   │       ├── index.md
│   │       └── services.md
│   └── hr/
│       └── pages/
│           ├── index.md
│           └── usluge.md

Build i deploy pipeline

• Lokalni razvoj: cloudcannon dev (lokalno pregledno okruženje koje se sinkronizira s CloudCannon instancom u stvarnom vremenu)
• Produkcijski build: npm run build pokreće CloudCannon sinkronizaciju tijekom build procesa
• CI/CD integracija: postavite GitHub Actions ili slične alate za automatski build i deploy pri svakom pushu na glavnu granu

---

Zaključak: kada koristiti ovaj stack

Sažetak vrijednosti

Astro + CloudCannon rješava klasičan problem trijade developer-klijent-sadržaj bez žrtvovanja performansi ili vlasništva nad kodom.

Kada koristiti ovu kombinaciju

• Klijentske prezentacijske stranice koje zahtijevaju česta ažuriranja
• Višejezične stranice gdje svaki jezik treba neovisno uređivanje
• Projekti koji daju prioritet Core Web Vitals i SEO optimizaciji

Budućnost

Moguće integracije koje vrijedi istražiti:

• Automatizirani prijevodi (DeepL, Google Translate API)
• A/B testiranje za optimizaciju sadržaja
• Analytics integracija bez JavaScript bloat-a

Poziv na akciju

Preporučujemo isprobati ovaj setup s malim projektom prvo, a zatim skalirati na potpunu klijentsku predaju. Kada se jednom upoznate s procesom, primijetit ćete da se zadovoljstvo klijenata znatno povećava kada preuzmu kontrolu nad vlastitim sadržajem bez tehničkih barijera.

---

Hreflang oznake (Referenca)

Ove hreflang oznake trebaju biti uključene u <head> odjeljak objavljene stranice:

<link rel="alternate" hreflang="en" href="https://goranstimac.com/blog/astro-cloudcannon-multilingual-site/" />
<link rel="alternate" hreflang="hr" href="https://goranstimac.com/hr/blog/astro-cloudcannon-visejezicne-stranice/" />
<link rel="canonical" href="https://goranstimac.com/hr/blog/astro-cloudcannon-visejezicne-stranice/" />
<link rel="alternate" hreflang="x-default" href="https://goranstimac.com/blog/astro-cloudcannon-multilingual-site/" />

---

Ovaj članak je dio serijala o modernim web tehnologijama za hrvatsko tržište.