Izrada statičkih sajtova: Astro, 11ty i Gatsby

Izrada statičkih sajtova znači da se web stranica tokom builda pretvori u gotove HTML fajlove, umjesto da server za svakog posjetioca iznova sklapa stranicu. Takav sajt se sa CDN-a učitava gotovo trenutno bilo gdje u svijetu, nema bazu podataka ni admin panel koji napadač može gađati, podnosi skokove prometa i košta vrlo malo za hosting.

Sadržaj

U CodeWizu gradimo statičke i Jamstack web stranice u Astru, Eleventyju (11ty) i Gatsbyju. Povezujemo ih sa načinom uređivanja koji odgovara vašem timu – Markdown u Gitu, CMS zasnovan na Gitu ili headless CMS – i objavljujemo ih automatskim pipelineom na edge hosting. Održavamo i postojeće statičke sajtove, a sa sporih platformi prepunih plugina selimo onda kada statička arhitektura zaista ima više smisla.

Generatori statičkih sajtova dobro leže sajtovima kompanija, marketing stranicama, dokumentaciji, blogovima i magazinima, landing stranicama, katalozima proizvoda i višejezičnim sajtovima na kojima se sadržaj mijenja nekoliko puta dnevno, a ne svake sekunde. Ako je trenutni sajt spor, skup za krpljenje ili osjetljiv na svaki skok prometa, statički build je često najčistije rješenje.

Astro: Dva monitora na tamnom stolu prikazuju izvorni kod i pregled web stranice

Astro setup: izrada statičkih sajtova uz islands arhitekturu

Astro je naš podrazumijevani izbor za većinu novih statičkih sajtova. Sve renderuje u HTML tokom builda i podrazumijevano ne šalje nimalo JavaScripta. Interaktivni dijelovi – pretraga, konfigurator proizvoda, mobilni meni – postaju „islands”: dijelovi koji se sami aktiviraju tek kada zatrebaju. Te islands možete pisati u Reactu, Vueu, Sveltu, Solidu ili običnim web komponentama, pa se postojeći UI kod može ponovo iskoristiti.

Šta uključuje naš Astro setup

Content kolekcije sa šemom i provjerom tipova, tako da nedostajuća slika ili predugačak meta naslov obore build prije nego što stignu u produkciju.
Ugrađena optimizacija slika kroz astro:assets: responzivne veličine, AVIF i WebP, te tačna širina i visina da se izbjegne pomjeranje layouta.
Islands se učitavaju sa client:visible ili client:idle, a ne čim se stranica otvori. View Transitions router dodajemo tamo gdje glatka navigacija zaista pomaže.
Sitemap, RSS, kanonski URL-ovi, Open Graph oznake i strukturirani podaci nastaju iz sadržaja, uz i18n rutiranje za višejezične sajtove.
Izlaz je podrazumijevano statički, a pojedine rute prebacujemo na renderovanje po zahtjevu ili server islands samo ako stranici zaista trebaju živi podaci.

Content kolekcije sa validacijom

// src/content.config.ts
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: '**/*.md', base: './src/content/blog' }),
  schema: ({ image }) => z.object({
    title: z.string().max(60),
    description: z.string().min(140).max(160),
    pubDate: z.coerce.date(),
    cover: image(),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };

Zvanična Astro dokumentacija detaljno pokriva content kolekcije i islands. Naš posao je da za vaš model sadržaja izaberemo prave obrasce i da projekat ostane jasan onome ko ga bude održavao.

11ty konfiguracija: vitki i dugotrajni statički sajtovi

Eleventy (11ty) je minimalan generator statičkih sajtova na JavaScriptu, bez ijednog klijentskog frameworka. Uzima Markdown, Nunjucks, Liquid, WebC ili običan HTML, podatke iz JSON-a, JavaScript fajlova ili API-ja, i na izlazu daje tačno onaj HTML koji ste napisali. Build je vrlo brz, zavisnosti je malo, a projekat se lako održava godinama – velika prednost za dokumentaciju, sajtove bogate sadržajem i projekte koji moraju ostati održivi uz malo truda.

Tipična Eleventy konfiguracija

// eleventy.config.js
import { eleventyImageTransformPlugin } from '@11ty/eleventy-img';

export default function (eleventyConfig) {
  eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
    formats: ['avif', 'webp', 'jpeg'],
    widths: [480, 960, 1600],
    htmlOptions: { imgAttributes: { loading: 'lazy', decoding: 'async' } },
  });
  eleventyConfig.addPassthroughCopy({ 'src/static': '/' });
  eleventyConfig.addCollection('posts', (api) =>
    api.getFilteredByGlob('src/posts/*.md').filter((p) => !p.data.draft));
  return { dir: { input: 'src', output: '_site' } };
}

