Nakon nekoliko dugih godina korištenja WordPressa zajedno s Elementorom (Pro) kao glavnim alatom za dizajn, odlučio sam da je konačno vrijeme vidjeti što AI i "vibe coding" zapravo mogu učiniti za mene. Poznati alat dobro mi je služio za osobnu stranicu, ali znatiželja je prevladala i htio sam saznati može li moderan radni proces potpomognut umjetnom inteligencijom zamijeniti CMS na koji sam se već navikao.
Da budemo jasni, ovo mi nije bio prvi susret s "vibe codingom". Prije nekog vremena već sam ga koristio kao pomoć u stvaranju osnove za jedan od svojih projekata, jednostavnu 301 redirect landing stranicu nazvanu Buymeachinesetakeaweay, o kojoj možete čitati ovdje: https://idzan.hr/project/buymeachinesetakeaweay-com-fan-redirect-support-page/. Taj me projekt naučio kako prilagoditi izlazni kod umjetne inteligencije kako bih naknadno mogao ručno uređivati HTML te samostalno dodavati nove komentare i zanimljive citate autora. Bila je to sitnica, ali dala mi je samopouzdanje da razvoj potpomognut AI-jem može funkcionirati za mene u većem mjerilu.
Priprema za skok
Svaka ozbiljna migracija započinje sigurnosnom kopijom, a moja nije bila iznimka. Prije svega ostalog, izradio sam sigurnosnu kopiju izvorne baze podataka i svih medijskih datoteka te izvezao svaki dio sadržaja iz WordPressa u njegov izvorni XML format. Taj se izvoz kasnije pokazao zlata vrijednim jer je dao AI-ju strukturirani izvor istine za sav sadržaj koji se godinama skupljao na stranici.
Plan za novi dizajn bio je prilično jednostavan. Želio sam zadržati isti ili barem vrlo sličan izgled i dojam kao na izvornoj stranici, koju namjerno nisam gasio tijekom prijelaza. Na taj je način Claude mogao vidjeti stranicu uživo i koristiti njezin postojeći sadržaj kao referencu za skice, a kad god su mu bili potrebni podaci iz prve baze podataka, mogao sam ih jednostavno povući iz izvornog sadržaja.
Odabir temelja
Za samu osnovu CMS-a odabrao sam provjerenu i pouzdanu kombinaciju PHP-a i MySQL-a. U to se vrijeme činilo kao dosadan, pouzdan izbor, iako se kasnije pokazalo da ima više grešaka nego što je itko očekivao kada su objavljene dvije velike ranjivosti daljinskog izvršavanja koda, CVE-2026-109618 i CVE-2026-109619. Srećom, moje dugogodišnje iskustvo administratora sustava i samostalnog hostanja na VPS-u se isplatilo. Onog dana kada je zakrpa stigla, nisam zakrpao PHP samo za svoju stranicu, već za svaku stranicu hostanu na tom VPS-u. Kratka zahvala ovdje ide Hetzneru i Leasewebu što su tako brzo ubacili zakrpane verzije PHP-a za moju distribuciju po izboru u svoje predmemorije (cache), što je cijelu operaciju učinilo znatno bezbolnijom nego što je mogla biti.
Sama izrada
Proces "vibe codinga" i podešavanja trajao je ukupno nekoliko dana. Prvi dan je potrošen na dizajn i osnove sigurnosti, zajedno s konfiguracijom čišćenja CDN-a preko mog DNS davatelja usluga, pa još jedna zahvala ide Bunny.netu što je to učinio bezbolnim.
Zatim je uslijedila jedna od zanimljivijih značajki, višejezični prijevod pokretan umjetnom inteligencijom koji koristi više AI modela. Trenutna postava uključuje Google Gemini (gemini-3.5-flash-lite), OpenAI ChatGPT (gpt-6-luna), Anthropic Claude i Google Translate s API-jem ako je potrebno. Postojanje nekoliko dostupnih modela znači da nisam vezan uz jednog pružatelja usluga i mogu uspoređivati kvalitetu prijevoda među njima.
Stranica trenutno podržava hrvatski (/hr/), bosanski (/bs/), srpski (/sr/) i slovenski (/sl/), pri čemu svaki dobiva svoju kopiju prevedenog sadržaja. Engleski ostaje izvornik na korijenskoj putanji i služi kao zadani jezik za sve što još nije prevedeno. Osim trenutne .hr domene, aktivne su i domene specifične za države .ba, .si i .rs, zajedno s prethodno korištenima .eu i .com.hr te .name TLD-om, pri čemu sve 301 preusmjeravanjem vode na glavnu .hr domenu bez obzira na sve. Dakle, ako netko podijeli objavu s adresom poput /ba/post-name, ona prolazi kroz .hr/ba/ i slijeće na izvornu adresu u bosanskom prijevodu. A ako netko dođe na stranicu i ne razumije engleski, bez brige, AI prijevod je tu da pomogne putem izbornika jezika.
Sam izbornik jezika napravljen je sa SVG ikonama zastava iz moje vlastite zbirke ikona, kojima se upravlja kroz administratorsku ploču, a svaka je popraćena svojim ISO 639 jezičnim kodom, kako je navedeno na Wikipediji na https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes. Zanimljivo je da samo hrvatski kod zapravo odgovara državnoj vršnoj domeni, s obzirom na to da hr označava oboje. Ostali se razlikuju: bosanski je označen s BS, dok je domena države .ba, srpski je SR naspram .rs, a slovenski je SL naspram .si. Engleski je označen s EN, nema vlastitu domenu države i na stranici se prikazuje kao en-US.
Otprilike u to vrijeme administratorska ploča je također dobila prijeko potrebnu pažnju. Bila se pretvorila u mali nered, pa sam je očistio i organizirao s odgovarajućim podizbornicima kako bi se postavke ponovno mogle pronaći.
}Kasnije sam implementirao značajku koja neizmjerno pomaže u brzini i kompatibilnosti. Sve slike sada dobivaju WebP i AVIF kopije za brže učitavanje, s originalnim JPG-om ili PNG-om kao zamjenom (fallbackom) za starije preglednike. Ikone su očišćeni SVG-ovi nacrtani izravno u stranicu, nikada objavljeni kao datoteke za preuzimanje, tako da se moji plaćeni setovi SVG ikona ne mogu jednostavno preuzeti.
Puštanje u rad odrađeno je u duhu "implementacije uživo s mogućnošću brzog vraćanja na staru i stabilnu verziju ako nešto pođe po zlu". I iskreno, gotovo je i pošlo po zlu nekoliko puta zbog loše podešenih VHOST, NGINX i Varnish Cache konfiguracija, da ne spominjemo Google PageSpeed modul. Moram biti pošten i priznati da su te pogreške bile moje, a ne AI-jeve.
Mali detalji koji čine razliku
Kad je jezgra bila pokrenuta, dodao sam završni sjaj. Stranica sada ima robots.txt s dopuštenim popisom (allow-list) za dobre AI crawler botove, automatski ažurirani sitemap.xml s punom višejezičnom podrškom, plus llms.txt za AI asistente i podršku za IndexNow. Sve stranice poslužuju se kao čist statički HTML sa strukturiranim podacima u JSON-LD formatu, tako da AI agenti mogu lako čitati i pregledavati stranicu. Dobri botovi su dobrodošli; oni koji ignoriraju robots.txt blokirani su na CDN-u putem rubnih pravila (edge rules) – uz još jednu zahvalu za Bunny.net – i izravno u vhost konfiguraciji.
Što se tiče sigurnosti, adminska ploča je doista skrivena. Ne nalazi se na klasičnom /admin ili bilo kojoj drugoj putanji poznatoj po privlačenju napada grubom silom (brute-force). Umjesto toga, živi iza uistinu jedinstvenog sluga (slug) koji nitko neće pogoditi.
Dokumentacija i otvoren kôd (open source)
Budući da vjerujem kako je projekt dobar onoliko koliko mu je dobra dokumentacija, zatražio sam i README vodič te vodič za postavljanje. Oba su objavljena u GitHub repozitoriju na https://github.com/idzanhr/idzan_custom_cms_refresh. Vodič objašnjava projekt i prolazi kroz njegovo postavljanje bez mog stvarnog sadržaja. Bilo što osobno, poput detalja konfiguracije ili mojih vlastitih kodova, ostaje izvan javnog repozitorija i zamijenjeno je generičkim primjerima koji i dalje omogućuju svakome da sam ažurira CMS.
Završne misli
S ovom postavljenom osnovom, također sam ponovno bazirao i izgradio svoju stranicu Music Works na music.idzan.hr koristeći isti CMS na istoj osnovi i platformi. Za tu je stranicu trebalo malo manje vremena jer je riječ o jednoj poddomeni koja jednostavno navodi moje radove, a zamijenila je staru početnu stranicu koja je imala neke sadržaje o meni (About Me), premjestivši ih na zasebnu stranicu. Za kontakte i dalje vodi na moju drugu stranicu društvenih mreža na socials.idzan.hr, koju sam također kreirao unutar vibe coding pristupa, ali koristeći samo statičnu stranicu, budući da se ti podaci ne trebaju lako mijenjati ili dodavati te trebaju ostati u istom obliku. Ta je stranica jednostavna, čista, vitka i brza, s ocjenom 100/100 na Google Lighthouse testovima bez nepotrebnog opterećenja.
Gledajući unazad, napuštanje WordPressa i Elementora nakon svih ovih godina činilo se rizičnim, ali kombinacija pomne pripreme, čvrstih sigurnosnih kopija (backupova) i razvoja potpomognutog umjetnom inteligencijom pokazala je da je prilagođeni CMS izgrađen na ovaj način apsolutno održiv. Stranica je brža, vitkija, lakše razumljiva i kontroliram svaku njenu liniju. I ako se ikad nešto pokvari, još uvijek imam taj WordPress izvoz (export) sigurno spremljen na polici.
Ipak, ovo nije objavljivanje rata WordPressu. Za sve buduće projekte koji trebaju kompliciraniju stranicu ili web shop, i dalje ću rado posegnuti za radnom i stabilnom WordPress instalacijom s dodacima poput WooCommercea, uz prilagođeni kôd gdje je to potrebno. A neke stranice, zbog svog dizajna i složenosti, nikada neće biti pretvorene u AI vibe-coded projekte, što je svjesna odluka donesena imajući na umu njihove zahtjeve.
Osim ovog projekta, moj osobni GitHub sadrži još dva vibe-coded projekta temeljena na PHP-u i MySQL-u, izgrađena za internu upotrebu zajedno s nekoliko radnih kolega. Oni upravljaju sučeljem (front-end), dok je pozadina (back-end) u potpunosti moja, a možete ih pregledati na https://github.com/idzanhr?tab=repositories.
Jedna posljednja napomena u interesu transparentnosti: ovaj tekst je generiran i lektoriran uz pomoć modela Proton Lumo 2.0 Max, na temelju mog originalnog sadržaja i bilješki.