Kako podešavamo 11ty projekte

Jasna struktura foldera: layouti, parcijali, globalni podaci i kolekcije definirani na jednom mjestu.
Transformacija slika, minifikacija HTML-a i ubacivanje kritičnog CSS-a kao dio builda.
Podaci se sa API-ja ili headless CMS-a povlače tokom builda i lokalno keširaju preko @11ty/eleventy-fetch, pa rebuild ostaje brz.
Paginacija za liste, stranice tagova i višejezične foldere, bez dodatnih plugina.

Eleventy dokumentacija je kratka i praktična, i to je dio draži ovog alata: novi programer može cijeli projekat razumjeti u jednom popodnevu.

Gatsby: razvoj, održavanje i migracija

Gatsby je popularizovao statičke sajtove na Reactu, sa GraphQL slojem za podatke i velikim ekosistemom plugina. Mnogi sajtovi kompanija i dalje rade na njemu, i mi ih razvijamo i održavamo: nadogradnje zavisnosti i Node.js-a, pokvareni source plugini, spori buildovi, problemi u obradi slika i nove funkcije. Razvoj Gatsbyja je znatno usporio otkad ga je Netlify preuzeo 2023. godine, pa za nove projekte obično preporučujemo Astro ili Eleventy.

Održavanje: postojeći Gatsby sajt ostaje siguran i može se buildati, plugini se ažuriraju, GraphQL greške u šemi se ispravljaju, a vrijeme builda skraćujemo keširanjem u CI-ju.
Migracija: React komponente prelaze u Astro islands, GraphQL upiti se zamjenjuju content kolekcijama ili direktnim pozivima API-ja, a svaki URL ostaje na mjestu uz redirecte.
Odluka na podacima: uporedimo vrijeme builda, veličinu bundlea i Core Web Vitals prije i poslije, tako da odluka o migraciji ne zavisi od ukusa.

Izrada statičkih sajtova: Astro, Eleventy, Gatsby ili Hugo

Generator	Jezik i šabloni	JavaScript koji se šalje	Brzina builda	Najbolji za
Astro	Astro komponente, Markdown, MDX; islands u Reactu, Vueu ili Sveltu	Ništa, islands se uključuju po izboru	Brz	Marketing sajtove, blogove i kataloge sa malo interaktivnosti
Eleventy (11ty)	Markdown, Nunjucks, Liquid, WebC, HTML	Ništa	Vrlo brz	Dokumentaciju, sadržajne sajtove i projekte koji se dugo održavaju uz malo posla
Gatsby	React sa GraphQL slojem za podatke	React runtime na svakoj stranici	Sporiji na velikim sajtovima	Postojeće Gatsby projekte i timove koji su uložili u njegove plugine
Hugo	Go šabloni, Markdown	Ništa	Izuzetno brz	Vrlo velike sajtove sa hiljadama stranica
Next.js static export	React	React runtime	Umjereno	Timove koji su već na Next.js-u, a treba im statički deployment

Izrada statičkih sajtova ima isti cilj u svakom od ovih alata: brz HTML, jasan sadržaj i mali trošak hostinga. Pravi izbor zavisi od toga ko uređuje sadržaj, koliko interaktivnosti treba i šta vaši programeri već znaju. Nismo vezani za jedan alat i preporučujemo onaj koji tokom vijeka trajanja sajta drži ukupan trošak najnižim.

Optimizacija performansi statičkog sajta

Statički HTML daje prednost, ali sam po sebi ne garantuje brz sajt – statička stranica sa hero slikom od 3 MB i pet skripti za praćenje i dalje je spora. Optimizacija performansi statičkog sajta gleda šta browser preuzima nakon što HTML stigne:

Slike: responzivni srcset, AVIF i WebP, navedene dimenzije, lazy loading ispod prvog ekrana i unaprijed učitana hero slika visokog prioriteta, da Largest Contentful Paint bude dobar.
Fontovi: hostovani kod nas, smanjeni na znakove koje zaista koristite (uključujući č, ć, š, ž i đ za jezike regiona), unaprijed učitani i servirani uz font-display: swap.
Stilovi i skripte: kritični CSS je ubačen u stranicu, neiskorišteni stilovi uklonjeni, islands se hidriraju kasnije, a tuđe skripte se provjeravaju jedna po jedna.
Keširanje: fajlovi sa hashom u imenu keširaju se godinu dana kao nepromjenjivi, a HTML se provjerava pri svakom zahtjevu, pa se nova objava vidi odmah.
Budžeti u CI-ju: Lighthouse CI ili limit veličine obara pull request koji sajt osjetno oteža.

# _headers (Cloudflare Pages / Netlify)
/_astro/*
  Cache-Control: public, max-age=31536000, immutable

/*
  Cache-Control: public, max-age=0, must-revalidate
  Content-Security-Policy: default-src 'self'; img-src 'self' data:
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin

Ista je to disciplina kojom težimo rezultatu 100/100 za performanse stranice, a statički izlaz te ocjene čini mnogo lakšim za postići i zadržati.

Radno mjesto programera sa monitorom, osvijetljenom tastaturom i laptopom na drvenom stolu

Uređivanje sadržaja bez diranja koda

Česta briga je da statički sajt znači da urednici moraju naučiti Git. Ne moraju. Tok uređivanja prilagođavamo timu:

Markdown u Gitu: idealan za dokumentaciju i tehničke timove; svaka izmjena ima pregled i verziju.
CMS zasnovan na Gitu: Decap CMS ili TinaCMS daju urednicima vizuelni interfejs koji izmjene u pozadini commit-uje u repozitorij.
Headless CMS: Strapi, Sanity, Contentful ili WordPress kao headless backend; objava šalje webhook koji za nekoliko minuta ponovo izgradi i objavi sajt.
Preview buildovi: svaki nacrt ili pull request dobija svoj preview URL, pa urednik vidi tačno ono što će izaći uživo.

Dinamičke funkcije na statičkoj web stranici

Statički sajt i dalje može imati žive funkcije. Većinu „dinamičkih” potreba rješavamo malim, fokusiranim servisima:

Forme: lagana serverless funkcija ili vaš postojeći API, uz zaštitu od spama kao što je Cloudflare Turnstile, i isporuka na email ili u CRM.
Pretraga: Pagefind tokom builda pravi statički indeks za manje i srednje sajtove; veći katalozi dobijaju trenutnu pretragu otpornu na greške u kucanju preko Typesensea – više u članku o brzim pretraživačima na Typesenseu.
Personalizacija i A/B testovi: edge funkcije ili Cloudflare Workers koji odgovor prilagođavaju blizu posjetioca, bez centralnog servera.
Online prodaja i rezervacije: ugrađen checkout iz Stripea ili Shopifyja, ili poseban API za korpu i naloge.
Komentari, mape i video: učitavaju se tek nakon interakcije korisnika, pa ne usporavaju prvi prikaz.

Hosting, deployment i sigurnost

Statički sajt je folder fajlova, pa je hosting jednostavan i jeftin. Objavljujemo na Cloudflare, Netlify, Vercel, GitHub Pages, S3-kompatibilan bucket iza CDN-a ili vaš Nginx, zavisno od toga gdje živi ostatak infrastrukture. U vodiču o profesionalnoj Cloudflare konfiguraciji opisana su mnoga edge podešavanja koja koristimo.

Build se pokreće u CI-ju (GitHub Actions ili GitLab CI) uz keš zavisnosti, provjeru linkova i validaciju HTML-a.
Deployment je atomičan: nova verzija izlazi odjednom, a povratak na prethodni build je jedan klik.
Sigurnosna zaglavlja, HTTPS svuda i bez serverskog koda na javnom sajtu, pa nema baze za injekciju ni plugina za eksploataciju.
Zakazani rebuild objavljuje sadržaj vezan za datum, na primjer članke podešene za budući termin.

Kada je statički sajt pravi izbor, a kada nije

Situacija	Generator statičkog sajta	Klasični CMS ili aplikacija na serveru
Sajt kompanije, blog, dokumentacija	Odličan izbor	Radi, ali je teži za održavanje i zaštitu
Sadržaj se ažurira nekoliko puta dnevno	Odličan izbor uz rebuild preko webhooka	Dobar izbor
Desetine hiljada stranica koje se stalno mijenjaju	Moguće, uz inkrementalnu strategiju	Obično bolje
Korisnički nalozi, dashboardi, podaci u realnom vremenu	Samo kao statička ljuska plus API-ji	Bolji izbor
Velika online prodavnica sa živim zalihama i cijenama	Djelimično: statički katalog plus dinamička korpa	Obično bolje

Migracija sa WordPressa ili drugog CMS-a na statički sajt

Na migraciji se SEO dobija ili gubi. Sadržaj izvozimo preko WordPress REST API-ja ili dumpa baze, pretvaramo ga u Markdown ili učitavamo u headless CMS, preuzimamo i optimizujemo medije i zadržavamo istu strukturu URL-ova gdje god je to moguće. Svaki promijenjeni URL dobija 301 redirect, a prije lansiranja uporedimo staru i novu sitemapu i oba sajta pretražimo crawlerom. WordPress može ostati urednik, kao headless backend, dok posjetioci dobijaju statički frontend.

Otvoren laptop na svijetlom drvenom stolu sa drugim laptopom u pozadini

Kako radimo

Upoznavanje: pregledamo sadržaj, urednike, integracije i promet i potvrdimo da statička arhitektura odgovara vašim potrebama.
Plan: biramo generator, tok sadržaja, hosting i listu dinamičkih funkcija sa servisima koji će ih pokretati.
Izrada: razvijamo šablone i komponente, model sadržaja, obradu slika i CI/CD sa preview deploymentima.
Testiranje: provjeravamo Core Web Vitals, pristupačnost, pokvarene linkove, redirecte i svaku formu i integraciju na stvarnim uređajima.
Puštanje: prebacujemo DNS uz minimalan prekid, šaljemo sitemape i pratimo Search Console i izvještaje o greškama.
Podrška: držimo zavisnosti ažurnim, uvodimo urednike u rad i dodajemo funkcije kako sajt raste.

Zašto CodeWiz

Performanse su nam svakodnevni posao: od statičkog builda do Varnisha i Cloudflarea, brze web stranice su ono što radimo.
Savjet nezavisan od alata: Astro, Eleventy, Gatsby ili klasični CMS – preporučujemo ono što odgovara, a ne ono što je trenutno u modi.
Full-stack pokrivenost: forme, pretraga, API-ji, serverless funkcije i hosting dolaze od istog tima koji radi frontend.
Open-source na prvom mjestu: generatori, CMS opcije i alati bez vezivanja za dobavljača i bez licencnih naknada.
Fer cijene: vrhunski razvoj bez vrhunskih cijena, iz Banje Luke, uz rad na daljinu sa klijentima iz regiona i svijeta – saznajte više o CodeWizu.

Često postavljana pitanja

Koliko košta izrada statičke web stranice?

Zavisi od broja šablona, toka sadržaja, dinamičkih funkcija i toga da li sadržaj treba preseliti. Fokusiran sajt kompanije je skroman projekat, a višejezični sajt sa headless CMS-om, pretragom i velikom migracijom je veći. Jasnu procjenu dajemo nakon pregleda zahtjeva, a kasniji trošak hostinga obično je vrlo nizak.

Mogu li urednici bez tehničkog znanja ažurirati statički sajt?

Mogu. Uz CMS zasnovan na Gitu, kao što su Decap ili TinaCMS, ili headless CMS kao što su Strapi ili Sanity, urednici rade u poznatom vizuelnom interfejsu. Objava pokreće automatski rebuild, a izmjene su uživo za nekoliko minuta.

Šta je bolje, Astro ili Gatsby?

Za nove projekte obično preporučujemo Astro: šalje manje JavaScripta, brže se builda i aktivno se razvija. Gatsby i dalje ima smisla za postojeće sajtove koji rade kako treba, a njih održavamo ili selimo zavisno od stanja u kojem su.

Jesu li statički sajtovi dobri za SEO?

Jako dobri. Pretraživači odmah dobijaju kompletan HTML, stranice se brzo učitavaju, a metapodaci, sitemape i strukturirani podaci nastaju dosljedno tokom builda. Glavni rizik je migracija bez ispravnih redirecta, a to radimo pažljivo.

Može li statički sajt imati kontakt forme i pretragu?

Može. Forme idu na malu serverless funkciju ili vaš postojeći API, a pretraga radi ili iz statičkog indeksa koji pravi Pagefind ili iz posebnog pretraživača kao što je Typesense za veće sajtove.

Spremni za bržu i sigurniju web stranicu?

Izrada statičkih sajtova kreće od razgovora o trenutnom sajtu, o tome ko ga uređuje i koji su ciljevi. Kontaktirajte nas da predložimo arhitekturu, ili pogledajte cijelu ponudu naših usluga izrade statičkih sajtova.

Izrada statičkih sajtova: Astro, 11ty i Gatsby